CSS的元素显示模式、背景以及三大特性
CSS的元素显示模式
1.块元素
特点：独占一行，可设置宽、高、边距，宽度是父级的100%。
常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。
2.行内元素
特点：不独占一行，不可以设置宽、高、边距。
常见的行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>。其中只有<a>能放块级元素。
3.行内块元素
特点：不独占一行，可以设置宽、高、边距。
元素显示模式的转换
- 转换为块元素：display:block;
- 转换为行内元素：display:inline;
- 转换为行内块元素：display:inline-block;
CSS的背景
1.背景颜色：background-color 默认透明色 transparent
2.背景图片：background-image 便于控制位置
background-image: none | url(地址);
3.背景平铺：background-repeat: repeat/no-repeat/repeat-x横向 repeat-y纵向
4.背景图片位置：background-position: x y
（1）参数是方位名词
- x坐标和y坐标，都可以用方位名词（没有顺序差别）
- 如果只指定了一个方位名词，则第二个参数默认居中
（2）参数是精确单位
- 第一个参数是x坐标，第二个参数是y坐标
- 如果只指定一个数值，一定是x坐标，另一个默认垂直居中
（3）参数是混合单位
- 第一个参数为x轴，第二个参数为y轴
5.背景图像固定（背景附着）
background-attachment: scroll | fixed
6.背景复合写法
background: 颜色 图片地址 平铺 图像滚动 位置
7.背景色半透明
background: rgba(0,0,0,0.3);
最后一个参数是alpha透明度，取值范围在0~1之间。
CSS的三大特性
1.层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：
- 样式冲突：遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
- 样式不冲突：不会层叠。
2.继承性
子标签会继承父标签的某些样式，如文本颜色。
行高的继承性：font：12px/1.5 这个1.5为当前元素文字大小的1.5倍。
- 行高可以跟单位也可以不跟单位。
- 如果子元素没有设置行高，则会继承父元素的行高为1.5。
- 此时子元素的行高是：当前子元素的文字大小*1.5。
- 最大的优势就是里面子元素可以根据自己文字大小自动调整行高。
3.优先级
- 选择器相同，执行层叠性
- 选择器不同，根据权重优先级执行
选择器权重：
! important 无穷大
行内样式style=" " 1,0,0,0
id选择器 0,1.0,0
类/伪类选择器 0,0,1,0
标签/元素选择器 0,0,0,1
继承或 * 0,0,0,0
a链接默认指定了样式，不会继承父级。
权重叠加：如果是复合选择器，则会权重叠加，需要计算。
权重只会叠加，不会进位。
