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

浏览器回流与重绘 之所以能在页面上看到内容，是因为浏览器拿到服务器发送的数据后，开始做解析标签样式的操作，然后维护了一棵Dom树和Style树。 回流（重排）：是指浏览器重新刷新整个或者部分模块的Dom或者Style树，然后在页面上进行重新渲染。而引起重新渲染的条件可能是改变某个div的位置、大小或者结构等。 重绘：是指部分样式的修改，比如color、background-color或者visibility等的改变，不会改动Dom树原本的样子或者位置，这样的改动会造成浏览器的重绘。 回流必然引起重绘，但是重绘并不一定会引起回流。由上介绍也可知道，回流更加消耗资源，尽量减少回流次数，比如修改样式的时候使用style.cssText一次性设置，或者使用.class样式一次性修改class，或者在样式修改完成后在将其display设置为block等。 还有就是：重排也不是立即执行的，必须要等到重排队列中数量的操作或者等到一定的时间间隔才会执行重排操作。还有一种可能是会立即重排的，不管重排队列中操作多少或者间隔时间是否到了，都会立即发生，那就是如下： div.style.width = "200px"; div.style.height = "300px"; //此时并不一定会执行2次重排，原因上文已经说了。 div.style.width = "200px"; console.log(div.offsetWidth); div.style.height = "300px"; console.log(div.offsetHeight); //这种情况就会重绘2次，因为在设置完width后，立即取了宽度，浏览器知道你需要宽度，所以会立即重排操作，然后给你最新的宽度。 css权重 css中存在权重，权重大的会优先显示，所以会出现，都设置了某一个div的颜色，但是只会显示一种的原因（css中某个div的颜色显示什么，并不是由什么外部样式，内部样式，行内样式决定的，也不是由样式表加载顺序确定的，而是css权重确定）更详细介绍。如何计算权重？可以这样计算，将其分为#style -> 千位 #id -> 百 .class -> 十 div -> 个位，标记为四位数，看见一个类型就在对应的位置+1若超过10不进位。 !important：只要设置，则显示其样式，权重最高，可以直接忽略其他权重。 style：看见此行内样式，则在千位做+1操作。 #id：样式中看见此选择器，则在百位做+1操作。 .calss | :hover | ...：样式中看见类选择器 伪类选择器，则在十位做+1操作。 span | ::after | ...：样式中看见标签选择器 伪元素选择器，则在个位做+1操作。 举个例子： 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。

本文章由javascript技术分享原创和收集