浅谈标准流

212 阅读1分钟
  1. 标准文档流:指的是元素排版布局过程中,元素会默认从左往右、从上往下的流式排列方式。前面的内容发生变化后,后面的内容位置也会随着发生变化。 HTML 就是一种标准文档流文件。
  2. 块级元素:
    • div、ul、ol、p、h...
    • 块级元素独占一行,自上而下排列
    • 可设宽高和内外边距(如不设置宽度,则默认继承父级元素宽度)
    • 块级元素内可包含块级元素和行内元素
  3. 行内元素:
    • span、img、input、button...
    • 相邻行内元素排列在同一行,若宽度大于父级元素宽度——自动换行
    • 行内元素设置宽高无效,内外边距水平方向有效
    • a标签中可以放块级元素
    • 行内元素可包含行内元素
  4. 转化为行内块元素后,可设置宽高内外边距,不会自动换行,但相邻元素在同一行中间会有空白缝隙,此时可以让margin使用负值解决
  5. 脱离文档流:浮动且不占原来的位置
    • 方法:position:absolute/fixed或设置float
    • 恢复:清除浮动