CSS---flex布局

一、CSS 盒子模型(Box Model)

盒子模型  ---  display: content-box

盒子中的区域

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：

• width和height：内容的宽度、高度（不是盒子的宽度、高度）。
• padding：内边距。
• border：边框。
• margin：外边距。

    

 

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

CSS盒模型和IE盒模型的区别：

• 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。盒子实际宽度（高度）=内容（content）+边框（border）+间隙（padding）+间隔（margin）。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

• IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度 

CSS3 box-sizing 属性 

box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

用法：box-sizing: content-box|border-box|inherit;

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 默认值，平时普通盒子模型，向外扩展，添加border，padding，盒子会变大
border-box	为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 向