一、列表(list-style)
1.列表的特定样式
list-style有三个属性，这三个属性可以在<ul>或<ol>元素上面设置：
1.1 list-style-type: 设置列表的项目符号类型，例：无序列表的方形或者圆形符号，有序列表的数字，字母，或者罗马数字。
1.2 list-style-position：设置符号是在列表内还是列表外。
1.3 list-style-image ：设置项目符号为自定义图片
1.1 list-style-type:符号样式取值
/*去掉默认的符号，常用*/
ul, ol {
list-style-type: none;
}
/*列表实心圆点（默认）*/
ul {
list-style-type: disc;
}
/*无序列表空心圆点*/
ul {
list-style-type: circle;
}
/*无序列表实心方块*/
ul {
list-style-type: square;
}
/*有序列表十进制从1开始的阿拉伯数字，*/
ol {
list-style-type: decimal;
}
1.2 list-style-position：项目位置
/*符号是在外面*/
ul {
list-style-position: outiside;
}
/*符号是在块盒内的第一个行内盒，在元素内容流后面*/
ul {
list-style-position: inside;
}
1.3 list-style-image ：设置自定义的项目符号图片
/*可以用图形符号*/
ul {
list-style-image: url(https://i.loli.net/2019/11/08/4vriKTQR6sXnFBW.png);
}
这3个属性可以用单独的list-style来设置。属性值可以任意顺序排列，例如：
ul {
list-style-type: circle;
list-stye-position: inside;
list-style-image: url(example.png);
可简写：
ul {
list-style: circle inside url(example.png);
二、背景(background)
注意：默认情况下，背景区域覆盖内容+内边距+边框
1. background的常用样式：
1.1 background-color:设置背景颜色
1.2 background-image:设置背景图片
1.3 background-position: 设置背景图片的位置
1.4 background-repeat: 设置背景图片的重复值
1.5 background-size: 设置背景图片的大小，IE9以下不支持。
1.6 background-clip: 设置元素背景区域覆盖范围
1.7 background-attachment: 设置背景元素是否随元素滚动二产生动态。
背景样式常用值
1.1 background-color:
①英文名：red；②十六进制颜色：#000; ③rgba(0,0,0,0);
1.2 background-image:
- 普通的背景图片
background-image: url(图片地址); - 渐变背景
background-image: linear-gradient(颜色, 颜色);
渐变背景
1.3 background-position:
①数值偏移量(单位：px): x y; ②百分比偏移量：x% y%; ③横坐标和纵坐标的固定值：[top |center |bottom ] [left |center |right ];
1.4 background-repeat:
①不重复：no-repeat;②X轴重复：repeat-x; ③Y轴重复：repeat-y; ④XY轴都重复：repeat;
1.5 background-size(css3属性)：主要是设置背景图片的尺寸，IE9以下不支持。如果设置了background-attachment: fixed;会使background-size失效。
-
语法
①：cover: 缩放背景图片宽度或者高度完全覆盖背景区；容器和背景图片大小不同时，会被裁剪可能背景图片会看不见。
②：contain: 调整背景图片宽度和高度完全装入背景区，可能背景区部分空白。
③：设定指定宽度和高度，图片可能会失真。
PS：在no-repeat和repeat情况下，cover和contain的区别：
-
no-repeat情况下：
①：cover铺满整个容器，图片多出来部分会被裁掉。
②：contain缩放背景图片完全装入背景区，可能背景区域会部分空白；
no-repeat情况下，cover与contain区别
-
repeat情况下：
①：cover铺满整个容器，图片多出来部分会被裁掉。
②：contain容器至少有一张完整的图，留白区域则平铺背景图，铺不下再裁掉。
repeat情况下，cover与contain区别
PS：contain和cover都会保持背景图片的宽高比，直接写宽高图片有可能会失真。
1.6 background-clip: 设置元素背景区域福覆盖范围
-
border-box: 覆盖至边框最外围 -
padding-box: 覆盖至内边距最外围 -
content-box: 仅覆盖元素内容区域
PS：background样式简写
- 属性合并简写
.box {
background: #ccc url(images/bg.png) center no-repeat;
}
- 多重背景
.box {
background: #ccc url(images/bg.png) center no-repeat,#ccc url(images/bg2.png) 20px 20px no-repeat;
三、边框border
1. border有四个属性值，分别对应一个盒子的四条边，分别是上右下左，如图：
//边框的四个基本值
.box {
border-top: 1px;
border-right: 1px;
border-bottom: 1px;
border-left: 1px;
}
2. boder三个常见属性
boder-width //边框粗度
boder-style //边框样式
boder-color //边框颜色
2.1 border-width: 边框粗度，通常用Npx固定单位直接表明，例：border-width: 1px;
2.2 boder-style: 边框样式，设定边框的样子，常用值：soild(默认实线)，dotted，dashed(虚线)
-
border-radius边框半径
-
设置圆角
边框圆角 -
实现圆形，宽高相等，
border-radius设置为宽高的一半以上
圆形 -
实现三角形
三角形 -
实现扇形或者半圆
image.png
四、行高(line-height)
-
定义一行文字占据的垂直空间
PS：文字占据的高度不是有font-size决定的，而是由line-height决定。
-
行高特性：
- 有继承性；
- 单位：①固定单位：px； ②相对单位(倍数)：2；③相对单位百分比：200%；
-
单行文字在元素中垂直居中
设置line-height与容器的高度一样就可以了
-
相对单位中的倍数和百分比的区别：
例: (line-height: 2;与line-height: 200%)
两者主要是区别是继承的计算方式区别；
-
line-height: 2;被继承的是倍数,是当前元素font-size的2倍,该倍数会继承给孩子会得到一个新的值；
继承body的line-height倍数，30px*2=60px line-height: 200%; 当前元素font-size的2倍，计算具体值，然后把具体值继承给孩子。
五、表格(table)
-
border-collapse设置表格边框是分开还是合并
-
collapse: 合并 -
separate: 分开
//表格合并应用代码
table {
border-collapse: collapse;
}
六、inline-block特性
1.特性
- 呈现inline元素的特性：不占据一整行，宽度由内容宽度决定；
- 同时呈现block元素的特性：可以对其设置宽高以及上下padding和margin；
- 多个并排显示时存在inline元素的缝隙问题
2.对齐方式
多个不同高度的inline-block元素并排显示时上下对齐的基线是文本内容的底线。
3. 缝隙问题产生的原因以及解决方案
产生的原因：
往前移动（TAB）、换行（LF）、换页（FF）、回车（CR）、SPACE都是空白字符
多个连续的空白字符会合并成一个空格，空格也占据一个字符的空间。
white-space属性可以修改合并的原则
-
解决方案
①：HTML标签连写，没有连写还是会有缝隙：
连写
②：设置父容器font-size: 0;，然后在设置inline-block的元素font-size
③：设置浮动，有可能导致父容器高度塌陷
④：设置负margin挤掉空格，但是会导致元素溢出父容器
七、vertical-align垂直对齐
-
用处
设置inline、inline-block、table-cell元素的垂直对齐方式 -
对齐方式
①、顶部对齐vertical-align: top;
顶部对齐
②、基线对齐vertical-align: baseline;
③、居中对齐vertical-align: middle;
④、底部对齐vertical-align: bottom;
参考：饥人谷课件
