文档流
文档流
文档流处在网页的最底层，它表示的是一个页面中的位置，
我们所创建的元素默认都处在文档流中
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列。
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
display
修改元素的类型
可选值:
-
none元素不在页面中显示，也不会占据页面位置 -
block元素作为块元素显示 -
inline元素作为内联元素显示 -
inline-block元素作为行内块元素显示 -
table此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 -
table-cell此元素会作为一个表格单元格显示（类似<td>和<th>）制作多列等宽自适应布局 1.父元素 display: table; width: 100% 2.布局元素（子元素 ） display: table-cell; 3.子元素之间的空隙，通过一个正常的div分割即可。 4.如果存在多行，需要在包裹一个 display: table-row（<tr>） -
flex/inlineflex伸缩盒模型（快速布局利器）
visibility
设置元素可见性
可选值
-
visible -
hidden元素不在页面显示，但是依然占用页面中位置
overflow
元素溢出内容处理（子元素内容超出父元素）
可选值:
-
visible不处理直接在父元素意外的位置显示 -
hidden把超出父元素的内容隐藏 -
scroll在父元素中添加滚动条 -
auto根据需求自动生成滚动条
float
-
none不浮动 leftright
特点
- 浮动以后完全脱离文档流
- 浮动以后元素会一直向父元素的最上方移动
- 遇到父元素的边框或其他浮动元素会停止移动
- 浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素
- 浮动元素不会超过它上边的兄弟元素，最多对齐
- 浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以用过浮动来实现文字环绕的效果。
设置浮动后元素改变：
-
块元素
-
不会独占一行
-
宽度和高度被内容撑开
-
内联元素
-
内联元素脱离文档流之后会变成块元素
高度塌陷
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷
解决方法：
开启BFC
开启BFC后将具有的特性
-
父元素的垂直外边距不会和子元素重叠
-
开启BFC的元素不会被浮动元素覆盖
-
开启BFC的元素可以包含浮动元素
开启方式
- 设置元素浮动
- 设置元素绝对定位
- 设置元素类型为inline-block
- 设置overflow：hidden
- haslayout，IE6中没有BFC，有类似的haslayout
- 开启方式：
- zoom：1
- 为元素设置宽度非默认值会开启haslsyout
-
使用after伪类操作
.clearfix:after{ content:""; display:block; clear:both; } ie6以下的还需要使用 .clearfix{ zoom:1; }
clear
清除浮动
-
受到浮动的影响，下边的元素会向上移动
-
我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能 对于CSS的
-
一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
-
none允许左右两侧有浮动元素 -
left在左侧不允许浮动元素。 -
right在右侧不允许浮动元素 -
both在左右两侧均不允许浮动元素。
position
设置元素的定位方式
可选值
-
static默认值，元素没有开启定位 -
relative开启元素的相对定位 -
absolute开启绝对定位 -
fixed开启固定定位
relative
- 当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
- 相对定位是相对于元素在文档流中原来的位置进行定位
- 相对定位的元素不会脱离文档流
- 相对定位会使元素提升一个层级
- 相对定位不会改变元素的性质，块还是块，内联还是内联
absolute
- 开启绝对定位，会使元素脱离文档流
- 开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
- 绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
- 绝对定位会使元素提升一个层级
- 绝对定位会改变元素的性质，
fixed
- 固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
- 不同的是：
- 固定定位永远都会相对于浏览器窗口进行定位
- 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
- IE6不支持固定定位
z-index
层级
当元素开启了定位以后，可以通过z-index来设置元素的层级，对于没有开启定位的元素不能使用z-index
- z-index值越高元素越优先显示
- 如果定位元素的层级是一样，则下边的元素会盖住上边的
- 父元素的层级再高，也不会盖住子元素
定位元素 > 浮动元素 > 文档流中的元素
偏移量
元素开启定位之后可以通过设置偏移量来设置元素偏移位置，需要设置偏移量之后元素才会移动不然还是在原来位置
left
元素距离定位位置的左侧距离
right
元素距离定位位置的右侧距离
bottom
元素距离定位位置的底部距离
top
元素距离定位位置的上边距离
多列（对子元素进行多列分布）
用来制作多列分割的瀑布流
column-count
设置被分割的列数
column-fill
如何填充列
参数：
-
auto尽量填充每一列 -
balance均匀填充每一列
column-gap
列之间的间隔
column-rule
（简写）
column-rule-color
列之间规则的颜色
column-rule-style
列之间规则的样式
column-rule-width
列之间规则的宽度
column-span
元素应横跨的列数
column-width
列的宽度
/*column-count: 5;*/
column-width: 200px;
column-rule: 5px solid red;
column-gap: 2em;
/*
当父元素指定高度，
设置 column-fill: auto; 尽量填充每一列
设置 column-fill: balance; 均匀填充每一列
*/
height: 1000px;
column-fill: auto;
网友评论