css--盒模型

css的盒模型分为两种：标准盒模型、IE（替代）盒模型

两种盒模型都是由padding + border + margin + content构成，其大小由padding + border + margin决定，但盒子内容!!!!的宽高（即width/height)的计算会根据盒模型的不同会有所不同，可以通过box-sizing属性来更改元素的盒模型。

在谷歌浏览器，按下F12，然后把右边栏的滚动条拉到最下面你就会看到一个东西：

不同部分的说明：

• Margin(外边距)  - 边框外围的区域，外边距是透明的，它可以使盒子之间不会紧紧挨在一起。

/*
可设置属性有margin，margin-top，margin-right，margin-bottom，margin-left
margin属性，设置盒子的上右下左外边距
 1个值：如margin:10px;，代表上右下左外边距都为10px；
 2个值：如margin:10px 5px;,代表上下外边距为10px，左右外边距为5px;
 3个值：如margin:10px 8px 5px;代表上外边距为10px，左右外边距为8px，下外边距为5px；
 4个值：如margin:10px 8px 5px 4px;代表上外边距为10px，右外边距为8px，下外边距为5px；左外边距为4px

margin-top，设置盒子上外边距
margin-right,设置盒子右外边距
margin-bottom,设置盒子下外边距
margin-left:,设置盒子左外边距
*/

• Border(边框)  - 围绕在填充和内容的边界。

/*
可设置属性有
border-width，设置边框的宽度，属性值可以是长度计量（如：10px),也可以是css规定的thin、medium、thick
border-color，设置边框的颜色
border-style,设置边框样式，如solid（实线），dotted（点线），dashed（虚线）
border:是border-width，border-color，border-style的缩写，如border: 1px solid red;,必传border-width,border-style
border-top/right/bottom/left-width/color/style,设置上/右/下/左边框的 宽度/颜色/样式
border-radius,设置边框圆角，css3添加此属性
 */

• Padding(内边距/填充)  - 是内容区与边框之间的空白，填充是透明的，如果设置了内容区的背景色属性，可使背景色延伸至填充区域。

padding的可设属性与margin差不多，可参考margin

• Content(内容)  - 盒子的内容，显示文本和图像。

盒模型如何工作

当我们指定一个 CSS 元素的宽度和高度属性时，我们只是设置内容区域的宽度和高度。要知道，完整大小的元素，我们还必须添加内边距，边框和外边距。

/*
   width,设置盒子内容宽度
   height，设置盒子内容高度
   overflow，设置盒子内容溢出处理方式，hidden：溢出部分不可见，visible：溢出内容可见，只是呈现在盒子外部，scroll：滚动条，用户可拉动滚动条显示内容，auto：溢出内容由浏览器决定如何处理
*/

.box{
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid cadetblue;
    margin: 10px;
    background: darkolivegreen;
}

标准盒模型

盒子内容的宽高（width/height)只包含content，即属性width,height只包含内容content，不包含border和padding

.box{
    width: 100px;
    height: 100px;
    padding: 10px;
    background: darkolivegreen;
    border: 10px solid cadetblue;
    /*默认值*/
    box-sizing: content-box;
    margin: 10px;
}

IE(代替）盒模型

盒子内容的宽高（width/height)只包含padding + border + conten，即属性width,height包含内容content、border和padding

.box{
    /*设置content属性*/
    width: 100px;
    height: 100px;
    /*设置padding属性*/
    padding: 10px;
    background: darkolivegreen;
    /*设置border 属性*/
    border: 10px solid cadetblue;
    /*设置盒子模型属性*/
    box-sizing: border-box;
    /*设置margin属性*/
    margin: 10px;
 }