盒模型简述

对文档进行布局时，浏览器会根据 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子

CSS 决定这些盒子的大小、位置以及属性

每个盒子由四个部分（或称区域）组成

盒模型

  • 内容区域 content area

    由内容边界（content edge）限制，容纳着元素的内容，如文本、图像

    其尺寸为 content-box 的宽度和高度，通常含有一个背景颜色或背景图像

  • 内边距区域 padding area

    由内边距边界（padding edge）限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距

    其尺寸为 padding-box 的宽度和高度，由padding属性控制

  • 边框区域 border area

    由边框边界（border edge）限制，扩展自内边距区域，是容纳边框的区域

    其尺寸为 border-box 的宽度和高度，边框的粗细形状和颜色由border属性控制

    如果box-sizing属性被设为border-box，那么边框区域的大小可明确地通过width min-width max-width height min-height和max-height属性控制

    假如框盒上设有背景，背景将会一直延伸至边框的外沿

  • 外边距区域 margin area

    由外边距边界（margin edge）限制，用空白区域扩展边框区域，以分开相邻的元素

    其尺寸为 margin-box 的宽度和高度，外边距区域的大小由margin控制

除可替换元素外，对于行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（每一行文字的高度）则由line-height属性决定，即使边框和内边距仍会显示在内容周围。

1
<div class="boxmodel">Box Model</div>
1
2
3
4
5
6
7
.boxmodel {
    width: 300px;
    height: 150px;
    margin: 30px;
    padding: 30px;
    border: 30px solid gray;
}
Box Model

Chrome中的盒模型

两种盒模型

标准盒模型

width = 内容区的 width

标准盒模型

可以通过如下方法设置

1
2
3
div {
    box-sizing: content-box;
}

IE盒模型

width = 内容区的 width + padding * 2 + border * 2

IE盒模型

可以通过如下方法设置

1
2
3
div {
    box-sizing: border-box;
}