CSS面试题
1:简述Chome盒模型与IE盒模型的区别
每个元素在页面中占位大小 = content + padding + margin + border
box-sizing:content-box将元素设置为标准盒模型：
Chrome盒模型内容大小等于content大小；
width(height)为元素内容区content宽高
盒子实际大小 = width height(内容区宽高)+padding+border
box-sizing:border-box将元素设置为怪异盒模型：
IE盒模型内容大小等于content + padding + border的总和。
我们设置的width,height就是元素的实际宽高
实际大小=width = 2*border+2*padding+内容区(content)
2:CSS单位
⑴px：绝对单位。页面按精确像素展示。
⑵em：相对单位，基准点为父节点字体的大小，如果自定义了font-size按自身的来算，整个页面内1em不是一个固定的值。
⑶rem：相对单位，相对于根节点html的font-size的大小来计算。
⑷vw：视窗宽度，1vw等于视窗宽度的1%。
⑸vh：视窗高度：1vh等于视窗高度的1%。
⑹vmin：以宽和高之间最短的一端为基准，如果宽>高，那么1vmin相当于宽的1%；
⑺vmax：以宽和高之间最长的一端为基准，如果宽>高，那么1vmax相当于宽的1%；
⑻%：百分比。
⑼pt：point，大约1/72寸，一寸=3.3333···厘米。
⑽pc：pica，大约6pt，1/6寸。
⑾ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算，IE11以下不支持。
⑿ch：以节点所使用字体中的“0”字符为基准，找不到时为0.5em。IE10以上支持。
3:BFC
`BFC全称”Block Formatting Context”`, 中文为“`块级格式化上下文`”。
BFC是块级格式化上下文。BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。
可以理解成：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流
特性：
① 内部的块级元素会在垂直方向上一个接一个的放置；
② 位于同一BFC下的相邻块级子元素在垂直方向上会发生margin重叠；
③ 位于不同BFC下的相邻元素之间不会发生margin重叠；
④ BFC可以包含浮动元素；
⑤ BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
创建：
① <html>根元素；
② float的值不为none
③ overflow的值为auto、scroll或hidden
④ display的值为:
table-cell：它会作为一个表格单元格显示（类似td和th）。
table-caption：此元素会作为一个表格标题显示。
inline-block：行内块元素。
⑤ position的值为fixed或absolute
用途：
① 闭合浮动；
② 阻止margin重叠
③ 自适应流体布局
4:什么是弹性布局？
解决某元素中“`子元素`”的布局方式，为布局提供最大的灵活性。
设为 `flex` 布局以后，子元素的 `float、clear` 和`vertical-align`属性将失效!!!
`display:flex`; 属性`align-self` 定义子元素的位置。
flex-direction:row //(默认)主轴为水平方向,起点在左端。
flex-direction:row-reverse //主轴为水平方向,起点在右端
flex-direction:column //使用后会使主轴变为y轴
flex-direction:column-reverse //主轴为垂直方向,起点在下沿。
flex-wrap:nowrap //(默认)不换行
flex-wrap:wrap //换行,第一行在上方
flex-wrap:wrap-reverse //换行,第一行在下方
flex-flow:该属性是flex-direction属性和flex-wrap属性的简写形式。
flex-flow:值1(主轴方向) 值2(是否换行)
flex-flow:row nowrap //(默认)
justify-content:flex-start //(默认)左对齐
justify-content:flex-end //右对齐
justify-content:center //居中(子元素紧凑居中)
justify-content:space-between; //两端对齐,项目之间的间隔都相等
justify-content:space-around; //每个项目两侧的间隔相等
align-items:flex-start //与交叉轴的起点对其
align-items:flex-end //与交叉轴的终点即末尾对其
align-items:center //与交叉轴的中点对其
align-items:baseline //项⽬的第⼀⾏⽂字的基线对齐
align-items:stretch //如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度
align-content属性,紧跟于flex-wrap属性后,该属性用于修饰flex-wrap属性
align-content:flex-start //与交叉轴的起点对齐
align-content:flex-end //与交叉轴的终点对其
align-content:center //与交叉轴的中点对齐
align-content:space-between //与交叉轴两端对齐，轴线之间的间隔平均分布
align-content:space-around //每根轴线两侧的间隔都相等
align-self:center
//允许单个元素与其他元素有不一样的对齐方式
//在弹性子元素上使用。覆盖容器的 align-items 属性。
order属性: (自定义子元素的显示顺序)
//用整数值来定义排列顺序，数值小的排在前面。可以为负值。
//注: 默认值为0。父元素必须设置为弹性盒模型
align-self:flex-start //默认
align-self:flex-end //终点
flex-grow属性:(定义弹性盒子元素的扩展比率)
//表示的是当容器有多余的空间时，这些空间在不同条目之间的分配比例
//比如，一个容器中有 3 个条目，其"flex-grow"属性的值分别为 1，2 和 3
//那么当容器中有空白空间时，这 3 个条目所获得的额外空白空间分别占
//全部空间的 1/6、1/3 和 1/2
flex-shrink属性:(定义弹性盒子元素的收缩比率)
//该属性的值也是无单位的,表示的是当容器的空间不足各个条目的尺寸缩小的比例。
//例如,在容器中有 3 个条目,其"flex-shrink"属性的值分别为 1，2 和 3。
//每个条目的主轴尺寸均为 200px。当容器的主轴尺寸不足 600px 时,
//比如变成了 540px 之后则需要缩小的尺寸 60px 由 3 个条目按照比例来分配。
//3 个条目分别要缩小 10px、20px 和 30px,
//主轴尺寸分别变为 190px、180px 和 170px
5:position有哪些属性？
**1. position: relative;相对定位**
**2. position: absolute;绝对定位**
**3. position: fixed;固定定位**
**4. position:static**：**默认值**
**5. position: sticky 粘性定位**
**6. position: inherit 规定应该从父元素继承 position 属性的值**
**7. position: initial 设置该属性为默认值**
6:什么是空元素？
即没有内容的HTML元素，例如：br、meta、hr、link、input、img
7:请说出1px，1rem，1vh，1em各自代表的含义？
**rem**
rem是全部的长度都相对于根元素`<html>`元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
**em** 元素用em的话是相对于该元素的font-size
**vw/vh**
全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。
**px**
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{1920 * 1024}等不同的分辨率，1920 * 1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
8:简述优雅降级与渐进增强
1、渐进增强（progressive enhancement）
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
2、优雅降级（graceful degradation）
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
3、区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给；渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
b. 渐进增强观点认为应该关注于内容本身，这使得渐进增强成为一种更为合理的设计范例；优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。
9:如何让一个盒子在页面垂直水平居中
**方法一：已知宽高**
```css
div{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
```
**方法二：未知宽高**
```css
div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
```
10:层叠上下文
层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
11:常见页面布局
⑴静态布局：最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。
优点：采用的是css2之前的写法,不存在浏览器兼容性。布局简单。
缺点：但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。
⑵流式布局：流式布局也叫百分比布局。随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。
优点：元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化。
缺点：屏幕尺度跨度过大的情况下，页面不能正常显示。
⑶弹性布局：弹性布局是CSS3引入的强大的布局方式，弹性盒模型：display：flex；
优点：简单、方便、快速
缺点：CSS3新特性,浏览器兼容性非常头疼。而且手机浏览器对flex的支持也不是很理想。
⑷响应式布局：采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局。利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。
12:CSS预处理，后处理
CSS预处理器：用一种编程语言，为CSS增加了一些编程的特性，最终编译出css文件。比如sass、less、stylus。
优点：语言级逻辑处理，动态特性，改善项目结构
缺点：采用特殊语法，框架耦合度高，复杂度高
实现原理： ①取到 DSL 源代码 的 分析树
②将含有 动态生成 相关节点的 分析树 转换为 静态分析树
③将 静态分析树 转换为 CSS 的 静态分析树
④将 CSS 的 静态分析树 转换为 CSS 代码
CSS后处理器：堆css进行处理，并最终生成css的预处理器，属于广义上的css预处理器，最典型的就是css压缩工具(clean-css)，流行的Autoprefixer，以Clean I Use上的浏览器支持数据为基础，自动处理兼容性问题
优点：使用 CSS 语法，容易进行模块化，贴近 CSS 的未来标准
缺点：逻辑处理能力有限实现原理：
①将 源代码 做为 CSS 解析，获得 分析树
②对 CSS 的 分析树 进行 后处理
③将 CSS 的 分析树 转换为 CSS 代码
13:display有哪些值
display：none 此元素不被显示。
display：block 此元素显示为块级元素，支持宽高，独占一行。
display：inline 此元素为内联元素，不支持宽高，不独占一行。
display：table 此元素作为块级表格来显示。
display：flex 此元素为弹性盒模型
display：list-item此元素会作为列表显示
14:相邻的两个inline-block节点为什么会出现间隔，该如何解决？
元素被当成行内元素排版的时候，原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。
这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。(不懂没关系，看下面解决方法就明白了)。
方法一：父级font-size：0；子级设置字体大小；
方法二：改变书写方式//原来
<span>1</span>
<span>2</span>
<span>3</span>
//改变
<span>1</span><span>2</span><span>3</span>
方法三：margin负值
方法四：设置父元素display：table；word-spacing：0(两个记得都要加上)；
15:meta viewport移动端适配
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
16:CSS实现宽度自适应100%，宽高16：9的比例的矩形
<style>
.box {
width: 100%;
}
.scale {
width: 100%;
padding-bottom: 56.25%;
height: 0;
/*height: 56.25vw;*/
position: relative;
}
.item {
width: 100%;
height: 100%;
background-color: aquamarine;
position: absolute;
}
</style>
<body>
<!-- 第一步先计算高度，假设宽100%，那么高为h=9/16=56.25%
第二步利用之前所说设置padding-bottom方法实现矩形 -->
<div class="box">
<div class="scale">
<!-- <p class="item">这是一个16：9的矩形</p> -->
<img src="http://img17.3lian.com/201612/16/88dc7fcc74be4e24f1e0bacbd8bef48d.jpg" class="item"/>
</div>
</div>
</body>
17:画三角形
```css
div{
width:0;
height:0;
border-top:50px solid transparent;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid red;
}
```
```html
<div> </div>
```
注：上述三角形为正三角形，如果想要倒三角形，那么将border-top的值设为50px solid red，其余的属性值相同。
18:1像素边框问题
物理像素：移动设备出厂时，不同设备自带的不同像素，也称硬件像素。
逻辑像素：即css中记录的像素。
为什么会有1像素边框问题：在开发中，在移动端css里面写了1px，实际看起来比1px粗。这就关系到物理像素和逻辑像素的问题了，
开发中UI设计师要求的1px是指设备的物理像素1px，而css里记录的像素是逻辑像素，它们之间存在一个比例关系，
可以用window.devicePixelRadio来获取，也可以用媒体查询的-webkit-min-device-pixel-ratio来获取，
比例的多少与设备相关。iphone的devicePixelRatio == 2，而我们设置的border：1px 描述的是设备的独立像素，
所以被放大到物理像素2px显示，在iphone上就显的比较粗。
解决方案：
⑴媒体查询利用设备像素比缩放，设置小数像素。
优点：简单，好理解。
缺点：兼容性差目前IOS8+才支持，IOS7以下、安卓系统都显示0px。
```css
.box{border:1px solid #333}
@media screen and (-webkit-min-device-pixel-ratio:2){
.box{border:1px solid #333}
}
@media screen and (-webkit-min-device-pixel-radio:3){
.border{border:0.333333px solid #333}
}
```
⑵设置border-image方案
缺点：需要制作图片，圆角可能会出现模糊。
```css
.border-image-1px{
border-width:1px 0px;
-webkit-border-image:url("border.png")2 0 strech;
border-image:url("border.png")2 0 stretch;
}
```
border-width：指定边框的宽度，可以设定四个值，分别为上右下左top right bottom left。
border-image：距离图片上方2px裁剪图片作为上边框，下方2px裁剪作为下边框。距离左右0像素裁剪图片即没有边框，以拉伸方式展示。
总结：在边框图片中，裁剪图片上下方的2个像素宽度作为上下边框，并展示在宽度为1个像素的边框空间里。左右没有边框。
⑶box-shadow方案
优点是没有圆角问题。
缺点是颜色不好控制。
```css
.box{
-webkit-box-shadow:0 1px 1px -1px rgba(0,0,0,.5);
}
```
参数：水平阴影位置，垂直阴影位置，模糊距离，阴影尺寸，阴影颜色，将外部阴影改为内部阴影。
⑷transform：scale(0.5)方案（推荐）：
以上的方案，思想其实都是将1px缩小为0.5px来展示，然而0.5px并不是所有的设备或浏览器都支持。
其实1像素问题的产生基本发生在设置边框或分割线的时候，场景并不覆盖全局样式，因此，直接缩放需要设置的元素，
才是我们真正需求的。transform就可以实现。
①设置height：1px，根据媒体查询结合transform缩放为相应的尺寸
```css
.box{
height:1px;
background:#333;
-webkit-transform:scaleY(0.5);
-webkit-transform-origin:0 0;
overflow:hidden;
}
```
②用: :after和: :before，设置border-bottom：1px solid #000；，然后缩放-webkit-transform：scaleY(0.5)；可以实现两根边线的需求；
```css
.box::after{
content:"";
width:100%;
border-bottom:1px solid #000;
transform:scaleY(0.5);
}
```
③用: :after设置border：1px solid #000；width：200%；height：200%；然后缩放scaleY(0.5)；优点可以实现圆角京东就是这么实现的，缺点是按钮添加active比较麻烦。
```css
.div::after {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
-webkit-transform-origin: top left;
}
```
19:前端性能优化方案
1、减少DOM操作
2、部署前，图片压缩，代码压缩
3、优化js代码结构，减少冗余代码
4、减少http请求，合理设置HTTP缓存
5、使用内容分发cdn加速
6、静态资源缓存
7、图片延迟加载
20:css3有哪些特性
```text
border-radius 圆角
box-shadow 阴影
text-shadow 文字阴影
gradient 线性渐变
transform 旋转、缩放、移动或倾斜 scale 缩放
transition 过渡 translate 位移
animation 动画 使用@keyframes定义，使用的元素animation：名字 时间；
媒体查询 @media
多栏布局
多背景
弹性盒子 flex
```
```text
@keyframes changeWidth{
0%{width:100px}
100%{width:800px}
}
div{
width:100px;
height:100px;
background:red;
animation:changeWidth 10s forwards;
}
```
21:css选择器及优先级顺序
!important > 内联样式 > id选择器 > class选择器 > 属性选择器 > 伪类选择器（: hover） > 标签选择器 > 伪元素（: before） > 通配符选择器
可继承的属性：
font-size、
font-family、
color
不可继承的属性：
border、
padding、
margin、
width、
height
权重值：
!important权重值：10000，
内联样式：1000，
id选择器：100
class、伪类、属性、伪元素选择器：10
标签选择器：1
后代选择器的权重为包含的选择符权重值之和。
CSS3新增的伪类：
p：first-of-type：选择属于其父元素的首个元素；
p：last-of-type：选择属于其父元素的最后元素；
p：only-of-type：选择属于其父元素的唯一元素；
p：only-child：选择属于其父元素的唯一子元素；
p：nth-child（1）：选择属于其父元素的第一个子元素；
：enabled：disabled：表单控件d的禁用状态；
：checked：单选框h或复选框被选中；
22:CSS3新增的伪类有哪些？
```css
p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
```
23:em、rem的区别
- em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
- rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素
24:解释csssprites，如何使用。
Css精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
25:伪类和伪元素的区别
1）伪类(pseudo-classes)
其核⼼就是⽤来选择DOM树之外的信息,不能够被普通选择器选择的⽂档之外的元素，⽤来添加⼀些选择器的特殊效果。
⽐如:hover :active :visited :link :visited :first-child :focus :lang等
由于状态的变化是⾮静态的，所以元素达到⼀个特定状态时，它可能得到⼀个伪类的样式；当状态改变时，它⼜会失去这个样式。
由此可以看出，它的功能和class有些类似，但它是基于⽂档之外的抽象，所以叫 伪类。
2）伪元素(Pseudo-elements)
DOM树没有定义的虚拟元素
核⼼就是需要创建通常不存在于⽂档中的元素，
⽐如::before ::after 它选择的是元素指定内容，表示选择元素内容的之前内容或之后内容。
伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于⽂档中，所以称为伪元素。⽤于将特殊的效果添加到某些选择器
3）伪类与伪元素的区别
表示⽅法
CSS2 中伪类、伪元素都是以单冒号:表示,
CSS2.1 后规定伪类⽤单冒号表示,伪元素⽤双冒号::表示，
浏览器同样接受 CSS2 时代已经存在的伪元素(:before, :after, :first�line, :first-letter 等)的单冒号写法。
CSS2 之后所有新增的伪元素(如::selection)，应该采⽤双冒号的写法。
CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。浏览器对以:开头的伪元素也继续⽀持，但建议规范书写为::开头
定义不同
伪类即假的类，可以添加类来达到效果
伪元素即假元素，需要通过添加元素才能达到效果
总结:
伪类和伪元素都是⽤来表示⽂档树以外的"元素"。
伪类和伪元素分别⽤单冒号:和双冒号::来表示。
伪类和伪元素的区别，关键点在于如果没有伪元素(或伪类)，
是否需要添加元素才能达到效果，如果是则是伪元素，反之则是伪类。
4）相同之处：
伪类和伪元素都不出现在源⽂件和DOM树中。也就是说在html源⽂件中是看不到伪类和伪元素的。 不同之处：
伪类其实就是基于普通DOM元素⽽产⽣的不同状态，他是DOM元素的某⼀特征。
伪元素能够创建在DOM树中不存在的抽象对象，⽽且这些抽象对象是能够访问到的。
26:浏览器工作原理
1. 用户界面 、
2. 网络 、
3. UI后端 、
4. 数据存储 、
5. 浏览器引擎 、
6. 渲染引擎 、
7. js解释器
27:如何实现0.5px边框
1、border+border-image+linear-gradient的方式
<div class="border"></div>
.border{
width:200px;
height: 200px;
background-color: red;
margin: 0 auto ;
border-bottom: 1px solid blue;
border-image: linear-gradient( to bottom,transparent 50%,Green 50%) 0 0 100% 0 ;
}
2、伪元素+background-image的方式
<div class="border"></div>
.border {
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
position: relative;
}
.border:before {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100px;
height: 1px;
background-color: blue;
background-image: linear-gradient(to bottom transparent 50%, blue 50%);
}
3、定位+伪元素+transfrom缩放(scale)的方式
<div class="border"></div>
.border {
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
position: relative;
}
28:less和sass的区别
Less是基于JavaScript，是在客户端处理的；Sass是基于Ruby的，是在服务器端处理的。
关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。
输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
Sass支持条件语句，可以使用if{}else{},for{}循环等等，而Less不支持。
29:页面导入样式时，使用link和@import有什么区别
1、link属于XHTML标签，除了加载CSS外，还能用于定义RSS（简易信息聚合，是一种基于XML标准，在互联网上被广泛采用的内容包装和投递协议），rel连接属性等作用；@import是CSS提供的，只能用于加载CSS；
2、页面被加载时，link会同时被加载；而@import引用的CSS会等到页面被加载完成后再加载；
3、link是XHTML标签，没有兼容问题；而@import只有在IE5以上才能被识别；
4、link支持使用JavaScript控制DOM修改样式；而@import不支持。
30:浏览器是如何渲染UI的？
1. 浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree
2. 与此同时，进行CSS解析，生成Style Rules
3. 接着将DOM Tree与Style Rules合成为 Render Tree
4. 接着进入布局（Layout）阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标
5. 随后调用GPU进行绘制（Paint），遍历Render Tree的节点，并将元素呈现出来
31:重绘与重排
1、重绘
重绘是一个元素外观的改变所触发的浏览器行为（例如改变visibility，outline，background等属性），浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
2、重排
重排时更明显的一种改变，可以理解为渲染树需要重新计算。常见的触发重排的操作：
- DOM元素的几何属性变化
- DOM树的结构变化（例如节点的增减、移动）
- 获取某些属性（例如offsetTop，offsetLeft，offsetHeight，offsetWidth，clientWidth，clientHeight等）
- 改变元素的一些样式（例如调整浏览器窗口大小）
3、两者的区别
- 重绘不会带来重新布局，并不一定伴随着重排。
- 在实践中，应该尽量减少重排次数和缩小重排的影响范围。有以下几种方法：
- [ ] 将多次改变样式属性的操作合并成一次操作
- [ ] 将需要多次重排的元素，position属性设为absolute或fixed，使其脱离文档流，这样它的变化就不会影响到其他元素
- [ ] 在内存中多次操作节点，完成后再添加到文档中去
- [ ] 如果要对一个元素进行复杂的操作，可以将其display属性设置为none使其隐藏，待操作完成后再显示
- [ ] 在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量
32:解释下浮动和它的工作原理？清除浮动的方法
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
①给设置了浮动的元素的父级加高。
②给设置了浮动的元素的父级设置overflow：hidden。如果需要兼容IE，在添加一个zoom：1
③给需要清除浮动的元素设置clear：both；
④在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
⑤伪类清除：
.clearfix：after{content：""；clear：both；display：block；}
.clearfix{zoom：1}
```html
<div class="container clearfix">
<div class="box"></div>
</div>
<div class="main "></div>
```
```css
.box{
width:100px;
height:100px;
background:yellow;
float: left;
}
.main{
width:150px;
height: 150px;
background:red;
}
.clearfix:after{
content: "";
clear: both;
display: block;
}
.clearfix{
zoom:1;
}
```
33:如何实现浏览器内多个标签页之间的通讯
**1. 定时器setInterval + cookie**
在页面A设置一个使用 **setInterval 定时器不断刷新，检查 Cookies 的值是否发生变化**，如果变化就进行刷新的操作。
由于 **Cookies 是在同域可读**的，所以在页面 B 审核的时候改变 Cookies 的值，页面 A 自然是可以拿到的。
这样做确实可以实现我想要的功能，但是这样的方法相当浪费资源。虽然在这个性能过盛的时代，浪费不浪费也感觉不出来，但是这种实现方案，确实不够优雅。
**2. 使用localstorage **
localstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信(ps：session是会话级的存储空间，每个标签页都是单独的）。
直接在window对象上添加监听即可：
```js
window.onstorage = (e) => {console.log(e)}
// 或者这样
window.addEventListener('storage', (e) => console.log(e))
```
onstorage以及storage事件，针对都是**非当前页面**对localStorage进行修改时才会触发，当前页面修改localStorage不会触发监听函数。然后就是在对原有的数据的值进行修改时才会触发，比如原本已经有一个key会a值为b的localStorage，你再执行：localStorage.setItem('a', 'b')代码，同样是不会触发监听函数的
34:为什么要初始化css样式
1.浏览器差异
不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异
2.提高编码质量
前页面修改localStorage不会触发监听函数。然后就是在对原有的数据的值进行修改时才会触发，比如原本已经有一个key会a值为b的localStorage，你再执行：localStorage.setItem(‘a’, ‘b’)代码，同样是不会触发监听函数的
34:为什么要初始化css样式
1.浏览器差异
不同浏览器对有些标签的默认值是不同的，如果没对css初始化会出现浏览器之间的页面显示差异
2.提高编码质量
如果不初始化，整个页面做完会很糟糕，重复的css样式很多
35:一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
（1）图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
（2）如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
（3）如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
（4）如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。
36:如何进行seo优化？
1、合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可；description把页面内容高度概括，不可过分堆砌关键词；keywords列举出重要关键词。
2、语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
3、重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，保证重要内容一定会被抓取
4、重要内容不要用js输出：爬虫不会执行js获取内容
5、少用iframe：搜索引擎不会抓取iframe中的内容
6、非装饰性图片必须加alt属性
7、提高网站速度：网站速度是搜索引擎排序的一个重要指标。
扫一扫
648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
