css

flex 的完整写法是什么，分别是什么意思

1. flex: 1

• 利用 flex:1，可实现三个不同 div 内容平分

  <style>   * {margin: 0;padding: 0;}   ul {        display: flex;        list-style: none;        border: 4px solid black;    }
    li {        flex: 1;        border: 4px solid red;        margin: 5px;    }</style><ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li></ul>

1. flex 属性

flex 属性是 flex-grow、flex-shrink、 flex-basis 的简写，默认值为 0，1，auto

• flex-grow 定义项目的放大比例，默认为 0，即如果存在剩余空间也不方法。

• flex-shrink 定义项目缩小比例，默认为 1，即如果该项目空间不足，该项目将缩小。

• flex-basis 給上面两个属性分配多余空间之前，计算项目是否有剩余空间，默认为 auto，即项目本身大小

1. flex 完整写法

flex:1 完整写法

flex-grow:1;flex-shrink:1;flex-basis:0%;

Css 单位都有哪些？

• css 有几个不同的单位用来表示长度，长度由一个数字和单位组成

• 数字与单位间不可有空格。如果长度为 0，则可以省略单位。

• 对于一些 css 属性，长度可以为负值。

web屏幕适配的解决方案

Css 如何实现动画

css3 新增属性 transition 与 animation 两种方式可实现动画，那么在出现 transition 与 animation 之前，有两种方式实现动画：一种是使用 css 的 hover 伪类属性方式，另一种是使用 js 改变 css 属性的方式；

transition 语法：transition：property duration timing-function delay

• property： 规定设置过渡效果的 css 属性名称

• duration： 规定完成过渡效果需要多少秒或者毫秒

• timing-function： 规定过渡效果的速度曲线

• delay： 定义过渡效果何时开始

animation 语法：animation：name duration timing-function delay iteration-count direction

play-state fill-mode；

• name：需要绑定到选择器的 keyframe 名称。

• duration：完成该动画需要花费的时间，秒或毫秒。

• timing-function：跟 transition-linear 一样。

• delay：设置动画在开始之前的延迟。

• iteration-count：设置动画执行的次数，infinite 为无限次循环。

• direction：是否轮询反向播放动画。normal，默认值，动画应该正常播放；alternate，动画应该轮流反向播放。

css 实现半圆

原理： 左上、右上角是圆角，右下、左下角是直角；左上角、右上角的值为宽和高一样的值，右下角、左下角的值不变（等于 0）；另外，因为还要设置高度值为原来高度的一半才是标准的半圆。

/* 上半圆 */.semi-circle{  width:100px;  height:50px;   background-color:#cb18f8;  border-radius:50px 50px 0 0; /* 左上、右上、右下、左下 */}/* 下半圆 */.semi-circle2{  width:100px;  height:50px;   background-color:#cb18f8;  border-radius:0 0 50px 50px; /* 左上、右上、右下、左下 */}/* 左半圆 */.semi-circle3{  width:50px;  height:100px;   background-color:#cb18f8;  border-radius:50px 0 0 50px; /* 左上、右上、右下、左下 */}/* 右半圆 */.semi-circle4{  width:50px;  height:100px;   background-color:#cb18f8;  border-radius:0 50px 50px 0; /* 左上、右上、右下、左下 */}

通过 link 进来的 css 会阻塞页面渲染吗，Js 会阻塞吗，如果会如何解决

• <link>标签不会阻塞 DOM 解析但会阻塞 DOM 渲染

<link>标签并不会像带 src 属性的<script>标签一样会触发页面 paint。浏览器并行解析生成 DOM Tree 和 CSSOM Tree，当两者都解析完毕，才会生成 rending tree,页面才开始渲染。所以应尽量减小引入样式文件的大小，提高首屏展示速度。

• <script> 标签会阻塞 DOM 解析和渲染

<script>标签会阻塞 DOM 解析和渲染，但在阻塞同时，其他线程会解析文档的其余 部分（预解析），找出并加载需要通过网络加载的其他资源。通过这种方式，资源可以在并行连接上加载，从而提高整体速度

• 优化

• 合理放置脚本位置

• 预加载 link preload

• DNS Prefecth 预解析

• script 延迟脚本加载（defer/async）

• 总结

html 代码中往往会引入一些额外的资源，比如图片、CSS、 JS 脚本等，图片和 CSS 这些资源需要通过网络下载或从缓存中直接加载，这些资源不会阻塞 html 的解析，因为他们不会影响 DOM 树的生成，但当 HTML 解析过程中遇到 script 标签，就会停止 html 解析流程，转而去加载解析并且执行 JS。这是因为浏览器并不知道 JS 执行是否会改变当前页面的 HTML 结构，如果 JS 代码里用了 document.write 方法来修改 html,之前的和 html 解析就没有任何意义了，这也就是为什么我们一直说要把 script 标签要放在合适的位置，或者使用 async 或 defer 属性来异步加载执行 JS。

什么是重绘重排，哪些操作会造成重绘重排

当我们改变了一个元素的尺寸位置属性时，会重新进行样式计算布局绘制以及后面所有流程，这种行为为重排

当改变了某个元素的颜色属性是不会重新出发布局，但还是会触发样式计算和绘制这就是重绘

重排和重绘都会占用主线程，还有 JS 也会运行在主线程

• 触发的一些因素

1. 页面首次进行渲染

2. 浏览器 resize

3. 元素位置和尺寸发生

4. 可见元素的增删

5. 内容发生变换

6. 字体的 font 改变

• 避免重绘重排的方案

1. css

• 使用 transform 替代 top 等位移

• 使用 visibilty 替换 display:none

• 避免使用 table 布局

• 尽可能在 dom 树的最末端改变 class

• 避免设置多层内联样式，尽量层级扁平

• 将动画效果应用到 position 属性为 fixed 或 absolute 的元素上

• 避免使用 css 表达式

2. js

• 避免频繁操作样式，合并操作

• 避免频繁操作 dom，合并操作

• 防抖节流控制频率

如何垂直居中一个元素

• postion + margin

• postion + transform

• flex

• 单行文本元素 line-height