15. CSS其它知识点
【概念】
1. 继承
-
为一个元素设置的样式同时也会应用到它的后代元素上，这种特性称之为样式的继承
继承发生在祖先和后代之间，利用继承可以将一些通用的样式统一设置到共同的祖先元素上
-
并不是所有的样式都会被继承，如背景样式，布局样式等都不会被继承
2. 选择器权重
-
当通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时便发生了样式的冲突。此时就需要根据"选择器权重"判断使用哪个样式
选择器种类 权重 内联样式 1000 id选择器 100 类和伪类选择器 10 元素选择器 1 通配选择器 0 继承的样式 没有优先级 -
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后显示优先级高的
选择器的累加不会超过其最大的数量级，如类选择器的优先级再高也不会比id选择器高
如果优先级计算后相同，则此时优先使用靠下的样式
3. 长度单位
-
像素：不同屏幕的像素大小不同，像素越小越高清的屏幕显示的效果越清晰
-
百分比：设定百分比可以使子元素跟随父元素的改变而改变
-
em：em是相对于元素的字体大小来计算的(1em = 1font-size)，em的大小随字体大小改变
-
rem：rem是相对于根元素的字体大小来计算
4. 外边距的折叠
-
相邻的垂直方向外边距会发生重叠现象
-
兄弟元素：兄弟元素间的相邻垂直外边距会取两者之间的较大值（无需处理）
父子元素：父子元素相邻外边距，子元素的外边距会传递给父元素（需要处理）
5. 简写属性中的上下左右
-
本质是按顺时针方向设置的
-
一个值：上下左右
-
两个值：上下 左右
-
三个值：上 左右 下
-
四个值：上 右 下 左
-
【属性】
1. display和visibility
-
display用来设置元素的显示类型
-
inline将元素设置为行内元素 -
block将元素设置为块元素 -
inline-block将元素设置为行内块元素，既可以设置宽度和高度又不会独占一行 -
table将元素设置为一个表格 -
none元素不在页面中显示
-
-
visibility用来设置元素的显示状态
visible默认值，元素在页面中正常显示hidden元素在页面中隐藏不显示，但是依然占据页面的位置
2. box-sizing
- box-sizing用来设置盒子尺寸的计算方式。盒子的可见框大小由内容区，内边距和边框共同决定
- 语法：
box-sizing: content-box：width和height用来设置内容区的大小box-sizing: border-box：width和height用来设置整个盒子可见框的大小
3. 轮廓，阴影和圆角
3.1 轮廓
- 用来设置元素的轮廓线，用法和border类似，但轮廓不会影响到可见框的大小
- 语法：
outline: [粗度] [颜色] [样式]
3.2 阴影
- 用来设置元素的阴影效果，阴影效果不会影响页面布局
- 语法：
box-shadow: [水平偏移量] [垂直偏移量] [阴影的模糊半径] [阴影的颜色]
3.3 圆角
- 用来设置圆角
- 语法：
- 设定圆角：
border-radius: [px/%] - 设定指定圆角：
border-(top-left/top-right/bottom-left/bottom-right)-radius: [px/%]
- 设定圆角：
4. 元素层级
- 对于开启了定位的元素，可以通过z-index属性来指定元素的层级
- z-index值越大，元素的层级越高，元素越优先显示
- 若层级一样，则优先显示靠下的元素
- 祖先元素的层级再高也无法覆盖后代元素
5. 行高
-
行高是指文字占有的实际高度，它会在字体框的上下平均分配
-
可以通过line-height来设置行高。行高可以指定一个具体大小（px em）
也可以直接为行高设置一个整数，行高将会是字体的指定的倍数
-
行高还经常用来设置文字的行间距，行间距=行高-字体大小
-
可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中
6. 文本的水平和垂直对齐
text-align设置文本的水平对齐方式text-align:left左侧对齐text-align:right右侧对齐text-align:center居中对齐text-align:justify两端对齐
vertical-align设置文本的垂直对齐方式vertical-align:baseline默认值，基线对齐vertical-align:top顶部对齐vertical-align:bottom底部对齐vertical-align:middle居中对齐
7. 文本修饰
text-decoration设置文本修饰text-decoration:none什么都没有text-decoration:underline下划线text-decoration:line-through删除线text-decoration:overline上划线