css ​

盒模型 ​

• 盒子模型构成：内容(content)、内填充(padding)、 边框(border)、外边距(margin)
• IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)
• 标准(W3C)盒模型：元素宽度 = width + padding + border + margin
• 怪异(IE)盒模型：元素宽度 = width + margin
• 标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高

BFC ​

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

IE下为 Layout，可通过 zoom:1 触发

触发条件:

• 根元素，即 HTML 元素
• 绝对定位元素 position: absolute/fixed
• 行内块元素 display的值为inline-block、table、flex、inline-flex、grid、inline-grid
• 浮动元素：float值为left、right
• overflow值不为 visible，为 auto、scroll、hidden

规则:

1. 属于同一个 BFC 的两个相邻 Box 垂直排列
2. 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
3. BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
4. BFC 的区域不会与 float 的元素区域重叠
5. 计算 BFC 的高度时，浮动子元素也参与计算
6. 文字层不会被浮动层覆盖，环绕于周围

应用:

• 利用2：阻止margin重叠
• 利用4：自适应两栏布局
• 利用 5 ，可以避免高度塌陷
• 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)

层叠上下文 ​

元素提升为一个比较特殊的图层，在三维空间中 (z 轴) 高出普通元素一等。

触发条件

• 根层叠上下文(html)

• position

• css3

  css3

  1
  

  属性

  • flex
  • transform
  • opacity
  • filter
  • will-change
  • webkit-overflow-scrolling

层叠等级：层叠上下文在 z 轴上的排序

• 在同一层叠上下文中，层叠等级才有意义
• z-index的优先级最高

居中布局 ​

元素水平垂直居中的方法有哪些？如果元素不定宽高呢？ ​

1. 利用绝对定位+transform，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 translate 来调整子元素的中心点到父元素的中心。该方法可以不定宽高

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

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

1. 利用绝对定位+margin:auto，子元素所有方向都为 0 ，将 margin 设置为 auto ，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高

.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}

.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}

1. 利用绝对定位+margin:负值，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 margin-left 和 margin-top 以子元素自己的一半宽高进行负值赋值。该方法必须定宽高

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}

1. 利用 flex ，最经典最方便的一种了，不用解释，定不定宽高无所谓

