一、列表(list-style)

1.列表的特定样式

list-style有三个属性，这三个属性可以在

• 或

1. 元素上面设置：

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(虚线)

boder样式

border-radius边框半径

设置圆角

边框圆角

实现圆形，宽高相等，border-radius设置为宽高的一半以上

圆形

实现三角形

三角形

实现扇形或者半圆

image.png

四、行高(line-height)

定义一行文字占据的垂直空间

PS：文字占据的高度不是有font-size决定的，而是由line-height决定。

行高特性：

有继承性；

单位：①固定单位：px； ②相对单位(倍数)：2；③相对单位百分比：200%；

单行文字在元素中垂直居中

设置line-height与容器的高度一样就可以了

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倍，计算具体值，然后把具体值继承给孩子。

body里先计算好具体值，20px*200%=40px，在赋值给p，所以是40px。

五、表格(table)

border-collapse设置表格边框是分开还是合并

collapse: 合并

separate: 分开

//表格合并应用代码

table {

border-collapse: collapse;

}

简单的表格

六、inline-block特性

1.特性

呈现inline元素的特性：不占据一整行，宽度由内容宽度决定；

同时呈现block元素的特性：可以对其设置宽高以及上下padding和margin；

多个并排显示时存在inline元素的缝隙问题

inline-block缝隙问题

2.对齐方式

多个不同高度的inline-block元素并排显示时上下对齐的基线是文本内容的底线。

对齐方式

3. 缝隙问题产生的原因以及解决方案

产生的原因：

往前移动(TAB)、换行(LF)、换页(FF)、回车(CR)、SPACE都是空白字符

多个连续的空白字符会合并成一个空格，空格也占据一个字符的空间。

white-space属性可以修改合并的原则

解决方案

①：HTML标签连写，没有连写还是会有缝隙：

连写

②：设置父容器font-size: 0;，然后在设置inline-block的元素font-size

设置父容器font-size为0

③：设置浮动，有可能导致父容器高度塌陷

设置浮动

④：设置负margin挤掉空格，但是会导致元素溢出父容器

负margin

七、vertical-align垂直对齐

用处

设置inline、inline-block、table-cell元素的垂直对齐方式

对齐方式

①、顶部对齐 vertical-align: top;

顶部对齐

②、基线对齐vertical-align: baseline;

基线对齐

③、居中对齐vertical-align: middle;

居中对齐

④、底部对齐vertical-align: bottom;

底部对齐

参考：饥人谷课件