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定位