<style>
  .father {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background: skyblue;
  }
  .son {
    width: 100px;
    height: 100px;
    background: red;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>

<style>
  .father {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background: skyblue;
  }
  .son {
    width: 100px;
    height: 100px;
    background: red;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>

1. grid 网格布局

<style>
  .father {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    background: skyblue;
  }
  .son {
    width: 10px;
    height: 10px;
    border: 1px solid red;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>

<style>
  .father {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    background: skyblue;
  }
  .son {
    width: 10px;
    height: 10px;
    border: 1px solid red;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>

1. table 布局

设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中

<style>
  .father {
    display: table-cell;
    width: 200px;
    height: 200px;
    background: skyblue;
    vertical-align: middle;
    text-align: center;
  }
  .son {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>

<style>
  .father {
    display: table-cell;
    width: 200px;
    height: 200px;
    background: skyblue;
    vertical-align: middle;
    text-align: center;
  }
  .son {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: red;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>

小结

不知道元素宽高大小仍能实现水平垂直居中的方法有：

• 利用定位+transform
• flex布局
• grid布局

根据元素标签的性质，可以分为：

• 内联元素居中布局
• 块级元素居中布局

内联元素居中布局

• 水平居中
  • 行内元素可设置：text-align: center
  • flex布局设置父元素：display: flex; justify-content: center
• 垂直居中
  • 单行文本父元素确认高度：height === line-height
  • 多行文本父元素确认高度：display: table-cell; vertical-align: middle

块级元素居中布局

• 水平居中
  • 定宽: margin: 0 auto
  • 绝对定位+left:50%+margin:负自身一半
• 垂直居中
  • position: absolute设置left、top、margin-left、margin-top(定高)
  • display: table-cell
  • transform: translate(x, y)
  • flex(不定高，不定宽)
  • grid(不定高，不定宽)，兼容性相对比较差

左右居中 ​

• 行内元素: text-align: center
• 定宽块状元素: 左右 margin 值为 auto
• 不定宽块状元素: table布局，position + transform

/* 方案1 */
.wrap {
  text-align: center;
}
.center {
  display: inline;
  /* or */
  /* display: inline-block; */
}
/* 方案2 */
.center {
  width: 100px;
  margin: 0 auto;
}
/* 方案2 */
.wrap {
  position: relative;
}
.center {
  position: absulote;
  left: 50%;
  transform: translateX(-50%);
}

@程序员poetry: 代码已经复制到剪贴板;

/* 方案1 */
.wrap {
  text-align: center;
}
.center {
  display: inline;
  /* or */
  /* display: inline-block; */
}
/* 方案2 */
.center {
  width: 100px;
  margin: 0 auto;
}
/* 方案2 */
.wrap {
  position: relative;
}
.center {
  position: absulote;
  left: 50%;
  transform: translateX(-50%);
}

@程序员poetry: 代码已经复制到剪贴板;

上下居中 ​

• 定高：margin，position + margin(负值)
• 不定高：position + transform，flex，IFC + vertical-align:middle

/* 定高方案1 */
.center {
  height: 100px;
  margin: 50px 0;
}
/* 定高方案2 */
.center {
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -25px;
}
/* 不定高方案1 */
.center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
/* 不定高方案2 */
.wrap {
  display: flex;
  align-items: center;
}
.center {
  width: 100%;
}
/* 不定高方案3 */
/* 设置 inline-block 则会在外层产生 IFC，高度设为 100% 撑开 wrap 的高度 */
.wrap::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.wrap {
  text-align: center;
}
.center {
  display: inline-block;
  vertical-align: middle;
}

/* 定高方案1 */
.center {
  height: 100px;
  margin: 50px 0;
}
/* 定高方案2 */
.center {
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -25px;
}
/* 不定高方案1 */
.center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
/* 不定高方案2 */
.wrap {
  display: flex;
  align-items: center;
}
.center {
  width: 100%;
}
/* 不定高方案3 */
/* 设置 inline-block 则会在外层产生 IFC，高度设为 100% 撑开 wrap 的高度 */
.wrap::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.wrap {
  text-align: center;
}
.center {
  display: inline-block;
  vertical-align: middle;
}

选择器权重计算方式 ​

!important > 内联样式 = 外联样式 > ID 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器

1. 属性后面加!import会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素内的样式
3. id选择器
4. 类选择器
5. 标签选择器
6. 通配符选择器（*）
7. 浏览器自定义或继承

同一级别：后写的会覆盖先写的

css 选择器的解析原则：选择器定位 DOM 元素是从右往左的方向，这样可以尽早的过滤掉一些不必要的样式规则和元素

• 伪类选择器

:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素

:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素

• 伪元素选择器

:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容

:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容

• 属性选择器

[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素·

[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素·

在CSS3中新增的选择器有如下：

• 层次选择器（p~ul），选择前面有p元素的每个ul元素
• 伪类选择器

:first-of-type 表示一组同级元素中其类型的第一个元素
:last-of-type 表示一组同级元素中其类型的最后一个元素
:only-of-type 表示没有同类型兄弟元素的元素
:only-child 表示没有任何兄弟的元素
:nth-child(n) 根据元素在一组同级中的位置匹配元素
:nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数
:last-child 表示一组兄弟元素中的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择可用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择与 <selector> 不匹配的所有元素

:first-of-type 表示一组同级元素中其类型的第一个元素
:last-of-type 表示一组同级元素中其类型的最后一个元素
:only-of-type 表示没有同类型兄弟元素的元素
:only-child 表示没有任何兄弟的元素
:nth-child(n) 根据元素在一组同级中的位置匹配元素
:nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数
:last-child 表示一组兄弟元素中的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择可用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择与 <selector> 不匹配的所有元素

• 属性选择器

[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

继承属性

在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性

关于继承属性，可以分成：

• 字体系列属性

font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体

font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体

• 文本系列属性

text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色

• 元素可见性

visibility

visibility

• 表格布局属性

caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定

caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定

• 列表属性

list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合

list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合

• 引用

quotes：设置嵌套引用的引号类型

quotes：设置嵌套引用的引号类型

• 光标属性

cursor：箭头可以变成需要的形状

cursor：箭头可以变成需要的形状

继承中比较特殊的几点：

• a 标签的字体颜色不能被继承
• h1-h6标签字体的大下也是不能被继承的

无继承的属性

• display
• 文本属性：vertical-align、text-decoration
• 盒子模型的属性：宽度、高度、内外边距、边框等
• 背景属性：背景图片、颜色、位置等
• 定位属性：浮动、清除浮动、定位position等
• 生成内容属性：content、counter-reset、counter-increment
• 轮廓样式属性：outline-style、outline-width、outline-color、outline
• 页面样式属性：size、page-break-before、page-break-after

清除浮动 ​

1. 在浮动元素后面添加 clear:both的空 div 元素

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div style="clear:both"></div>
</div>

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div style="clear:both"></div>
</div>

1. 给父元素添加 overflow:hidden 或者 auto 样式，触发BFC

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

@程序员poetry: 代码已经复制到剪贴板 .container{ width: 300px; background-color: #aaa;
overflow:hidden; zoom:1; /*IE6*/ }

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

@程序员poetry: 代码已经复制到剪贴板 .container{ width: 300px; background-color: #aaa;
overflow:hidden; zoom:1; /*IE6*/ }

1. 使用伪元素，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。

<div class="container clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>

@程序员poetry: 代码已经复制到剪贴板 .clearfix{ zoom: 1; /*IE6*/ } .clearfix:after{ content: ".";
height: 0; clear: both; display: block; visibility: hidden; }

<div class="container clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>

@程序员poetry: 代码已经复制到剪贴板 .clearfix{ zoom: 1; /*IE6*/ } .clearfix:after{ content: ".";
height: 0; clear: both; display: block; visibility: hidden; }

推荐使用第三种方法，不会在页面新增 div，文档结构更加清晰

link 与 @import 的区别 ​

• link功能较多，可以定义 RSS，定义 Rel 等作用，而@import只能用于加载 css
• 当解析到link时，页面会同步加载所引的 css，而@import所引用的 css 会等到页面加载完才被加载
• @import需要 IE5 以上才能使用
• link可以使用 js 动态引入，@import不行

CSS3 的新特性 ​

是什么 ​

css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观

css3是 css 的最新标准，是向后兼容的，CSS1/2的特性在 CSS3 里都是可以使用的

而 CSS3 也增加了很多新特性，为开发带来了更佳的开发体验

选择器 ​

css3中新增了一些选择器，主要为如下图所示：

新样式 ​

• 边框css3新增了三个边框属性，分别是：
  • border-radius：创建圆角边框
  • box-shadow：为元素添加阴影
  • border-image：使用图片来绘制边框
• box-shadow 设置元素阴影，设置属性如下（其中水平阴影和垂直阴影是必须设置的）
  • 水平阴影
  • 垂直阴影
  • 模糊距离(虚实)
  • 阴影尺寸(影子大小)
  • 阴影颜色
  • 内/外阴影
• 背景新增了几个关于背景的属性，分别是background-clip background-origin background-size和background-break
  • background-clip用于确定背景画区，有以下几种可能的属性：通常情况，背景都是覆盖整个元素的，利用这个属性可以设定背景颜色或图片的覆盖范围
    • background-clip: border-box; 背景从border开始显示
    • background-clip: padding-box; 背景从padding开始显示
    • background-clip: content-box; 背景显content区域开始显示
    • background-clip: no-clip; 默认属性，等同于 border-box
  • background-origin当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐?border-origin正是用来设置这个的
    • background-origin: border-box; 从border开始计算background-position
    • background-origin: padding-box; 从padding开始计算background-position
    • background-origin: content-box; 从content开始计算background-position
    • 默认情况是padding-box，即以padding的左上角为原点
  • background-size常用来调整背景图片的大小，主要用于设定图片本身。有以下可能的属性：
    • background-size: contain; 缩小图片以适合元素（维持像素长宽比）
    • background-size: cover; 扩展元素以填补元素（维持像素长宽比）
    • background-size: 100px 100px; 缩小图片至指定的大小
    • background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸
  • background-break元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示
    • background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
    • background-break: bounding-box; 把盒之间的距离计算在内；
    • background-break: each-box; 为每个盒子单独重绘背景
• 文字
  • word-wrap: normal|break-word
    • normal：使用浏览器默认的换行
    • break-all：允许在单词内换行
  • text-overflow设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择
    • clip：修剪文本
    • ellipsis：显示省略符号来代表被修剪的文本
  • text-shadow 可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色
  • text-decorationCSS3 里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：
    • text-fill-color: 设置文字内部填充颜色
    • text-stroke-color: 设置文字边界填充颜色
    • text-stroke-width: 设置文字边界宽度
• 颜色
  • css3新增了新的颜色表示方式rgba与hsla
  • rgba分为两部分，rgb为颜色值，a为透明度
  • hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度

transition 过渡 ​

transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔，必须规定两项内容：

• 过度效果
• 持续时间

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

上面为简写模式，也可以分开写各个属性

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

transform 转换 ​

• transform属性允许你旋转，缩放，倾斜或平移给定元素
• transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)

使用方式：

• transform: translate(120px, 50%)：位移
• transform: scale(2, 0.5)：缩放
• transform: rotate(0.5turn)：旋转
• transform: skew(30deg, 20deg)：倾斜

animation 动画 ​

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬

animation也有很多的属性

• animation-name：动画名称
• animation-duration：动画持续时间
• animation-timing-function：动画时间函数
• animation-delay：动画延迟时间
• animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为 infinite，意思是无限循环
• animation-direction：动画执行方向
• animation-paly-state：动画播放状态
• animation-fill-mode：动画填充模式

渐变 ​

颜色渐变是指在两个颜色之间平稳的过渡，css3渐变包括

• linear-gradient：线性渐变 background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
• radial-gradient：径向渐变 linear-gradient(0deg, red, green)

其他 ​

• Flex弹性布局
• Grid栅格布局
• 媒体查询 @media screen and (max-width: 960px) {}还有打印print

transition 和 animation 的区别

Animation和transition大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为 2 帧，从from .... to，而animation可以一帧一帧的

CSS 动画和过渡 ​

常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合

css 实现动画的方式，有如下几种：

• transition 实现渐变动画
• transform 转变动画
• animation 实现自定义动画

transition 实现渐变动画 ​

transition 的属性如下：

• transition-property:填写需要变化的css属性
• transition-duration:完成过渡效果需要的时间单位(s或者ms)默认是 0
• transition-timing-function:完成效果的速度曲线
• transition-delay: （规定过渡效果何时开始。默认是0）

一般情况下，我们都是写一起的，比如：transition： width 2s ease 1s

其中timing-function的值有如下：

注意：并不是所有的属性都能使用过渡的，如display:none<->display:block

举个例子，实现鼠标移动上去发生变化动画效果

<style>
  .base {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: #0ea9ff;
    border-width: 5px;
    border-style: solid;
    border-color: #5daf34;
    transition-property: width, height, background-color, border-width;
    transition-duration: 2s;
    transition-timing-function: ease-in;
    transition-delay: 500ms;
  }

  /*简写*/
  /*transition: all 2s ease-in 500ms;*/
  .base:hover {
    width: 200px;
    height: 200px;
    background-color: #5daf34;
    border-width: 10px;
    border-color: #3a8ee6;
  }
</style>
<div class="base"></div>

@程序员poetry: 代码已经复制到剪贴板

<style>
  .base {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: #0ea9ff;
    border-width: 5px;
    border-style: solid;
    border-color: #5daf34;
    transition-property: width, height, background-color, border-width;
    transition-duration: 2s;
    transition-timing-function: ease-in;
    transition-delay: 500ms;
  }

  /*简写*/
  /*transition: all 2s ease-in 500ms;*/
  .base:hover {
    width: 200px;
    height: 200px;
    background-color: #5daf34;
    border-width: 10px;
    border-color: #3a8ee6;
  }
</style>
<div class="base"></div>

@程序员poetry: 代码已经复制到剪贴板

transform 转变动画 ​

包含四个常用的功能：

• translate(x,y)：位移
• scale：缩放
• rotate：旋转
• skew：倾斜

一般配合transition过度使用

注意的是，transform不支持inline元素，使用前把它变成block

举个例子

<style>
  .base {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: #0ea9ff;
    border-width: 5px;
    border-style: solid;
    border-color: #5daf34;
    transition-property: width, height, background-color, border-width;
    transition-duration: 2s;
    transition-timing-function: ease-in;
    transition-delay: 500ms;
  }
  .base2 {
    transform: none;
    transition-property: transform;
    transition-delay: 5ms;
  }
  .base2:hover {
    transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
  }
</style>
<div class="base base2"></div>

<style>
  .base {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: #0ea9ff;
    border-width: 5px;
    border-style: solid;
    border-color: #5daf34;
    transition-property: width, height, background-color, border-width;
    transition-duration: 2s;
    transition-timing-function: ease-in;
    transition-delay: 500ms;
  }
  .base2 {
    transform: none;
    transition-property: transform;
    transition-delay: 5ms;
  }
  .base2:hover {
    transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
  }
</style>
<div class="base base2"></div>

可以看到盒子发生了旋转，倾斜，平移，放大

animation 实现自定义动画 ​

一个关键帧动画，最少包含两部分，animation 属性及属性值（动画的名称和运行方式运行时间等）@keyframes（规定动画的具体实现过程）

animation是由 8 个属性的简写，分别如下：

CSS 动画只需要定义一些关键的帧，而其余的帧，浏览器会根据计时函数插值计算出来，

@keyframes定义关键帧，可以是from->to（等同于0%和100%），也可以是从0%->100%之间任意个的分层设置

因此，如果我们想要让元素旋转一圈，只需要定义开始和结束两帧即可：

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

from 表示最开始的那一帧，to 表示结束时的那一帧

也可以使用百分比刻画生命周期

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

定义好了关键帧后，下来就可以直接用它了：

animation: rotate 2s;

animation: rotate 2s;

总结

用 css3 动画使一个图片旋转 ​

#loader {
  display: block;
  position: relative;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#loader {
  display: block;
  position: relative;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

有哪些方式（CSS）可以隐藏页面元素 ​

• opacity:0：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
• visibility:hidden: 与上一个方法类似的效果，占据空间，但是不可以交互了
• overflow:hidden: 这个只隐藏元素溢出的部分，但是占据空间且不可交互
• display:none: 这个是彻底隐藏了元素，元素从文档流中消失，既不占据空间也不交互，也不影响布局
• z-index:-9999: 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
• transform: scale(0,0): 平面变换，将元素缩放为0，但是依然占据空间，但不可交互

说说 em/px/rem/vh/vw 区别 ​

传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性

从 CSS3 开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位

利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等

在css单位中，可以分为长度单位、绝对单位，如下表所指示

这里我们主要讲述px、em、rem、vh、vw

px

px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中

有些人会把px认为是相对长度，原因在于在移动端中存在设备像素比，px实际显示的大小是不确定的

这里之所以认为px为绝对单位，在于px的大小和元素的其他属性无关

em

em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）

为了简化 font-size 的换算，我们需要在css中的 body 选择器中声明font-size= 62.5%，这就使 em 值变为 16px*62.5% = 10px

这样 12px = 1.2em, 10px = 1em, 也就是说只需要将你的原来的px 数值除以 10，然后换上 em作为单位就行了

特点：

• em 的值并不是固定的
• em 会继承父级元素的字体大小
• em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
• 任意浏览器的默认字体高都是 16px

举个例子

<div class="big">
  我是14px=1.4rem
  <div class="small">我是12px=1.2rem</div>
</div>

<div class="big">
  我是14px=1.4rem
  <div class="small">我是12px=1.2rem</div>
</div>

样式为

<style>
    html {font-size: 10px;  } /*  公式16px*62.5%=10px  */
    .big{font-size: 1.4rem}
    .small{font-size: 1.2rem}
</style>

<style>
    html {font-size: 10px;  } /*  公式16px*62.5%=10px  */
    .big{font-size: 1.4rem}
    .small{font-size: 1.2rem}
</style>

这时候.big元素的font-size为 14px，而.small元素的font-size为 12px

rem(常用)

• 根据屏幕的分辨率动态设置html的文字大小，达到等比缩放的功能
• 保证html最终算出来的字体大小，不能小于12px
• 在不同的移动端显示不同的元素比例效果
• 如果html的font-size:20px的时候，那么此时的1rem = 20px
• 把设计图的宽度分成多少分之一，根据实际情况
• rem做盒子的宽度，viewport缩放

head加入常见的meta属性

<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--这个是关键-->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0，minimum-scale=1.0"
/>

<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!--这个是关键-->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0，minimum-scale=1.0"
/>

把这段代码加入head中的script预先加载

// rem适配用这段代码动态计算html的font-size大小
;(function (win) {
  var docEl = win.document.documentElement
  var timer = ''

  function changeRem() {
    var width = docEl.getBoundingClientRect().width
    if (width > 750) {
      // 750是设计稿大小
      width = 750
    }
    var fontS = width / 10 // 把设备宽度十等分 1rem<=75px
    docEl.style.fontSize = fontS + 'px'
  }
  win.addEventListener(
    'resize',
    function () {
      clearTimeout(timer)
      timer = setTimeout(changeRem, 30)
    },
    false,
  )
  win.addEventListener(
    'pageshow',
    function (e) {
      if (e.persisted) {
        //清除缓存
        clearTimeout(timer)
        timer = setTimeout(changeRem, 30)
      }
    },
    false,
  )
  changeRem()
})(window)

// rem适配用这段代码动态计算html的font-size大小
;(function (win) {
  var docEl = win.document.documentElement
  var timer = ''

  function changeRem() {
    var width = docEl.getBoundingClientRect().width
    if (width > 750) {
      // 750是设计稿大小
      width = 750
    }
    var fontS = width / 10 // 把设备宽度十等分 1rem<=75px
    docEl.style.fontSize = fontS + 'px'
  }
  win.addEventListener(
    'resize',
    function () {
      clearTimeout(timer)
      timer = setTimeout(changeRem, 30)
    },
    false,
  )
  win.addEventListener(
    'pageshow',
    function (e) {
      if (e.persisted) {
        //清除缓存
        clearTimeout(timer)
        timer = setTimeout(changeRem, 30)
      }
    },
    false,
  )
  changeRem()
})(window)

• 或者使用淘宝提供的库 https://github.com/amfe/lib-flexible

vh、vw

vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度

这里的窗口分成几种情况：

• 在桌面端，指的是浏览器的可视区域
• 移动端指的就是布局视口

像vw、vh，比较容易混淆的一个单位是%，不过百分比宽泛的讲是相对于父元素：

• 对于普通定位元素就是我们理解的父元素
• 对于position: absolute;的元素是相对于已定位的父元素
• 对于position: fixed;的元素是相对于 ViewPort（可视窗口）

总结

• px：绝对单位，页面按精确像素展示

• %：相对于父元素的宽度比例

• em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值

• rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算

• vh、vw

  ：主要用于页面视口大小布局，在页面布局上更加方便简单

  • vw：屏幕宽度的1%
  • vh：屏幕高度的1%
  • vmin：取vw和vh中较小的那个（如：10vh=100px 10vw=200px 则vmin=10vh=100px）
  • vmax：取vw和vh中较大的那个（如：10vh=100px 10vw=200px 则vmax=10vw=200px

flex:1 是哪些属性组成的 ​

• flex 实际上是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写。
• flex-grow：定义项目的的放大比例；
  • 默认为0，即 即使存在剩余空间，也不会放大；
  • 所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
  • flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍
• flex-shrink：定义项目的缩小比例；
  • 默认为1，即 如果空间不足，该项目将缩小；
  • 所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；
  • flex-shrink为0：空间不足时，该项目不会缩小；
  • flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。
• flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间
  • 默认值为auto，即 项目原本大小；
  • 设置后项目将占据固定空间。

关于伪类 LVHA 的解释 ​

a 标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active；

当链接未访问过时：

• 当鼠标滑过 a 链接时，满足:link和:hover两种状态，要改变 a 标签的颜色，就必须将:hover伪类在:link伪 类后面声明；
• 当鼠标点击激活 a 链接时，同时满足:link、:hover、:active三种状态，要显示 a 标签激活时的样式（:active）， 必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。
• 当链接访问过时，情况基本同上，只不过需要将:link换成:visited。

这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

calc 函数 ​

calc 函数是 css3 新增的功能，可以使用calc()计算border、margin、pading、font-size和 width 等属性设置动态值

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% / (100px * 2));
  /* 兼容写法 */
  width: -moz-calc(100% / (100px * 2));
  width: -webkit-calc(100% / (100px * 2));
  border: 1px solid black;
}

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% / (100px * 2));
  /* 兼容写法 */
  width: -moz-calc(100% / (100px * 2));
  width: -webkit-calc(100% / (100px * 2));
  border: 1px solid black;
}

注意点：

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px);
• calc()函数支持 "+", "-", "*", "/" 运算;
• 对于不支持 calc()的浏览器，整个属性值表达式将被忽略。不过我们可以对那些不支持calc()的浏览器，使用一个固定值作为回退。

伪类和伪元素 ​

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素都是用来修饰不在文档树中的部分

伪类

伪类存在的意义是为了通过选择器找到那些不存在 DOM 树中的信息以及不能被常规 CSS 选择器获取到的信息

1. 获取不存在与 DOM 树中的信息。比如 a 标签的:link、visited等，这些信息不存在与 DOM 树结构中，只能通过 CSS 选择器来获取；
2. 获取不能被常规 CSS 选择器获取的信息。比如：要获取第一个子元素，我们无法用常规的 CSS 选择器获取，但可以通过 :first-child 来获取到。

伪元素

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。常见的伪元素有：::before，::after，::first-line，::first-letter，::selection、::placeholder等

因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素

::after 和:after 的区别

• 在实际的开发工作中，我们会看到有人把伪元素写成:after，这实际是 CSS2 与CSS3新旧标准的规定不同而导致的。
• CSS2 中的伪元素使用 1 个冒号，在 CSS3 中，为了区分伪类和伪元素，规定伪元素使用 2 个冒号。所以，对于 CSS2 标准的老伪元素，比如:first-line，:first-letter，:before，:after，写一个冒号浏览器也能识别，但对于 CSS3 标准的新伪元素，比如::selection，就必须写 2 个冒号了

CSS3 新增伪类有那些？

• p:first-of-type 选择属于其父元素的首个<p>元素的每个<p> 元素。
• p:last-of-type 选择属于其父元素的最后 <p> 元素的每个<p> 元素。
• p:only-of-type 选择属于其父元素唯一的 <p>元素的每个 <p> 元素。
• p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
• p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
• :after 在元素之前添加内容,也可以用来做清除浮动。
• :before 在元素之后添加内容
• :enabled
• :disabled 控制表单控件的禁用状态。
• :checked 单选框或复选框被选中

浏览器是怎样解析 CSS 选择器的 ​

• 样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。
• 试想一下，如果采用从左至右的方式读取 CSS 规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样做会费时耗能，
• 最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配。

浏览器如何判断是否支持 webp 格式图片 ​

• 宽高判断法。通过创建image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如 果能够获取，则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数，那么就说明浏览器不支持 webp 格 式的图片
• canvas 判断方法。我们可以动态的创建一个canvas对象，通过canvas的toDataURL将设置为 webp 格式，然后判断 返回值中是否含有image/webp字段，如果包含则说明支持WebP，反之则不支持

CSS 加载问题 ​

根据页面渲染流程可得知：

• css加载不会阻塞 DOM 树的解析;
• css加载会阻塞 DOM 树的渲染；
• css加载会阻塞后面 js 语句的执行

文字单超出显示省略号 ​

div {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

文字多行超出显示省略号

div {
  width: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

div {
  width: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

该方法适用于 WebKit 浏览器及移动端。

跨浏览器兼容方案：

p {
  position: relative;
  line-height: 1.4em;
  /* 3 times the line-height to show 3 lines */
  height: 4.2em;
  overflow: hidden;
}
p::after {
  content: '...';
  font-weight: bold;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 20px 1px 45px;
}

p {
  position: relative;
  line-height: 1.4em;
  /* 3 times the line-height to show 3 lines */
  height: 4.2em;
  overflow: hidden;
}
p::after {
  content: '...';
  font-weight: bold;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 20px 1px 45px;
}

页面变灰 ​

body {
  filter: grayscale(100%); /* 百分比或者 0~1 */
}

body {
  filter: grayscale(100%); /* 百分比或者 0~1 */
}

CSS 中可继承的属性 ​

可继承的只有：颜色、文字、字体间距、行高对齐方式，列表样式。

所有元素可继承：visibility和cursor。

• 内联元素可继承：
  • letter-spacing
  • word-spacing
  • white-space
  • line-height
  • color
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • text-decoration
  • text-transform
  • direction
• 块状：text-indent和text-align。
• 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image

常规流(文档流)是个怎样的排列关系 ​

将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素。

inline-block 的使用场景 ​

1. 要设置某些子元素在一行或者多行内显示，尤其是排列方向一致的情况下，应尽量用inline-block。
2. 希望若干个元素平行排列，且在父元素中居中排列，此时可以用inline-block，且给父元素设text-align: center。
3. inline-block可以用一排a {display: inline-block}实现横向导航栏，无论是居左的导航栏还是居右的都适用。

对于第一种和第三种情况虽然都可以使用float来实现，不过inline-block会比它好一些，原因如下：

• 浮动会脱离文档流，导致父元素高度塌陷

position: fixed 什么时候会失效？ ​

我们知道，设置了position: fixed固定定位属性的元素会脱离文档流，达到“超然脱俗”的境界。

也就是说此时给这种元素设置top, left, right, bottom等属性是根据浏览器窗口定位的，与其上级元素的位置无关。

但是有一种情况例外：

• 若是设置了position: fixed属性的元素，它的祖先元素设置了transform属性则会导致固定定位属性失效。
• 只要你的transform设置的不是none，都会影响到position: fixed，因为此时就会相对于祖先元素指定坐标，而不是浏览器窗口。

注意，这个特性表现，目前只在 Chrome 浏览器/FireFox 浏览器下有。IE 浏览器，包括 IE11, fixed还是fixed的表现。

回流（reflow）和重绘（repaint）的理解 ​

在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：

• 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
• 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

具体的浏览器解析渲染机制如下所示：

• 在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变
• 当我们对 DOM 的修改引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来
• 当我们对 DOM的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘

回流触发时机

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流

重绘触发时机

通过构造渲染树和重排（回流）阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(元素在视口内的位置和尺寸大小)，接下来就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘

触发回流一定会触发重绘

浏览器优化机制

• 由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列
• 当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的offsetTop等方法都会返回最新的数据
• 因此浏览器不得不清空队列，触发回流重绘来返回正确的值

GPU 加速的原因 ​

在合成的情况下，会直接跳过布局和绘制流程，直接进入非主线程处理的部分，即直接交给合成线程处理。交给它处理有两大好处:

1. 能够充分发挥GPU的优势。合成线程生成位图的过程中会调用线程池，并在其中使用GPU进行加速生成，而 GPU 是擅长处理位图数据的。
2. 没有占用主线程的资源，即使主线程卡住了，效果依然能够流畅地展示。

说说 will-change ​

will-change是CSS3新增的标准属性，它的作用很单纯，就是"增强页面渲染性能"，当我们在通过某些行为触发页面进行大面积绘制的时候，浏览器往往是没有准备，只能被动的使用 CUP 去计算和重绘，由于事先没有准备，对于一些复杂的渲染可能会出现掉帧、卡顿等情况。而will-change则是在真正的行为触发之前告诉浏览器可能要进行重绘了，相当于浏览器把 CUP 拉上了，能从容的面对接下来的变形。

常用的语法主要有：

• whil-change: scroll-position; 即将开始滚动
• will-change: contents; 内容要动画或者变化了
• will-transform; transform 相关的属性要变化了(常用)

注意：

• will-change虽然可以开启加速，但是一定要适度使用
• 开启加速的代价为手机的耗电量会增加
• 使用时遵循最小化影响原则，可以对伪元素开启加速，独立渲染
• 可以写在伪类中，例如hover中，这样移出元素的时候就会自动remove掉will-change了
• 如果使用JS添加了will-change，注意要及时remove掉，方式就是style.willChange = 'auto'

css 怎么开启硬件加速(GPU 加速) ​

浏览器在处理下面的 css 的时候，会使用 GPU 渲染

• transform（当 3D 变换的样式出现时会使用 GPU 加速）
• opacity
• filter
• will-change

• 采用 transform: translateZ(0)
• 采用 transform: translate3d(0, 0, 0)
• 使用 CSS 的 will-change属性。 will-change 可以设置为opacity、transform、top、left、bottom、right`

注意！层爆炸，由于某些原因可能导致产生大量不在预期内的合成层，虽然有浏览器的层压缩机制，但是也有很多无法进行压缩的情况，这就可能出现层爆炸的现象（简单理解就是，很多不需要提升为合成层的元素因为某些不当操作成为了合成层）。解决层爆炸的问题，最佳方案是打破 overlap 的条件，也就是说让其他元素不要和合成层元素重叠。简单直接的方式：使用 3D 硬件加速提升动画性能时，最好给元素增加一个 z-index 属性，人为干扰合成的排序，可以有效减少创建不必要的合成层，提升渲染性能，移动端优化效果尤为明显。

z-index 和 background 的覆盖关系 ​

移动端中 css 你是使用什么单位 ​

比较常用的：

• em：定义字体大小时以父级的字体大小为基准；定义长度单位时以当前字体大小为基准。例父级font-size: 14px，则子级font-size: 1em;为font-size: 14px;；若定义长度时，子级的字体大小如果为14px，则子级width: 2em;为width: 24px。
• rem：以根元素的字体大小为基准。例如html的font-size: 14px，则子级1rem = 14px。
• %：以父级的宽度为基准。例父级width: 200px，则子级width: 50%;height:50%;为width: 100px;height: 100px;
• vw和vh：基于视口的宽度和高度(视口不包括浏览器的地址栏工具栏和状态栏)。例如视口宽度为1000px，则60vw = 600px;
• vmin和vmax：vmin为当前vw 和vh中较小的一个值；vmax为较大的一个值。例如视口宽度375px，视口高度812px，则100vmin = 375px;，100vmax = 812px;

不常用的：

• ex和ch：ex以字符"x"的高度为基准；例如1ex表示和字符"x"一样长。ch以数字"0"的宽度为基准；例如2ch表示和 2 个数字"0"一样长。

移动端布局总结：

1. 移动端布局的方式主要使用 rem 和 flex，可以结合各自的优点，比如 flex 布局很灵活，但是字体的大小不好控制，我们可以使用 rem 和媒体查询控制字体的大小，媒体查询视口的大小，然后不同的上视口大小下设置设置html的font-size。
2. 可单独制作移动端页面也可响应式 pc 端移动端共用一个页面。没有好坏，视情况而定，因势利导

说说设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别 ​

• 无缩放情况下，1 个 CSS 像素等于 1 个设备独立像素
• 设备像素由屏幕生产之后就不发生改变，而设备独立像素是一个虚拟单位会发生改变
• PC 端中，1 个设备独立像素 = 1 个设备像素 （在100%，未缩放的情况下）
• 在移动端中，标准屏幕（160ppi）下 1 个设备独立像素 = 1 个设备像素
• 设备像素比（dpr） = 设备像素 / 设备独立像素
• 每英寸像素（ppi），值越大，图像越清晰

在移动端中怎样初始化根元素的字体大小 ​

一个简易版的初始化根元素字体大小。

页面开头处引入下面这段代码，用于动态计算font-size：

(假设你需要的1rem = 20px)

;(function () {
  var html = document.documentElement
  function onWindowResize() {
    html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px'
  }
  window.addEventListener('resize', onWindowResize)
  onWindowResize()
})()

;(function () {
  var html = document.documentElement
  function onWindowResize() {
    html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px'
  }
  window.addEventListener('resize', onWindowResize)
  onWindowResize()
})()

• document.documentElement：获取document的根元素
• html.getBoundingClientRect().width：获取html的宽度(窗口的宽度)
• 监听window的resize事件

一般还需要配合一个meta头：

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, minimum-sacle=1.0, maximum-scale=1.0, user-scalable=no"
/>

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, minimum-sacle=1.0, maximum-scale=1.0, user-scalable=no"
/>

移动端中不同手机 html 默认的字体大小都是一样的吗 ​

如果没有人为取改变根元素字体大小的话，默认是1rem = 16px；根元素默认的字体大小是16px。

line-height 如何继承 ​

• 父元素的 line-height 写了具体数值，比如 30px，则子元素 line-height 继承该值。
• 父元素的 line-height 写了比例，比如 1.5或 2，则子元素 line-height 也是继承该比例。
• 父元素的 line-height 写了百分比，比如 200%，则子元素 line-height 继承的是父元素 font-size * 200% 计算出来的值

如果要做优化，CSS 提高性能的方法有哪些？ ​

实现方式有很多种，主要有如下：

• 内联首屏关键 CSS

  • 在打开一个页面，页面首要内容出现在屏幕的时间影响着用户的体验，而通过内联css关键代码能够使浏览器在下载完 html 后就能立刻渲染
  • 而如果外部引用css代码，在解析html结构过程中遇到外部css文件，才会开始下载css代码，再渲染
  • 所以，CSS 内联使用使渲染时间提前
  • 注意：但是较大的css代码并不合适内联（初始拥塞窗口、没有缓存），而其余代码则采取外部引用方式

• 异步加载 CSS

  • 在 CSS 文件请求、下载、解析完成之前，CSS 会阻塞渲染，浏览器将不会渲染任何已处理的内容

  • 前面加载内联代码后，后面的外部引用 css 则没必要阻塞浏览器渲染。这时候就可以采取异步加载的方案，主要有如下：

    • 使用 javascript 将link标签插到head标签最后
    js

    // 创建link标签
    const myCSS = document.createElement('link')
    myCSS.rel = 'stylesheet'
    myCSS.href = 'mystyles.css'
    // 插入到header的最后位置
    document.head.insertBefore(
      myCSS,
      document.head.childNodes[document.head.childNodes.length - 1].nextSibling,
    )

    // 创建link标签
    const myCSS = document.createElement('link')
    myCSS.rel = 'stylesheet'
    myCSS.href = 'mystyles.css'
    // 插入到header的最后位置
    document.head.insertBefore(
      myCSS,
      document.head.childNodes[document.head.childNodes.length - 1].nextSibling,
    )

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    • 设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将 media 的值设为screen或all，从而让浏览器开始解析 CSS
    html

    <link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'" />

    <link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'" />

    1
    
    • 通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet
    html

    <link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'" />

    <link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'" />

    1
    

• 资源压缩

  • 利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间

• 合理使用选择器

  • css 匹配的规则是从右往左开始匹配，例如#markdown .content h3 匹配规则如下：
    • 先找到h3标签元素
    • 然后去除祖先不是.content的元素
    • 最后去除祖先不是#markdown的元素
  • 如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高
  • 所以我们在编写选择器的时候，可以遵循以下规则：
    • 不要嵌套使用过多复杂选择器，最好不要三层以上
    • 使用 id 选择器就没必要再进行嵌套
    • 通配符和属性选择器效率最低，避免使用

• 减少使用昂贵的属性

  • 在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能

• 不要使用@import

  • css 样式文件有两种引入方式，一种是link元素，另一种是@import
  • @import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时
  • 而且多个@import可能会导致下载顺序紊乱
  • 比如一个 css 文件index.css包含了以下内容：@import url("reset.css")
  • 那么浏览器就必须先把index.css下载、解析和执行后，才下载、解析和执行第二个文件reset.css

• 其他

  • 减少重排操作，以及减少不必要的重绘
  • 了解哪些属性可以继承而来，避免对这些属性重复编写
  • css Sprite，合成所有icon图片，用宽高加上 backgroud-position的背景图方式显现出我们要的icon图，减少了http请求
  • 把小的icon图片转成base64编码
  • CSS3 动画或者过渡尽量使用transform和 opacity来实现动画，不要使用left和top属性

如何实现单行／多行文本溢出的省略样式？ ​

对于文本的溢出，我们可以分成两种形式：

• 单行文本溢出

  • 涉及的 css 属性有：
    • text-overflow：规定当文本溢出时，显示省略符号来代表被修剪的文本
    • white-space：设置文字在一行显示，不能换行
    • overflow：文字长度超出限定宽度，则隐藏超出的内容
  • overflow设为hidden，普通情况用在块级元素的外层隐藏内部溢出元素，或者配合下面两个属性实现文本溢出省略
  • white-space:nowrap，作用是设置文本不换行，是overflow:hidden和text-overflow：ellipsis生效的基础
  • text-overflow 属性值有如下
    • clip：当对象内文本溢出部分裁切掉
    • ellipsis：当对象内文本溢出时显示省略标记（...）
  • text-overflow只有在设置了overflow:hidden和white-space:nowrap才能够生效的
  html

  <style>
      p{
          overflow: hidden;
          line-height: 40px;
          width:400px;
          height:40px;
          border:1px solid red;
          text-overflow: ellipsis;
          white-space: nowrap;
      }
  </style>
  <p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p >

  <style>
      p{
          overflow: hidden;
          line-height: 40px;
          width:400px;
          height:40px;
          border:1px solid red;
          text-overflow: ellipsis;
          white-space: nowrap;
      }
  </style>
  <p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p >

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  

• 多行文本溢出：多行文本溢出的时候，我们可以分为两种情况：

  • 基于高度截断

    • 伪元素 + 定位：核心的 css 代码结构如下：

      • position: relative：为伪元素绝对定位
      • overflow: hidden：文本溢出限定的宽度就隐藏内容）
      • position: absolute：给省略号绝对定位
      • line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数
      • height: 40px：设定当前元素高度
      • ::after {} ：设置省略号样式
      html

      <style>
        .demo {
          position: relative;
          line-height: 20px;
          height: 40px;
          overflow: hidden;
        }
        .demo::after {
          content: '...';
          position: absolute;
          bottom: 0;
          right: 0;
          padding: 0 20px 0 10px;
        }
      </style>
      <body>
        <div class="demo">这是一段很长的文本</div>
      </body>

      <style>
        .demo {
          position: relative;
          line-height: 20px;
          height: 40px;
          overflow: hidden;
        }
        .demo::after {
          content: '...';
          position: absolute;
          bottom: 0;
          right: 0;
          padding: 0 20px 0 10px;
        }
      </style>
      <body>
        <div class="demo">这是一段很长的文本</div>
      </body>

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      
      • 实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过 overflow: hidden 隐藏多余文字
      • 这种实现具有以下优点：
        • 兼容性好，对各大主流浏览器有好的支持
        • 响应式截断，根据不同宽度做出调整
      • 一般文本存在英文的时候，可以设置word-break: break-all使一个单词能够在换行时进行拆分

  • 基于行数截断：纯 css 实现也非常简单，核心的 css 代码如下：

    • -webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
    • display: -webkit-box：和 1 结合使用，将对象作为弹性伸缩盒子模型显示
    • -webkit-box-orient: vertical：和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
    • overflow: hidden：文本溢出限定的宽度就隐藏内容
    • text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本
    html

    <style>
      p {
        width: 400px;
        border-radius: 1px solid red;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
    <p>
      这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
      这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    </p>

    <style>
      p {
        width: 400px;
        border-radius: 1px solid red;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
    <p>
      这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
      这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    </p>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    • 可以看到，上述使用了webkit的 CSS 属性扩展，所以兼容浏览器范围是 PC 端的webkit内核的浏览器，由于移动端大多数是使用webkit，所以移动端常用该形式
    • 需要注意的是，如果文本为一段很长的英文或者数字，则需要添加word-wrap: break-word属性
    • 还能通过使用 javascript 实现配合 css，实现代码如下所示：
    css

    p {
      position: relative;
      width: 400px;
      line-height: 20px;
      overflow: hidden;
    }
    .p-after:after {
      content: '...';
      position: absolute;
      bottom: 0;
      right: 0;
      padding-left: 40px;
      background: -webkit-linear-gradient(left, transparent, #fff 55%);
      background: -moz-linear-gradient(left, transparent, #fff 55%);
      background: -o-linear-gradient(left, transparent, #fff 55%);
      background: linear-gradient(to right, transparent, #fff 55%);
    }

    p {
      position: relative;
      width: 400px;
      line-height: 20px;
      overflow: hidden;
    }
    .p-after:after {
      content: '...';
      position: absolute;
      bottom: 0;
      right: 0;
      padding-left: 40px;
      background: -webkit-linear-gradient(left, transparent, #fff 55%);
      background: -moz-linear-gradient(left, transparent, #fff 55%);
      background: -o-linear-gradient(left, transparent, #fff 55%);
      background: linear-gradient(to right, transparent, #fff 55%);
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    js

    $(function () {
      //获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
      $('p').each(function (i, obj) {
        var lineHeight = parseInt($(this).css('line-height'))
        var height = parseInt($(this).height())
        if (height / lineHeight > 3) {
          $(this).addClass('p-after')
          $(this).css('height', '60px')
        } else {
          $(this).removeClass('p-after')
        }
      })
    })

    $(function () {
      //获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
      $('p').each(function (i, obj) {
        var lineHeight = parseInt($(this).css('line-height'))
        var height = parseInt($(this).height())
        if (height / lineHeight > 3) {
          $(this).addClass('p-after')
          $(this).css('height', '60px')
        } else {
          $(this).removeClass('p-after')
        }
      })
    })

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13