css-盒模型

HTML为流式文档（自上而下），每个HTML元素都会渲染成为一个矩形（也可以理解为盒子，盒模型概念因此而来），这个矩形最终的呈现形式受很多因素影响。其中包括元素是内联还是块级（inline box、block box），box-sizing属性和display属性。

内联和块状

内联和块状元素的区别大体有两点，有无宽高概念和是否独占一行。

• 内联元素本身没有宽高和padding、margin的概念（但是你设置宽高、padding、margin属性时，有些浏览器也是有作用的），他的大小完全由所包含内容撑起
• 块状元素具有宽高、padding和margin属性，而且宽度默认占满一行

可参考块级元素和行内元素

box-sizing

在HTML中，任何元素都会被呈现为一个矩形。矩形由内容（content）、内边距（padding）、边框（border）和外边距（margin）构成。

那么，问题来了。当我们设置一个元素的宽度和高度时（假如都是100px），那么这100px到底包含了上面矩形构成里面的哪几个部分？答案是这要看box-sizing属性。

• box-sizing: content-box

.content-box{
    height: 100px;
    width: 100px;
    padding: 10px;
    margin: 10px;
    box-sizing: content-box;
}
复制代码

如上面css所描述，该元素box-sizing为content-box，那么整个元素的盒模型如下图所示：

• box-sizing: border-box

.border-box{
    height: 100px;
    width: 100px;
    padding: 10px;
    margin: 10px;
    box-sizing: border-box;
}
复制代码

如上面css所描述，该元素box-sizing为border-box，那么整个元素的盒模型如下图所示：

大部分浏览器默认盒模型为content-box，即所声明的宽高就是元素的宽高，不会被padding和margin所占用。

display属性

display指定了元素渲染HTML矩形的类型（type of rendering box）：

• none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
• inline：指定对象为内联元素
• inline-block：指定对象为内联块元素
• block：指定对象为块元素
• list-item：指定对象为列表项目
• inline-list-item：指定对象为列表项目
• table：指定对象作为块元素级的表格。类同于html标签<table>
• inline-table：指定对象作为内联元素级的表格。类同于html标签<table>
• table-caption：指定对象作为表格标题。类同于html标签<caption>
• table-cell：指定对象作为表格单元格。类同于html标签<td>
• table-row：指定对象作为表格行。类同于html标签<tr>
• table-row-group：指定对象作为表格行组。类同于html标签<tbody>
• table-column：指定对象作为表格列。类同于html标签<col>
• table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>
• table-header-group：指定对象作为表格标题组。类同于html标签<thead>
• table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>
• run-in：根据上下文决定对象是内联对象还是块级对象
• box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）
• inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）
• flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）
• inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）
• flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）
• inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）