跳至主要內容

CSS盒模型

yyshino大约 1 分钟

CSS 盒模型

简介：就是用来装页面上的元素的矩形区域。CSS 中的盒子模型包括

  • IE 盒子模型
  • 标准的 W3C 盒子模型

box model = margin+border+padding+content

------------------------------------------
|                 margin                 |  
| -------------------------------------- |
| |               border               | |
| | ---------------------------------- | |
| | |             padding            | | |
| | | ------------------------------ | | |
| | | |           content          | | | |
| | | |                            | | | |
| | | |                            | | | |
| | | ------------------------------ | | |
| | ---------------------------------- | |
|  ------------------------------------- |
------------------------------------------

标准盒子模型和IE盒子模型

区别：这两种盒子模型最主要的区别就是 width 的包含范围，在 标准的盒子模型中，width 指 content 部分的宽度，

  • 在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差 异：

  • 标准盒子模型的盒子宽度：左右 border+左右 padding+width IE 盒子模型的盒子宽度：width

box-sizing属性

  • content-box：默认值，width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的margin、border、padding，称为标准盒子模型。
  • border-box：为元素设定的width和height属性决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去border和padding才能得到内容的宽度和高度，称为IE盒子模型。
  • inherit：规定应从父元素继承box-sizing属性的值。

前面我们还提到了，box-sizing:padding-box,这个属性值的宽度包含了左右 padding+width

也很好理解性记忆，包含什么，width 就从什么开始算

参考

CSS盒子模型 (touchczy.top)open in new window