备战-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操做不会引起回流和重绘。