CSS选择器及其优先级
- !important声明的样式的优先级最高
- 内联样式：1000
- id 选择器 100
- 如果优先级相同，则最后出现的样式生效；
- 继承出来的样式优先级最低；
em\px\rem\vw区别
- px：绝对单位
- em：相对单位，相对当前元素的字体大小
<html style='font-size:10px'> //设置<html>字体10px
<div class='div1' style='font-size:2em'> //div1字体为20px
<div class='div2' style='padding:1.5em;font-size:30px'>
</div>//div2 padding为45px
</div>
</html>网上很多资料说em的是相对于父级的font-size，其实是错误的，因为font-size的大小是可以继承的。
div2元素自己有font-size 所以padding 为30* 1.5 = 45px，可见em跟父级的字体大小没关系；父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。
- rem：相对单位，相对于根节点html的字体大小
- vw:天生就是随着屏幕的宽度变化而变化
css几种定位方式？
- static：静态定位（默认值)，正常文档流定位，不脱离文档流
- relative：相对定位，即元素相对于自身的位置进行定位，不脱离文档流
- absolute：绝对定位，相对于 static 定位以外的第一个父元素进行定位，脱离文档流
- fixed：固定定位，根据屏幕视口的位置来定位，脱离文档流
- inherit：这种方式规定该元素继承父元素的position属性值。 （不常用）
- sticky: 粘性定位,基于用户的滚动位置来定位。基本上，可以看出是
position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，当元素要滚出显示器屏幕时，表现为fixed。必须指定 top, right, bottom 或 left 四个属性中的其中一个，粘性定位才会生效。否则其行为与相对定位相同。且元素不会脱离文档流。
元素居中
1.使用定位属性：父元素相对定位，子元素绝对定位
2.利用css3新增属性transform: translate(-50%,-50%);
3.flex布局
flex布局的属性
参考：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
易考点：
flex-flow：是flex-direction和flex-wrap的简写形式
justify-content：定义项目在主轴方向上的排列方式
假设主轴是水平方向：
- flex-start：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目之间的间距相等
- space-around：每个项目两侧间隔相等，所以项目之间的间隔比项目与边缘间隔大一倍
flex
flex-grow、 flex-shrink 、flex-basic的简写 默认是0 1 auto，后面两个值可选
该属性有两个快捷值auto（1 1 auto）和none（0 0 auto）
标准盒子模型和IE盒子模型
盒模型分为两种：标准和怪异
盒模型的属性包含margin padding border content
标准盒模型的width = content
怪异盒模型的width = border + padding + content
box-sizing：border-box将采用怪异盒模型
Box-sizing：content-box将采用标准盒模型
display的属性值及其作用
| 属性值 | 作用 |
|---|---|
| none | 元素不显示，并且会从文档流中移除。既在网页中不占任何的位置。 |
| block | 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 |
| inline | 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。 |
| inline-block | 默认宽度为内容宽度，可以设置宽高，同行显示。 |
| list-item | 像块类型元素一样显示，并添加样式列表标记。 |
| table | 此元素会作为块级表格来显示。 |
| inherit | 规定应该从父元素继承display属性的值。 |
display的block、inline和inline-block的区别
（1）行内元素
- 设置宽高无效；
- 不支持上下margin设置,支持左右margin的设置;支持padding设置。
- 不会自动换行；
（2）块级元素
- 可以设置宽高；
- 设置margin和padding都有效；
- 可以自动换行；
- 多个块状，默认排列从上到下。
重绘回流
重绘：只是元素的外观改变，比如颜色和背景色，但是元素的大小和定位不变，并且不会影响到其他元素的位置
重排：元素的尺寸和布局需要重新计算，可能会影响到其他元素的位置，如元素的高度增加
区别：重排比重绘影响更大；回流必定会发生重绘，重绘不一定会引发回流。
减少重排的方法：1.集中修改样式 2.频繁触发的事件比如scroll、resize 可以使用防抖和节流 3.一些动画可以使用css3的特性；
BFC
什么是BFC？看这一篇就够了_Leon的博客-CSDN博客_bfc
简单来说就是，BFC是一个完全独立的渲染区域，在内部怎么变化都不会影响到外部。
怎样触发BFC
这里简单列举几个触发BFC使用的CSS属性
- overflow: hidden
- display: inline-block
- position: absolute
- position: fixed
- display: table-cell
- display: flex的直接子元素
3383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
