盒子模型
简介：所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
具体属性：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
宽高设置：
宽高属性适用块元素和替换元素
max-height(width)和min-height(width)有兼容问题ie不支持
边框属性：
1、边框三要素：粗细、线性样式、颜色
注意：
如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。
border-style:
none;默认值，没有边框
solid；实线
dotted；点状边框
double；双线
padding属性：（数值不能为负值）
就是内边距的意思，它是边框到内容之间的距离
可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值
外边距（margin）：
1、外边距可以让块级盒子水平居中，但必须满足以下两个条件：
（1）盒子必须指定了宽度
（2）盒子左右的外边距必须都设置为auto，以下三种都可以：
margin-left:auto; margin-right:auto;
margin:auto;
margin:0 auto;
2、当上下相领的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距取两个值中的较大者。
解决方案：尽量只给一个盒子添加margin值。
3、嵌套块元素垂直外边距的塌陷
定义：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
4、行内元素和行内块元素水平居中的方法是：给其父元素添加 text-align:center
总结：
盒子的大小 = content + border + padding + margin
盒子的可见框宽度=border-left-width + padding-left + width + padding-right + border-right-width
盒子的可见框高度=border-top-width + padding-top + height + padding-bottom + border-bottom-width
display属性：
none;此元素不会被显示
block；此元素显示为块级元素，此元素前后会带有换行符
inline；默认此元素会被显示为内联元素，元素前后没有换行符
inline-block;行内块元素，元素呈现为inline，具有block相应特性
样式继承关系：
padding 不继承
margin 不继承
birder 不继承
CSS背景和列表
1、背景样式；
background-color 设置元素的背景颜色
background-image 把图像设置为背景颜色
background-position 设置背景图像的起始位置
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
background-repeat 设置背景图像是否重复及如何重复
background 简写属性，用作是将背景属性设置在一个声明中
常见属性用法：
background-color:transparent
transparent表示全透明黑色的速记法类似rgba（0,0,0,0）这样的值
且背景区包括内容，内边距（padding）和边框、不包含外边距（margin）
background-image
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
默认的，背景图片位于元素的左上角，并在水平和追至方向上重复
background-repeat
常见的属性值：
repeat重复
no-repeat不重复
repeat-x水平重复
repeat-y垂直重复
background-attachment：scroll | fixed
说明：
scroll默认值，背景图片随滚动条滚动
fixed当页面其余部分滚动时，背景图片不会滚动
background-position：百分比|值也可以写top right 。。。。。
背景缩写；
语法：
各值之间用空格分割，不分先后顺序
2、列表样式
list-style-type 设置列表项标志的类型
list-style-image 将图像设置为列表项标志
list-style-position设置表中的列表项的标志位置
list-style简写属性。用于把所有的列表的属性设置于一个声明中
list-style-position：inside | outside
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
outside：默认值，列表向目标记放置在文本以外，且环绕文本不根据标记对齐
列表样式缩写：
值之间用空格分隔
顺序不固定
注意：
list-style-image会覆盖list-style-type的设置