CSS-文档流（Normal Flow）

定义

文档流中：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。

脱离文档流

• 文档一旦脱离文档流，在算其父元素的高度时，就不包括其自身了。
• 脱离文档流的方法：

1. float:left; 2. position: absolute; 3. position:fixed
   
   

   1.png

.v1 { position: fixed;}

3.png

可以看到对.v1进行 fixed定位后，其父元素的高度便与他无关。
具体代码示例：

相对定位relative对文档流的影响

4.png

.v1 {
  position: relative;
  top: 20px;
  background: yellow;
}
.v2 {
  background: blue;
}

5.png

• 总结1： 通过开发者工具可知，两次的.box的高度是一样的，所以对元素进行相对定位不会影响其父元素的高度。
• 总结2： 对元素进行相对定位，其在父元素的真实空间位置还是原来的位置，只是肉眼看到的是新位置相对于原来的位置进行移动，所占据的真实空间是不变的。
  具体代码示例：

div高度的确定

• div里面只有一行内联元素，其高度 = 这一行内联元素的行高
  
  

  6.png
  
  
  

  7.png
  
  总结： font-size:20px可是div的高度为26px，当字体改变时font-family:yahoma时，div的高度又是另外一个值，说明div的高度由字的大小x开发者建议的行高确定，与font-size无关。
• 具体写入line-height的值,没有padding等。

.box2 {
  margin: 10px;
  line-height: 30px;
  border: 1px solid green;  /*border其实是占据空间的，上下共占据2px。*/
}

9.png

总结：div的高度即为 line-height的值 。（在没有padding的前提下）

• div里面还有div，div的高度

.box3 {
  border: 1px solid blue;
  padding: 10px;
}
.v1 {
  border: 1px solid yellow;
  margin: 20px;
  padding: 20px;
}

10.png

总结：div的高度由其自身的 padding+子元素的高度+子元素的 margin、padding。

• div里面有块级元素和内联元素，div的高度
  总结：div的高度由它内部文档流中元素的总和决定。决定！=相等，还存在行高、padding、margin等等。
  具体代码示例：

div的宽度确定

div的宽度不是由div里面的文字决定的，div默认是一行宽。

内联元素的宽高

内联元素的宽度由其内容+margin+padding决定，但是其高度是不受padding和margin影响的。

11.png