本文共 840 字，大约阅读时间需要 2 分钟。
文档流与盒模型
文档流是网页元素排版的基本原则，它决定了元素的显示方式。文档流的核心规则是“从左到右，从上到下”排布。
内联与块级元素内联元素（如span、a、i等）和块级元素（如div、p、h1等）在文档流中的表现有显著不同。 - 内联元素会水平排列，若内容超出一行，则会自动换行，最后一个元素可能会被分割成两部分。
- 块级元素则会占据整个行高，除非设置了width限制，默认情况下块级元素会自动填满当前行宽度。
注意：不要在内联元素中嵌套块级元素，否则会导致布局混乱。
- 宽度控制
- 内联元素的宽度由其内容决定，不能通过width属性指定。
- 块级元素默认会占满整个行宽，除非设置width为某个具体值或百分比。
- inline-block元素则会水平排列，宽度由内部内容决定，但可以通过width属性进行调整。
- 高度控制
- 内联元素的高度由字体大小和行高（line-height）决定，与height属性无关。
- 块级元素的高度可以通过height属性设置，高度范围内的内容会被截断或隐藏。
- inline-block元素的高度控制与块级元素相同，可以通过height属性调整。
- 溢出处理当容器的宽度或高度有限时，内容超出部分会触发溢出。
- overflow: auto：在超出部分添加滚动条。
- overflow: scroll：总是显示滚动条。
- overflow: hidden：隐藏超出部分。
- overflow: visible：默认状态，超出部分可见。
- overflow: none：完全隐藏溢出内容，不显示滚动条。
- 脱离文档流通过position属性可以让元素完全脱离文档流。
- 使用position: absolute或fixed：元素位置由绝对值决定，不受父容器布局影响。
- 使用float: left或right：元素会浮出文档流，但会占用父容器的空间。
要避免的错误：
- 不要在内联元素中嵌套块级元素。
- 不要在块级元素中嵌套内联元素。
- 不要在内联元素中使用display: block。
转载地址：http://ifvi.baihongyu.com/