选择器

选择器	示例	优先级
类型选择器	h1 { }	0001
通配选择器	* { }	-
类选择器	.box { }	0010
ID 选择器	#unique { }	0100
标签属性选择器	a[title] { }	0001
伪类选择器	p:first-child { }	0001
伪元素选择器	p::first-line { }	0001
后代选择器	article p	-
子代选择器	article > p	-
相邻兄弟选择器	h1 + p	-
通用兄弟选择器	h1 ~ p	-

其他	示例	优先级
内联样式	style={}	1000
!important	1px !important;	最高特殊优先级

优先级

优先级计算不允许进行进位
优先级相同后加载的样式覆盖之前的
含有!important优先级最高当都存在!important根据之前规则判断优先级

继承

inherit 继承父元素
initial 浏览器默认样式
unset 样式可以继承则基础不可基础使用浏览器样式
revert 有用户自定义样式使用用户没有使用浏览器默认

all 样式字段值为继承值例子：

a {
    color:#fff;
}
div {
     color:#000;
}
/* div 中的 a标签将会变是黑色 */
div > a {
    all:inherit
}

字体

@font-face {
    /* 声明字体名称 */
    font-family: 'my'; 
    /* 字体源 format添加时能更快的找到字体 */
    src:url('webfont.eot') format('embedded-opentype'),
    url('webfont.woff')format('woff')
}

响应式

多栏布局、伸缩盒和网格
媒体查询
视口元标签 <meta name="viewport" content="width=device-width,initial-scale=1">
- initial-scale：设定了页面的初始缩放，我们设定为 1。
- height：特别为视口设定一个高度。
- minimum-scale：设定最小缩放级别。
- maximum-scale：设定最大缩放级别。
- user-scalable：如果设为no的话阻止缩放。

媒体查询

媒体类型

all
print 打印时
screen 屏幕
speech

块级元素

margin 边距折叠 相邻块级元素(兄弟或父子节点)或空元素的下边距取绝对值大的左右与行内相同
默认宽度为100%，高度与内容一致。可设置高度设置宽高

行内元素

margin 无上下边距负值相加
根据内容自动获取

Block Format Context 块级格式化上下文

生成新的块级盒子的布局排除浮动阻止编剧重叠

创建块格式化上下文：

根元素<html>
浮动元素 float 值不为 none
绝对定位元素 absolute 或 fixed
display 为inline-block table相关 flex grid flow-root
overflow 不为 visible、clip 的块元素
多列容器 column-count 或 column-width 值不为 auto,column-span为all
contain 值为 layout、content 或 paint

css

选择器

优先级

继承

字体

响应式

媒体查询

媒体类型

块级元素

行内元素

Block Format Context 块级格式化上下文