文档自动排序长短_css 文档流

一个重要的观点！！！

元素部分inline元素和block元素！！！

元素可以通过以下3种来改变默认的属性。

• display：inline（内联元素）
  • 流动方向：从左到右排列，直到这一行排满，会出现折行现象。
• display:block（块级元素）
  • 流动方向：每个元素占一行的从上到下排列。（不管他本身长短，独占一行）
• display:inline-block（内联块元素）
  • 从左到右排列，但不会折行。

文档流(normal flow):正常的流动方向；（从左到右，从上到下）。

图1：默认的流动方向

宽度：

1. inline元素的宽度是由内部inline元素的总和决定的，不能够用width指定。（特别注意：display：inline元素里面不能够有display：block元素）
2. block元素的宽度是默认（auto）计算的，能有多宽有多宽；可以用width来指定宽度。（特别注意：永远不要指定宽度为100%）
3. inline-block元素的宽度结合两者，但可以用width指定。默认和span一样

长度单位：px，em，%；（常用的三种），整数，rem，以及vw和vh。

图2：详解宽度。

高度：

1. inline的高度由line-height（行高）间接决定的，跟height无关，不可以指定高度。但可以接受padding。（改变的不是span的高度，而是看的见的高度。）<span></span>有高度，高度为行高。
2. block的高度由内部文档流元素的总和决定（正常流动的文档流元素），可以设置height。有些元素会脱离文档流，所以父元素在算高度的时候不会将脱离文档流元素的高度算进去。<div></div>的高度为0
3. inline-block跟block类似，也可以设置height。

溢出文档流(overflow)：

图3 溢出文档流（overflow）

overflow解决方法：

• overflow: auto;（自动显示滚动条，当你超出时显示，不超出时候不显示）

图4 overflow：auto；

托尼

• overflow: hidden;（超出部分隐藏）

图5 overflow：hidden；

• overflow: scroll；（超出部分用户可以使用滚动条查看，横竖都有滚动条，就算你不超出，也会出现滚动条。款式丑，不用。）

图6 overflow:scroll

• overflow: visible;（超出部分可见的，就是和图3一样，他的默认就是overflow:visible;）

脱离文档流:

由block元素的高度定义可知：block元素的高度是由其内部文档流的高度决定的，可以设置height。但有些元素是脱离文档流的，脱离文档流的元素是不会被父元素计算高度的。

脱离文档流方法：

1. 绝对定位： position:absolute; 或者 position：fixed；
2. float:left; 或者 float: right;

图7 div的高度由1和2决定。但是1和2都已经脱离文档流，不被父元素所计算高度。

---

本文为陈瑾仪的原创文章，著作权归本人和饥人谷所有，转载务必注明来源。