Frontend-之-CSS

普通流 /normal-flow(文档流 /document-flow)

• W3C 规范中没有文档流 /document-flow 这个概念，只有普通流 /normal-flow, 文档流的叫法主要还是多数中文译者的翻译方式问题。
• 什么是普通流？
  就是元素（块级元素 / 行内元素）按照其在 HTML 中的位置顺序（从上至下，从左至右）排布的过程

• 有什么方式可以调节普通流元素位置？

  • margin: 隔开元素与元素的间距，控制块级元素之间的距离
  • padding: 隔开元素与
  • 内容的间距，控制块级元素内部

  • float:

    1. 使块级元素能够在一行排布
       
    2. 使文字环绕元素
       
    3. 不完全脱离文档流，内容不脱离文档流
       

  • position 定位方式布局:

    1. static: 默认的定位方式
    2. relative: 相对定位，不脱离文档流
       
    3. absolute: 绝对定位，脱离文档流
       
    4. fixed: 固定定位，脱离文档流
       

盒子模型 /Box model

• 盒模型主要定义四个区域
  

  • 内容 (content)
  • 内边距 (padding)
  • 边框 (border)
  • 外边距 (margin)

• 注意

  • background-color/background-image 是在 padding+content 区域内定义
  • 盒子宽度 == border(right+left) + padding(right+left) + content-width
  • padding 会撑开盒子，计算盒子宽度时，需要留意 padding

浮动 /Float + position 定位