前端入门篇-盒子模型

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的CSS基础框盒模型（CSSbasicboxmodel），将所有元素表示为一个个矩形的盒子（box）。CSS决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）

 

 

内容区域 content area 

盒子模型中必需的部分，可以是文字、图片等元素。

容区域的大小可明确地通过 width、min-width、max-width、height、min-height，和 max-height 控制。

内边距区域 padding area 

也称页边距或补白，用来设置内容和边框之间的距离。

内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left，和简写属性 padding 控制。

边框区域 border area 

可以设置内容边框线的粗细、颜色和样式等。

边框的粗细由 border-width 和简写的 border 属性控制。

外边距区域 margin area

外边距，用来设置内容与内容之间的距离。

外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。

box-sizing

CSS 中的 box-sizing 属性定义了应该如何计算一个元素的总宽度和总高度。

content-box  是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

box-sizing: content-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;

 border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;