CSS进阶六：display，position，float，cl

文档流

文档流
文档流处在网页的最底层，它表示的是一个页面中的位置，
我们所创建的元素默认都处在文档流中
             
元素在文档流中的特点
块元素
    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不浮动
• left
• right

特点

1. 浮动以后完全脱离文档流
2. 浮动以后元素会一直向父元素的最上方移动
3. 遇到父元素的边框或其他浮动元素会停止移动
4. 浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素
5. 浮动元素不会超过它上边的兄弟元素，最多对齐
6. 浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以用过浮动来实现文字环绕的效果。

设置浮动后元素改变：

• 块元素

• 不会独占一行

• 宽度和高度被内容撑开

• 内联元素

• 内联元素脱离文档流之后会变成块元素

高度塌陷

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷

解决方法：

开启BFC

开启BFC后将具有的特性

1. 父元素的垂直外边距不会和子元素重叠

2. 开启BFC的元素不会被浮动元素覆盖

3. 开启BFC的元素可以包含浮动元素

开启方式

1. 设置元素浮动
2. 设置元素绝对定位
3. 设置元素类型为inline-block
4. 设置overflow：hidden
5. haslayout，IE6中没有BFC，有类似的haslayout

• 开启方式：
• zoom：1
• 为元素设置宽度非默认值会开启haslsyout

6. 使用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

1. 当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
2. 相对定位是相对于元素在文档流中原来的位置进行定位
3. 相对定位的元素不会脱离文档流
4. 相对定位会使元素提升一个层级
5. 相对定位不会改变元素的性质，块还是块，内联还是内联

absolute

1. 开启绝对定位，会使元素脱离文档流
2. 开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3. 绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
4. 绝对定位会使元素提升一个层级
5. 绝对定位会改变元素的性质，

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;