今天我们再来总结一下列表样式，背景样式，边框样式和表格样式。
因为今天每一个部分的内容不是很多，所以就尽可能详细的讲一讲吧。
列表样式
list style(简写属性)
list-style可以按以下顺序设置属性：
- list-style-type
- list-style-position
- list-style-image
可以不设置某个属性，它将应用默认值。
| 值 | 描述 |
|---|---|
| list-style-type | 设置列表标记的类型。 |
| list-style-position | 设置在何处放置列表项标记。 |
| list-style-image | 使用图像来替换列表项的标记。 |
| inherit | 设置从父元素继承列表标记的属性值。 |
它的三个默认值分别为 disc outside none。
在之前，我们说过，list-style会设置相对应与type属性的标头样式 https://www.jianshu.com/p/1de6a4d807b5
position则是标头位置，image则为用图片替换。
list-style-type
| 值 | 描述 |
|---|---|
| none | 无标记 |
| disc | 默认值。实心圆 |
| circle | 空心圆 |
| square | 实心方块 |
| decimal | 数字 |
| decimal-leading-zero | 0开头的数字 |
| lower-roman | 小写罗马数字 |
| upper-roman | 大写罗马数字 |
| lower-alpha | 小写英文字母 |
| upper-alpha | 大写英文字母 |
| lower-greek | 小写希腊字母，α，β，γ…… |
| low-latin | 小写拉丁字母（a,b,c,d,e) |
| upper-latin | 大写拉丁字母（A,B,C,D,E) |
| hebrew | 传统希伯来编号方式 |
| armenian | 传统亚美尼亚编号方式 |
| georgian | 传统乔治亚编号方式（an，ban，gan……） |
| cjk-ideographic | 简单表意数字 |
| hiragana | 日文片假名 a, i, u, e, o, ka, ki等 |
| katakana | 日文片假名，大写。A, I, U, E, O, KA, KI等 |
| hiragana-iroha | i, ro, ha, ni, ho, he, to等 |
| katakana-iroha | I, RO, HA, NI, HO, HE, TO, 等。 |
后面的基本不会怎么用，用的时候查一查就好了。。记也记不住。。。
总而言之，list-style-type就是规定你的列表标头标号的样式的。
list-style-position
| 值 | 描述 |
|---|---|
| inside | 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 |
| outside | 默认值，保持标记于左侧。 |
| inherit | 从父元素继承position的属性值。 |
在这里可以看inside和outside的具体区别
https://www.w3school.com.cn/tiy/t.asp?f=csse_list-style-position
list-style-image
| 值 | 描述 |
|---|---|
| URL | 图像的路径 |
| none | 默认，无图形显示 |
| inherit | 从父元素继承image的属性值。 |
背景样式
background-color
这个属性用来设置元素的背景颜色
| 值 | 描述 |
|---|---|
| color_name | 颜色名称来定义背景颜色（red，yellow，blue） |
| hex_number | 十六进制值来定义背景颜色（#FFFFFF,#000000,#333） |
| rgb_number | 使用rgb或rgba函数来定义颜色。 |
| transparent | 透明 |
| inherit | 从父元素继承背景颜色属性值。 |
范围：background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。
background-image
background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
背景图像默认位于元素的左上角，并在水平和垂直方向上重复。
| 值 | 描述 |
|---|---|
| url | 图像的路径 |
| none | 默认值，不显示背景图像 |
| inherit | 从父元素继承背景图像属性值。 |
background-position
正如上面所说，要想修改背景图像的默认位置，就要用到background-position。background-position 属性设置背景图像的起始位置。
| 值 | 描述 |
|---|---|
| top left,top center,top right,center left,center center,center right,bottom left,bottom center,bottom right | 起始位置，如果没有规定第二个关键词，默认为center。 |
| x% y% | 第一个是水平位置，第二个是垂直位置。左上角是0% 0%，右下角是100% 100%。 |
| xpos ypos | 以像素来定位，左上角是0 0。 |
当没有设置background-repeat为no-repeat时，将从background-position定义的位置开始重复。
background-repeat
background-repeat 属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。
| 值 | 描述 |
|---|---|
| repeat | 默认值，在水平和垂直方向上都重复 |
| repeat-x | 在水平方向重复 |
| repeat-y | 在垂直方向重复 |
| no-repeat | 不重复，背景图像只显示一次 |
| inherit | 从父元素继承该属性值 |
background-size
background-size 属性规定背景图像的尺寸。
| 值 | 描述 |
|---|---|
| length | 设置图像的高度和宽度，第一个值设置宽度，第二个值设置高度。若只设置一个值，第二个值会被设置为auto |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。若只设置一个值，第二个值会被设置为auto |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
好好利用这几个属性，可以做出不同的背景效果。
边框样式
border，一个神奇的东西，它相当于相片周围的相框。所以它不会覆盖背景的内容。
border-width
border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值
| 值 | 描述 |
|---|---|
| thin | 定义细的边框 |
| medium | 默认，定义中等的边框 |
| thick | 定义粗的边框 |
| length | 自定义边框宽度 |
| inherit | 从父元素继承边框宽度属性。 |
当我们使用length来规定边框宽度时，是按上，右，下，左来简写设置的，当然在这个过程中你也可以使用thin，medium，thick来规定某边的宽度。
border-width: 5px 10px 15px thick;
这样写也是可以的。含义就是对上，右，下，左边框分别设置5px，10px，15px，粗边框宽度。
border-style
设置 4 个边框的样式，同样也是简写属性。按上，右，下，左来应用。
| 值 | 描述 |
|---|---|
| none | 无边框 |
| hidden | 和none相同，但应用于表时可以用来解决边框冲突。 |
| dotted | 定义点状边框，在大多数浏览器中呈现为实线 |
| dashed | 定义虚线，在大多数浏览器中呈现为实线 |
| solid | 定义实线 |
| double | 定义双线，双线的宽度等于border-width的值。 |
| groove | 定义3D凹槽边框，效果取决于border-color的值 |
| ridge | 定义3D垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义3Dinset边框，效果取决于border-color的值 |
| outset | 定义3Doutset边框，效果取决于border-color的值 |
| inherit | 从父元素继承该属性值。 |
具体的样式可以在这里看https://www.w3school.com.cn/tiy/t.asp?f=csse_border-style
不要把顺序搞错了就好。也可以单独设置某边的样式。
border-color
border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。同样是简写属性，顺序也相同。
| 值 | 描述 |
|---|---|
| color_name | 颜色名称来定义背景颜色（red，yellow，blue） |
| hex_number | 十六进制值来定义背景颜色（#FFFFFF,#000000,#333） |
| rgb_number | 使用rgb或rgba函数来定义颜色。 |
| transparent | 透明 |
| inherit | 从父元素继承背景颜色属性值。 |
表格样式
表格样式中比较重要的两个是border-collapse和table-layout
border-collapse
为表格设置合并边框模型
| 值 | 描述 |
|---|---|
| separate | 默认值，边框会被分开。不会忽略border-spacing和empty-cells属性 |
| collapse | 如果可能，边框会合并为一个单一的边框，会忽略border-spacing和empty-cells属性 |
| inherit | 从父元素继承该属性值。 |
简单来说，当应用separate时，表格的边框会更明显，每个格子都会应用单独的边框，不会有重合，当应用collapse时，上下两个表格会共用中间的那条线，边上的表格也会和表格边合并。
table-layout
tableLayout 属性用来显示表格单元格、行、列的算法规则
| 值 | 描述 |
|---|---|
| automatic | 默认，列宽度由单元格内容设定 |
| fixed | 列宽由表格宽度和列宽度设定 |
| inherit | 从父元素继承该属性值。 |
这个简单来说就是设定列宽度是否会根据内容拓宽，如果设定fixed，内容可能会溢出表格。
