一、css优先级
1.权重越大优先级越高，优先显示谁的样式
2.* 0 div：1 class：10 id：100
3.行间样式优先级大于id 1000
4.！important：优先级大于行间
5.权重相同，后写的会覆盖先写的
6.复合选择器的优先级等于所有单一选择器权重相加
7.子元素继承父元素的优先级为0，自己设置会覆盖继承的样式
8.css样式引入：
1.行间样式大于内部、外链
2.内部和外链就近原则
二、css层叠性
概念：当样式声明发生冲突时，用户代理需要确认样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序，这个过程就叫层叠
当一个标签样式发生冲突的时候，要决定显示那个样式：
1.样式不冲突
多个样式同时作用于标签（同时应用于元 素）
2.样式冲突
同级选择器
不同级选择器，由选择器优先级决定
三、css长度单位
1.px 固定单位
width: 200px;
height: 200px;
background-color: coral;
2.em 相对单位：父元素的font-size 不设置：1em =16px
width: 10em;
height: 11em;
3.百分比 相对单位 父元素大小
/* 400*80%=320px */
width: 80%;
/* 400*40%=160px*/
height: 40%;
4.rem 相对单位 相对于html的font-size 不设置：1rem=16px
width: 2rem;
height: 4rem;
四、图片居中
.wrap{
/* 给父元素设置水平居中 */
text-align: center;
}
.wrap img{
/* 转块级标签，设置margin */
margin: 50px auto;
display: block;
}
五、css浮动
1.浮动的概念
浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】
2.文档流：标准流
文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示
标签刚一行显示就一行显示，该一行显示一个就一行显示一个
p--正常独立成行
a--水平布局
左浮动
右浮动
六、浮动的特性
1.浮动元素脱离正常标准流不脱离文本流，也就是元素浮动之后不占位
2.提升层级
3.子元素设置浮动后会导致父元素高度塌陷，父元素高度为0
4.子元素的宽度之和大于父元素的宽度会自动折行
5.可以使行级标签支持宽高
注意：任何标签都可以设置浮动，元素设置浮动后，不在区分标签的分类了，都类似于行内块标签（可以设置宽高，具有盒模型特性），但是没有行内块标签的空格和换行会被解析
谁需要在一行显示或者谁需要设置浮动就设置到谁的身上
七、为什么要清浮动
子元素设置浮动后，脱离正常标准流，不占位，会导致父元素高度塌陷
导致父元素的背景颜色无法显示背景、边框无法正常显示
会影响后续布局
八、清除浮动方法
1.给父元素设置固定高度
优缺点：不够灵活，适用于高度固定的布局中
2.给父元素设置overflow属性
hidden
auto
scroll
优缺点：可能会隐藏内容或触发不需要的滚动条；代码简洁
3.给父元素设置浮动 不用，了解即可
优缺点：会产生新的浮动问题
4.在浮动元素之后，与浮动元素呈并列关系的位置，加一个不浮动块元素（空的div标签（div本身不浮动，没有尺寸）），在空的div标签上加上属性：clear：both；
优缺点：代码冗余，通俗易懂，书写方便
clear：left；清除左侧浮动带来的影响
clear:right; 清除右侧浮动带来的影响
clear:both; 清除两侧浮动带来的影响
5.推荐方式：用伪元素清除浮动，给浮动元素的父级盒加类名.clearfix,并在.clearfix中添加样式:
.clearfix::after{
content:'';
display:block;
clear:both;
}
优缺点：不会再结构上产生冗余代码，可以重复使用，语义结构化正确
九、css伪元素
1.什么是伪元素
用css语言创造出来的标签
伪元素创造的标签是行级标签
2.如何创造伪元素
element::before{ content:"伪元素的文本内容"；属性名：属性值；}
element元素内部，内容之前，添加"伪元素的文本内容"
element::after{content:"伪元素的文本内容"；属性名：属性值；}
element元素内部，内容之后，添加“伪元素”