CSS盒子模型

       盒子一般指的是块元素，盒子是我们布局的重要机制。一个盒子应该由外边距、边框、内边距、内容组成。

1.1.margin外边距

       margin 外边距,是 margin-top， margin-right， margin-bottom 和 margin-left 的速写形式。用于设定元素的上右下左四个方向的外边距。注意：盒子上下外边距会合并，左右边距不会合并。

margin:10px;/*上右下左*/
margin:0 10px;/*上下，左右*/
margin:0 5px 10px;/* 上，左右，下*/
margin:0 5px 10px 15px;/* 上，右，下，左*/

1.2.border

      border 边框，是border-top， border-right， border-bottom 和 border-left 的速写形式。用于设定元素的上右下左四个方向的内边距，而border-top又是 border-top-color, border-top-style, 和border-top-width 的三者的缩写，分别用于表示上边框的颜色，样式和宽度。

border: 1px solid #ccc;

1.3.padding

       padding 内边距,是 padding-top， padding-right， padding-bottom 和 padding-left 的速写形式。用于设定元素的上右下左四个方向的内边距。

/*上右下左*/
padding:10px;  
/*上下，左右*/
padding:0 10px;  
/* 上，左右，下*/ 
padding:0 5px 10px;
/* 上，右，下，左*/
padding:0 5px 10px 15px;

1.4.width&height

默认情况下width与height是用于设定盒子内容区域的宽度和高度。

width: 100px;
height:100px;
border:1px solid #ccc;
padding:0 1px; 
/*默认情况下盒子实际占据的宽度是
width + 2borderWidth + 2paddingWidth = 104px */

1.5.盒子模型

      使用box-sizing属性可以改变盒子模型，取值''content-box''的盒子为内容盒子模型（默认），取值为''border-box''的盒子为边框盒子。

1.）内容盒子

width属性仅表示盒子内容宽度，height属性仅表示盒子内容所占的高度

2.）边框盒子

边框盒子也称为怪异盒子，其特点为：我们为一个盒子指定width属性的时候，实际上width包含了border和padding的宽度，如果border不变，padding变大，这时候内容会变小。

1.6.背景色

background-color      用于设定盒子的背景色

background-image     用于设定盒子的背景图片：取值url('图片地址')

background-size        用于设定背景图片大小：取值cover表示把背景图像扩展至足够大，以使背景图像完全覆盖背景区域；取值contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域：取值百分比表示把图像进行缩；取值100px 200px表示将图片设定为固定大小background-repeat  用于设定背景图片重复方式：repeat/repeat-x/repeat-y/no-repeat

background-origin       用于设定背景铺设的起点：border-box/padding-box/content-box

background-clip         用于设定背景裁切的方式：border-box/padding-box/content-box

background-attachment     用于设置背景图片的固定点：scroll/fixed/local

background-position     用于设置背景图片的位置：center/left/坐标

background             速写形式，取值：[<attachment>][<clip>][<color>][<image>][<position>][<repeat>]