盒子模型： 所有的HTML元素可以看作盒子，css盒模型本质上就是一个盒子，封装周围的html元素，它包括：
Content 盒子的内容，显示文本和图像。
Padding 盒子的内边距（补白），盒子内容与盒子边框之间的距离，内边距是透明的。
Border 盒子的边框，围绕在内边距和内容外的边框。
Margin 盒子的外边距，盒子边框之外的距离
一些注意事项：
1. 对于行内元素来说，width和height设置无效，其宽度有内容本身决定，其高度由font-size决定。
2. width属性默认值为auto，块元素的贪婪性和行内元素的懒惰性。，
3. 有些标签有默认的padding值，如ul、ol等。可以使用*{padding:0}清除
4. 对于行内元素来说，margin只有margin-left和margin-right有效，
padding只有padding-left和padding-right有效。
块级元素：可以设置盒子模型的6大属性：margin，border,padding，widht，height，background。
margin:盒子与盒子之间的距离，分上，下，左，右四个方向
margin-top、margin-right、margin-bottom、margin-left
1.使用margin:0 auto;水平居中。盒子必须要有明确的width。
2.只有处于标准文档流下的盒子才能使用margin:0 auto; 当一个盒子浮动了，固定定位，绝对定位，
即脱离了标准文档流，那么将不再起作用
3.margin：0 auto;居中盒子，而不是居中文本，文字水平居中使用text-align: center;
margin塌陷：两个前提：块级元素，垂直方向
兄弟元素之间的margin合并：
上面盒子的margin-bottom和下面盒子的margin-top塌陷，它们之间的间距等于margin-bottom和margin-top两者中的最大值。
解决方案：
方法1：将块级元素变成行内块元素（display：inline-block）
方法2：浮动（浮动元素是不会塌陷的）
方法3：只设置上面盒子的margin-bottom或只设置下面盒子的margin-top
父子元素之间的margin塌陷：父元素设置margin-top和父中第一个子元素设置的margin-top会塌陷
解决方案：
给父元素添加透明边框，至少添加border-top:1px solid transparent
给父元素添加padding-top:npx
给父元素添加overflow:hidden
给父元素添加position: absolute;
给父元素添加position: fixed;
给父元素添加display: inline-block;
border:设置盒子的边框
border:宽度 样式 颜色 （如：border:1px solid red;）如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。
可以通过border-top border-right border-bottom border-left给某个方向设置边框
border-top-width xxx
border在页面是占空间的
padding:
内边距，补白 定义内容与border之间的距离
应用：调整内容与border之间的间隙，可以通过设置padding来使内容垂直居中
注：不允许使用负值。
content:内容的宽度width和高度height
块级标签可以设置宽度和高度，行内标签不能设置宽度和高度
行内标签它的宽度由内容决定，高度由font-size决定
width和height可以设置百分比--基于父元素宽度的百分比宽度，块级元素默认为父级元素的100%。
background:
background-color:
常用的三种方式：
系统定义的颜色名（如：red）
HEX（十六进制，如#ff0000）
rgb()/rgba()（其中的a 表示Alpha 通道，规定了对象的不透明度。）
background-image:
1，默认在水平和垂直方向上平铺
2，如果空间不足，图片也会显示，只是显示不完整
3，url后面的路径引号可加可不加
4，背景图片默认会填充border,padding,content
background-repeat:规定如何重复背景图像（repeat、repeat-x、repeat-y、no-repeat）
background-position:规定背景图像的位置
1. 可以通过关键字（top、center、bottom）进行设置，如果仅指定一个关键字，其他值将会是"center"
2. 也可以通过百分比进行设置，第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。
如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
3. x y：表示使用长度值定位，是将背景图像的左上角，放置在对象的背景区域中（x, y）所指定的位置，
即 x, y 定义的是背景图像的左上角，相对于背景区域左上角的偏移量。
在CSS3中，background-position属性支持 4 个参数值，前两个值用于横坐标，后两个值用于纵坐标。
这意味着我们可以相对于上左下右任意一个角落定位，而不是之前只能相对于左上角定位。
可以用长度值、或百分比来指定背景图像的起始位置。
background-attactment:规定背景图像是否固定或者随着页面的其余部分滚动
scroll 默认值，背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
