CSS 选择器的特异度
CSS选择器的特异度是一种用于确定在应用冲突规则时选择器的优先级的方法。它是根据选择器中包含的不同元素进行计算的。
内联样式>ID 选择器>类、伪类和属性选择器>元素选择器和伪元素选择器
例子
CSS 继承
类似Java继承,子标签的CSS样式,没有设置的情况下,获取父标签的元素
- 文本相关的属性,如
color、font-family、font-size、line-height等。- 元素间隙相关的属性,如
margin、padding等。- 部分列表相关的属性,如
list-style-type、list-style-image等。
当然有些元素属性是无法继承的
- 盒模型相关的属性,如
width、height、border等。- 定位和布局相关的属性,如
position、top、left等。- 背景相关的属性,如
background-color、background-image等。
但是能通过方法来解决
显式继承 inherit
inherit 关键字只适用于可继承的属性。对于不可继承的属性,使用 inherit 将没有任何效果。在这种情况下,可以使用 initial 关键字将属性值重置为其初始值。
.parent {
width: 200px;
}
.child {
width: initial;
}
CSS 求值过程解析
CSS 布局方式及相关技术
布局是为了确认内容的大小和位置的算法。
display属性
- block
- inline
- inline-block
- none
盒模型
- margin 外边距
- border 边框
- padding 内边距
- width 宽度
- height 高度
常规流
行级块级
FlexBox

Grid布局(二维网格)
浮动(float)
left,right让块级,行级靠左右排序,比较死板,不太用。
绝对定位(position)
- 静态定位(static)默认
- 相对定位(relative)父元素
- 绝对定位(absolute)子元素
- 固定定位(fixed)顾名思义,固定在浏览器窗口的位置。