「面面俱到」CSS篇

前言

迁移面面俱到整理一下关于样式部分的一些点包括我们常用的一些实现样式方法，然后就是回流重绘的一些认识。

BFC

什么是BFC

它是由CSS2.1规范定义的，全称为Block Formatting Context。通俗来理解就是当元素被定义为块格式上下文的话，自身就形成了一个独立的盒子，让处于BFC内部的元素与外部的元素相互隔离。

提及到CSS首先我们就要弄清楚BFC这个点。小编之前有结合实例介绍过，就不浪费时间再写一次了BFC介绍，这边就简单说一下。

怎样创建BFC

• 浮动
• 绝对定位
• 行内块级元素
• overflow的值不为visible的元素
• 弹性盒子

flex布局

经常去用它但这次一回顾确实了解的不是很够，这边做一下记录

flex容器

我们去用到flex布局前提要求就是我们要将父级盒子定义为弹性盒子,当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

.father {
    display: flex | inline-flex;
}

flex相关属性

我们实现flex布局就是根据他的相关属性配合我们先来了解介绍一下，具体属性值就不一一写了可以到文档里面去查阅。

• flex-direction
  定义主轴方向

  .container {
      flex-direction: row | row-reverse | column | column-reverse;
                    /*左到右    右到左       上到下     下到上*/
  }
  

• flex-wrap
  容器内盒子是否能换行

• justify-content
  定义了项目在主轴的对齐方式。

• align-content
  定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用

啊啊啊啊啊写不动这里了，跟再抄官方文档一下，过！我们到下一个地方

水平垂直居中

这个点老生常谈了，估计面试也会问到，小编这边就做一个整理复习
我们先写上我们的工具盒子。

<div class="father">
    <div class="box size">content</div>
</div>
<style>
.father {
    width: 200px;
    height: 200px;
}

.box {
    background: green;    
}

.size{
    width: 100px;
    height: 100px;
}
</style>

定位+负margin

最开始学前端看到的就是这个哈哈哈，有点亲切，劣势也很明显，需要知道居中盒子宽高。

.father {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    /*下面两个是去子盒子对应宽高的一半*/
    margin-left: -50px;
    margin-top: -50px;
}

定位+margin auto

.father {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

定位+calc

calcC3的一个计算属性，实现与定位+负margin类似也是需要知道居中盒子的宽高

.father {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

定位+transform

transform的translate属性对于当前盒子移动

.father {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

flex布局

这种情况肯定不能少了我们万能的flex，果然还是最方便的。

.father {
    display: flex;
    justify-content: center; /*左右居中*/
    align-items: center; /*上下居中*/
}

浏览器回流重绘

概念内容

告别一下样式我们来总结一下回流重绘，浏览器内核解析样式代码使用的是流式布局模型，解析html成DOM，解析CSS为CSSOM，然后结合Render Tree。然后浏览器就根据结合的Render Tree来绘制页面

• 回流
  当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流
• 重绘
  当页面中元素样式的改变并不影响它在文档流中的位置时，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

如何避免

很明显回流要付出的代价是更高的，即使是一个元素发生变化，一连串的会导致Render Tree的变化页面更新就需要更大的资源成本。

CSS方面

• 避免使用table布局。
• 尽可能在DOM树的最末端改变class。
• 避免设置多层内联样式。
• 将动画效果应用到position属性为absolute或fixed的元素上。

JS方面

• 避免频繁操作DOM
• 可以先为元素设置display:none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。

面面俱到系列传送门

• JS(包含es6)基础篇
• CSS篇
• 原型继承篇
• Vue篇
• 前端须知网络
• webpack篇