CSS盒子模型

盒子模型

一个盒子的内部结构

每个元素都可以看成是一个盒子

• 盒子模型由4个部分组成

  • content（内容）

    • width属性设置content宽。

    • height属性设置content高。

    • overflow属性设置当内容超出内容区范围时，指定处理方法。

      • overflow有3个属性值

        • visible（默认值）

          • 如果内容溢出，那么溢出内容可见。

        • hidden

          • 如果内容溢出，那么溢出内容隐藏。

        • scroll

          • 如果内容溢出，那么显示滚动条。

      • 一个例子是，overflow: hidden;

  • border（边框）

    • border-width属性，指定边框宽度。
    • border-style属性，指定边框样式。
    • border-color属性，指定边框颜色。

  • padding（内边距）

    • padding-top属性
    • padding-left属性
    • padding-right属性
    • padding-bottom属性
    • padding属性，顺时针方向指定以上4个属性

  • margin（外边距）

    • 指的是2个盒子之间的距离。

      • marigin-top属性
      • marigin-left属性
      • margin-right属性
      • margin-bottom属性
      • margin属性，顺时针方向指定以上4个属性。

    • 外边距叠加

      • 只有垂直外边距（margin-top、margin-bottom）会有叠加情况。

      • 在3种情况下，垂直外边距会发生叠加

        • 同级元素

          • 一个例子是，当元素A出现在元素B的上面时，A的margin-bottom和B的margin-top会发生叠加。

        • 父子元素

          • 一个例子是，当子元素包含在父元素内部时，如果没有padding和border把外边距分隔开，父子元素的上下外边距会发生合并。

        • 空元素

          • 空元素指的是没有子元素或没有文字内容的元素，如<\br/>、<\hr/>。
          • 一个例子是，如果没有padding和border，空元素的上下外边距会发生合并。

XMind: ZEN - Trial Version