乐趣区

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

退出移动版