一、CSS3常用选择器、优先级及权重
1、选择器：
标签、类、ID、全局、组合、后代、兄弟、伪类、伪元素选择器
2、优先级:
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
3、权重计算：
-
第一等：代表内联样式，如：style = '' ,权值为1000
-
第二等：代表ID选择器，如：#content ,权值为0100
-
第三等：代表类、伪类、属性选择器，如：.content 权值0010
-
第四等：代表标签选择器和伪元素选择器，如div、p ，权值0001
-
通配符、子选择器、相邻选择器。如<、>、+ 权值为0000
-
继承样式无权值、!important 最高权值
4、结构伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E:last-child | 选择父元素的倒数第一个子元素E |
| E:nth-child(n) | 选择父元素的第n个子元素 |
| E:nth-last-child(n) | 选择父元素的倒数第n个元素E,须满足倒数第n个元素以及为E标签，否则无效 |
| E:first-of-type | 选择满足条件下的同种标签的第一个元素 |
| E:last-of-type | 选择满足条件下的同种标签的最后一个元素 |
| E:nth-of-type(n) | 选择满足条件下的同种标签的第n个元素 |
二、盒子模型的组成部分
html的每个元素都可以理解成是一个盒子，包含内容有margin、border、padding、content4个属性。
两种常见的盒子的模型
1、W3C标准盒子
标准盒子模型=content(内容)+border(边框)+padding(内边距)+margin（外边距）。
2、IE怪异盒子模型
怪异盒子模型=content(内容)(已经包含了 padding 和 border)。
3、设置盒子类型
css3 中可以通过设置 box-sizing 属性来完成标准或许怪异盒子模型之间的切换：
怪异盒子模型:box-sizing: content-box（默认类型）;标准盒子模型:box-sizing: border-box
拓展知识点margin属性：
-
行内元素是没有上下外边距的，只有左右外边距，所以尽量不要设置行内元素的内外上下边距，设计宽高也是无效的。
-
两个相邻的块级元素一个设置了margin-bottom、另一个设置margin-top的时候，会发生外边距塌陷。两个元素之间的margin值会合并，margin值最终取较大值。
-
嵌套块元素垂直边距合并，当父级元素没有设置border、padding的情况下，父子元素的margin边距会合并，其取值为较大值。
三、position（定位）
| 属性 | 描述 |
|---|---|
| static | 默认值，没有定位，处于正常文本流中（会忽略top、bottom、left、z-index的声明） |
| relative | 相对定位，相对于其本身正常位置进行定位（自恋型）。元素文本流保留在原位置不变（可通过z-index改变层级）、不影响元素属性 |
| absolute | 绝对定位，相对与static定位以外的第一个父级元素进行定位（如果没有，则以body进行定位），元素脱离文本流 （改变z-index层级）、会使得内联元素支持宽高设置 |
| fixed | 固定定位，相对于浏览器窗口进行定位。在元素处于自身所在浏览器窗口时，与relative特性一致，当超出自身所在浏览器窗口，则于position特性一致 |
| inherit | 默认继承父级的定位属性 |
常用定位口诀：子绝父相（原理）
四、css3的弹性布局
1、概述：
弹性布局是css3的新属性，是一种当页面需要去适应不同类型和屏幕大小时确保元素能够具有恰当行为的布局。作用是能够提供一个有效的帮助我们管理一个容器中子元素的排列、对齐和分配空白空间。
2、弹性布局——父元素属性：
-
flex-direction 设置主轴 ：row （默认值）/ row-reserve / column / column-reserve
-
flex-wrap 超出是否换行 : nowrap（默认值） / wrap / wrap-reserve
-
align-items 设置侧轴上的子元素排列方式(单行有效) :
-
flex-start 从头部开始 / flex-end 从尾部开始 / center 居中显示 / stretch 拉伸
-
justify-content 设置主轴上子元素的排列方式：
flex-start 默认值 从头部开始 如果主轴是x轴 则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐(如果主轴是x轴,则水平居中)
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间(重要)
-
align-content 设置侧轴上的子元素的排列方式（多行有效）：
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴 先两边贴边 再平分剩余空间(重要)
stretch 设置子项元素高度平分父元素高度
注：设置侧轴子元素排列方式——单行找align-items，多行找align-content
3、flex布局——子项常见属性
-
flex：子项目占的份数
-
align-self：控制项自己在侧轴的排列方式
-
order：属性定义子项的排列顺序(前后顺序)
四、BFC
1、概述：
BFC是指块级格式化上下文，决定了元素如何对其内容进行定位、以及与其他元素的关系和相互作用。可以用来解决子元素浮动，父元素的高度没有了、两栏布局右栏不自适应、垂直方向上两元素边距有误等情况。
2、触发情况
-
float不为none
-
position不为relative或者static
-
overflow为auto 、scroll或者hidden
-
display为inline-block
3、触发后作用
-
解决浮动·子元素导致父元素塌陷
-
实现两栏自适应的问题
-
外边距垂直方向重合的问题
注：都是利用触发BFC，使得元素有自己独立空间
4、清除浮动
-
父元素设置属性为：overflow:hidden (实质是触发BFC)
-
父元素中增加一个新的元素，添加属性 clear:both
-
父元素增加伪类 ::after，设置
{ content:"",clear:both}
五、实现元素水平垂直居中
1、未知元素宽高：
方法（1）利用弹性布局
.parent {
display: flex;
justify-content: center;
align-items: center;
}方法（2）利用绝对定位
.child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}方法（3）利用transform属性+绝对定位
.child {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%); //根据自身元素
}2、已知宽高实现水平垂直居中
方法（1）：使用line-height与height相同、以及text-align:center
方法（2）：使用绝对定位+margin负值偏移
六、box-shadow盒子阴影
box-shadow：offset-x offset-y blur spread color position
//从左到右表示：x轴偏移量、y轴偏移量、阴影的模糊半径、阴影扩展半径、颜色、阴影位置（默认外阴影，设为inset则表示内阴影）七、css常见可继承属性
1、字体系列：
-
font-family
-
font-size
-
font-style
2、文本系列属性
1、text-indent:文本缩进
2、text-align:文本水平对齐
3、line-height:行高
3、元素可见性
1、visibility:控制元素的显示隐藏
4、列表布局属性
1、list-style:列表风格