大家好，又见面了，我是你们的朋友全栈君。
CSS选择器及其优先级
- !important声明的样式的优先级最高
- 内联样式：1000
- id 选择器 100
- 如果优先级相同，则最后出现的样式生效；
- 继承出来的样式优先级最低；
em\px\rem\vw区别
- px：绝对单位
- 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. 浏览器渲染机制
浏览器采用流式布局模型（Flow Based Layout）
浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了渲染树（Render Tree）。
然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。
2.重绘
由于节点的属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘，例如outline, visibility, color、background-color等，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点元素的可见性。
3.回流
回流是布局需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。
回流必定会发生重绘，重绘不一定会引发回流。
4.减少重绘与回流
1、使用 visibility（重绘） 替换 display: none （回流）
2、避免使用table布局，可能很小的一个小改动会造成整个 table 的重新布局。
3、尽可能在DOM树的最末端改变class，
4、合并多次对DOM和样式的修改，然后一次处理掉
chrome的最小字体12px限制最终解决办法
利用css3的transform属性
-webkit-transform: scale(0.90);
BFC
什么是BFC？看这一篇就够了_Leon的博客-CSDN博客_bfc
简单来说就是，BFC是一个完全独立的渲染区域，让空间里的子元素不会影响到外面的布局。
怎样触发BFC
这里简单列举几个触发BFC使用的CSS属性
- overflow: hidden
- display: inline-block
- position: absolute
- position: fixed
- display: table-cell
- display: flex
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/138256.html原文链接：https://javaforall.net
