CSS中盒子模型和box-sizeing属性

盒子模型

       一个web页面有许多html元素组成，而每一个html元素都可以表示为一个矩形的盒子，CSS盒模型正是描述这些矩形盒子的存在。

       CSS盒模型有四条边：外边距边(Margin edge)、边框边(Border egde)、内填充边(Padding edge)、内容边(Content edge)，四条边由内到外把它划分为四个区域：内容区域、内边距区域、边框区域、外边距区域(Content area、Padding area、Border area和Margin area)。

                                      

• 内容区域(Content area)是包含元素真实内容的区域
• 内边距区域(Padding area)延伸到包围Padding的边框。如果Content area设置了背景、颜色或者图片，这些样式将会延伸到Padding上。
• 边框区域(Border area)是包含边框的区域，扩展了内边距区域。
• 外边距区域(Margin area)用空白区域扩展边框区域，以分开相邻的元素。

可以通过CSS属性(width、height、padding、border和margin)来控制它们的尺寸。

box-sizing(CSS3属性)

1. box-sizing的值

 box-sizing: content-box; /*默认值*/
 box-sizing: border-box;

2. box-sizing的作用

        box-sizing的作用就是告诉浏览器，使用的盒模型是W3C盒模型，还是IE盒模型。

        当box-sizing的值为content-box(默认值)时，其尺寸计算公式为：

width = content-width;
height = content-height;

         当box-sizing的值为border-box时，其尺寸计算公式为：

width = content-width + padding-left + padding-right + border-left-width + border-right-width;
height = content-height + padding-top + padding-bottom + border-top-height + border-bottom-height;

         无论取何值，盒子尺寸是一样的，不一样的是盒子的容量: