1. 浅谈CSS标准流

1. 浅谈CSS标准流

1. 标准流（normal flow）

   标准流,也称文档流，指标签盒子在页面中默认的排布规则（从左至右，自上而下）

2. 块级元素（block-level elements）

   • 常见块级元素：div、ul、ol、li、p、h1~h6、dl、dt

   • 排布规则和默认设定

   • 块级元素独占一行 ，自上而下排列

   • 块级元素可设宽高和内外边距

     • 若不设宽度，则默认为父级元素宽度
     • 高度没有默认，不设高度若元素无内容就不可见，有内容高度就随内容的变化动态改变

   • 块级元素内可包含块级元素和内联元素（行内元素）

     • 特殊
       • ul的一级子标签一般只能是ol或li
       • dl的一级子标签一般只能是dt和dd

3. 行内元素 （inline-level elements）

   • 常见行内元素： span、img、input、button、a、b、strong、em、i、u、br、textarea

   • 排布规则和默认设定

     • 行内元素不会独占一行，相邻的行内元素会排列在同一行里，除非宽度超过父级元素宽度，才换行，且宽度随元素内容的变化动态改变

     • 行内元素宽高无效，内外边距水平方向有效，垂直方向无效

       • 特殊

         • img、input、textarea等行内元素可设置宽高

         • 原因

           元素分类有另一种分类方式（替换元素和不可替换元素）

           • 替换元素
             • 浏览器根据元素的标签和属性来显示具体内容
             • 替换元素一般有内在尺寸，如img默认的src属性所引用图片的宽高
           • 不可替换元素
             • 大多数元素都是不可替换元素，元素内容直接呈现给用户端

   • 行内元素可包含行内元素，不可包含块级元素

4. 转换

   • display: block (块)、display: inline (行内)、display:inline-block (行内块)

5. 脱离文档流

   • 元素脱离文档流后会浮动起来，在文档流上方，不再占用文档流的空间，后续元素会补上脱离文档流元素的位置空间

   • 方法：position：absolute、position: fixed、float、position: reletive(半脱离)

6. 恢复文档流（清除浮动）

   • 下一小节 2.清除浮动原理及实现

​ 2020/10/17

​ 注：若有错误之处，欢迎大家指正