css部分基础知识回顾（二）

浏览器回流与重绘

之所以能在页面上看到内容，是由于浏览器拿到服务器发送的数据后，开始做解析标签样式的操作，而后维护了一棵Dom树和Style树。
回流（重排）：是指浏览器重新刷新整个或者者部分模块的Dom或者者Style树，而后在页面上进行重新渲染。而引起重新渲染的条件可能是改变某个div的位置、大小或者者结构等。
重绘：是指部分样式的修改，比方color、background-color或者者visibility等的改变，不会改动Dom树本来的样子或者者位置，这样的改动会造成浏览器的重绘。
回流必然引起重绘，但是重绘并不肯定会引起回流。由上详情也可知道，回流更加消耗资源，尽量减少回流次数，比方修改样式的时候使用style.cssText一次性设置，或者者使用.class样式一次性修改class，或者者在样式修改完成后在将其display设置为block等。

css权重

css中存在权重，权重大的会优先显示，所以会出现，都设置了某一个div的颜色，但是只会显示一种的起因（css中某个div的颜色显示什么，并不是由什么外部样式，内部样式，行内样式决定的，也不是由样式表加载顺序确定的，而是css权重确定）更详细详情。如何计算权重？可以这样计算，将其分为#style -> 千位 #id -> 百 .class -> 十 div -> 个位，标记为四位数，看见一个类型就在对应的位置+1若超过10不进位。

• !important：只需设置，则显示其样式，权重最高，可以直接忽略其余权重。
• style：看见此行内样式，则在千位做+1操作。
• #id：样式中看见此选择器，则在百位做+1操作。
• .calss | :hover | ...：样式中看见类选择器 伪类选择器，则在十位做+1操作。
• span | ::after | ...：样式中看见标签选择器 伪元素选择器，则在个位做+1操作。
  举个例子：

<style>#one {  /*div#one样式的权重为0100*/  color: yellow;}#two { /*span#two样式的权重为0100*/  color: blue;}#one #two {  /*span#two样式的权重为0200，所有显示红色*/  color: red;}</style><div id="one">  <span id="two">我是红色</span></div><!-- 另一个例子 --><style>div.one { /*div.one样式的权重为0011*/  color: yellow;}.one { /*div.one样式的权重为0010*/  color: red;}</style><div class="one">我是黄颜色</div>

BFC布局

首先，什么事BFC布局？
BFC布局是一种块级格式化布局方式，通过设定特定的属性值，可以让一个盒子或者模块变成一个特殊的区域。在这个区域内的样式不会影响到外部，外部也不会影响到内部。而且在其内部区域中，浮动的元素是会计算高度的，所以可以用来处理浮动元素的父元素高度撑不开的问题，当然还可以处理其余问题，比方：
1、处理margin重叠问题
2、假如出现浮动元素遮盖兄弟元素的情况，可以将兄弟元素设置为BFC模式规避遮挡（由于BFC的区域不会与float的元素区域重叠）
3、处理浮动元素，父级撑不开的问题
4、理解更多传送门

Flex布局

Flex为流式布局，是一种新的布局方式。其分为主轴和交叉轴。其中容器的属性有：flex-direction flex-wrap flex-flow justify-content aligin-items align-content。元素的属性有：order flex-grow flex-shrink flex-basis flex align-self。