前端开发必备：CSS高频面试题解析与答案

1 、display:none; 和visibility:hidden;的区别

display:none; 彻底消失， 释放空间 。能引发页面的reflow回流 ( 重排) 。

visibility:hidden ; 就是隐藏 ，但是位置没释放， 好比 opacity:0; 不引发页面回流。

2 、CSS 优先级和权重值如何计算

内嵌样式>内部样式>外部样式>导入式 ！important > 内嵌 1000 >Id 100 > class=[]=伪类 10 > tag=伪元素 1 > ( * + > ~) 0

3、如何触发BFC， 以及BFC的作用

BFC：块级格式化上下文block formatting context， 是⼀个独立渲染区域 。规定了内部box如何布局， 并且与这个区域外部毫不相干。 触发： float 的值不是 none； position 的值不是 static 或者 relative；display 的值是 inline-flex；overflo w 的值不是 visible 。 作用：避免margin重叠； 自适应两栏布局；清除浮动。

4 、CSS盒模型

盒模型由：外边距margin 、边框border 、内边距padding 、内容content四个部分组成 标准盒模型大小=border+padding+content 怪异盒模型大小=content 转怪异盒模型：box-sizing:border-box; 转标准盒模型：box-sizing:content-box;

5 、如何水平垂直居中⼀个元素

5-1 、弹性盒子

display:flex; 
justify-content:center; 
align-items:center; 

5-2 、定位

.box .sub{ 
transform: translate(-50%, -50%); 
/*margin-left: 负的宽度的⼀半*/ 
/*margin-top: 负的高度的⼀半*/ 

6 、css实现⼀个三角形

triangle{   width: 0;   height: 0;   border: 100px solid transparent;   bo
rder-left-color: red; } 

7、如何实现左边固定宽，右边自适应布局

7-1 、圣杯布局

1  <div id="container">
2  <div id="center" class="column"></div>
3  <div id="left" class="column"></div>
4  <div id="right" class="column"></div>
5  </div>
6  #container {
7    padding-left: 200px;
8    padding-right: 150px;
9   }
10  #container .column {
11    float: left;
12   }
13  #center {
14    width: 100%;
15   }
16  #left {
17    width: 200px;
18    margin-left: -100%;
19    position: relative;
20     right: 200px;
21   }
22  #right {
23    width: 150px;
24    margin-right: -150px;
25  }

7-2 、双飞翼布局

1  <div id="container" class="column">
2      <div id="center"></div>
3    </div>
4    <div id="left" class="column"></div>
5     <div id="right" class="column"></div>
6   #container {
7      width: 100%;
8    }
9
10
11  .column {
12    float: left;
13  }
14
15  #center {
16    margin-left: 200px;
17    margin-right: 150px;
18  }
19
20  #left {
21    width: 200px;
22    margin-left: -100%;
23  }
24
25  #right {
26    width: 150px;
27    margin-left: -150px;
28  }

7-3 、等高布局 (假等高) 互补的内外边距

1  .parent{
2    overflow: hidden;
3   }
4  .left, .right{
5    margin-bottom: -10000px;
6    padding-bottom: 10000px;
7  }

7-4 、等高布局 ( 真等高) 弹性盒子

1   .parent{
2    display: flex;
3  }
4   .child{
5    flex: 1;
6  }

7-5 、calc

<div id="left" class="column"></div>
<div id="center" class="column"></div>
<div id="right" class="column"></div>
.column{
float: left;
}
#left{
width:
}
#right{
width:
}
#center{
width:
}	
100px;
200px;
calc(100% - 100px - 200px);
}

7-6 、浮动

1  <div id="left" class="column"></div>
2  <div id="right" class="column"></div>
3  <div id="center"></div>
4  <style>
5  #left{
6  float: left;
7  width: 100px;
8   }
9  #right{
10  float: right;
11  width: 200px;
12   }
13  #center{
14  margin-left: 100px;
15  margin-right: 200px;
16  }
17  </style>

8、如何实现6px字体

.font{   font-size: 12px;   transform: scale(.5); } 

9 、移动端1px边框怎么设置

1  /* 方法1 */
2  .border{
3  width: 100%;
4  height: 1px;
5  background: red;
6  }
7  /* 方法2 */
8  .border{
9  border-image: url(border.png)
10  }
11  /* 方法3 */
12  .border{
13  box-shadow: 0 0 0 1px #000;
14  }

10 、px、em、rem、vh、vw分别是什么

px物理像素， 绝对单位；em相对于自身字体大小， 如果自身没有大小则相对于父级字体大小， 如果父级 也没有则⼀层⼀层向上查找， 直到找到html为止， 相对单位；rem相对于html的字体大小， 相对单位；vh 相对于屏幕高度的大小， 相对单位；vw相对于屏幕宽度的大小， 相对单位。

11 、css可继承的属性有哪些

可继承的属性：文本类：text-indent 、text-align 、line-height 、word-spacing 、letter-spacing、 text-transform 、direction 、color； 字体类：font 、font-family 、font-weight 、font-size 、font-style 、font-variant 、font-stretch、 font-size-adjust； 其它类：visibility 、caption-side 、border-collapse 、border-spacing 、empty-cells 、table-layout、 list-style-type 、list-style-image 、list-style-position 、list-style 、quotes 、cursor 、page 、page- break-inside 、windows 、orphans等

12 、margin 和 padding 在什么场合下使用

margin：用来调整盒子到盒子之间的距离，不会撑大显示的区域，但是会影响到别 的盒子 使用场景：需要在 border 外侧添加空白时；空白处不需要背景 ( 色) 时；上下 相连的两个盒子之间的空白， 需要相互抵消时； padding：用来调整子元素 ( 内容) 在父元素 ( 盒子) 内的位置，会把盒子撑大， 如 果不想被撑大，要在原来宽高的基础上减去对应方向的 padding 值 使用场景：需要在 border 内测添加空白时；空白处需要背景 ( 色) 时；上下相 连的两个盒子之间的空白， 希望等于两者之和时；

13、Css 选择器有哪些， 哪些属性可以继承，优先级

1  • css 选择器
2  o id 选择器  (  # myid)
3  o 类选择器  ( .myclassname)
4  o 标签选择器  ( div, h1, p)
5  o 相邻选择器  ( h1 + p)
6  o 子选择器  ( ul > li)
7  o 后代选择器  ( li a)
8  o 通配符选择器  (  * )
9  o 属性选择器  ( a[rel = “external”])
10  o 伪类选择器  ( a: hover, li: nth - child)  11  • 可以继承
12  o 字体类：
13  1. font-family：字体类型；
14  2. font-weight:字体加粗；
15  3. font-size:字体大小
16  4. font-style: 字体样式
17  5. text-indent: 缩进  ( 只对块级元素生效)
18  6. text-align:对齐方式
19  7. line-height:行高
20  8. word-spacing:字之间的距离；
21  9. letter-spacing:字符之间的距离；
22  10.text-decoration:文本修饰
23  o 文本类:
24  1. color:颜色
25  o 列表：
26  17
27  1. list-style-type:列表类型
28  2. list-style-image:图标路径
29  3. list-style-position:图标的位置
30  4. list-style:none;去掉列表符号
31   优先级就近原则 ，  样式定义最近者为准; 载入样式以最后载入的定位为准;

14 、网页中有大量图片加载很慢你有什么办法进行优化？

图片懒加载，在页面上的未可视区域可以添加⼀个滚动条事件， 判断图片位置与浏 览器顶端 的距离与页面的距离， 如果前者小于后者，优先加载 如果为幻灯片 、相册等， 可以使用图片预加载技术，将当前展示图片的前⼀张和后⼀张优先下 载 如果图片为 css 图片， 可以使用 CSSsprite (精灵图)， SVGsprite (精灵图)， Iconfont( 字体图标)(精灵图，小图标 … )

如果图片过大， 可以使用特殊编码的图片，加载时会先加载⼀张压缩的特别厉害的 缩略图， 以提高用户体验 如果图片展示区域⼩于图片的真实大⼩ ，则应该在服务器端根据业务需要先⾏进⾏ 图片压 缩， 图片压缩后大⼩与展示⼀致

15 、怎么实现标签的禁用

style=“pointer-events: none” 

16 、flex 布局原理

flex 是 flexible Box 的缩写， 意为“弹性布局”，用来为盒状模型提供最大的灵活性， 任何⼀个 容器都可以指定为flex 布局 。当为父盒⼦设置为flex 布局之后， ⼦元素的float 、clear 、vertical- align 属性将失效。 采用flex 布局的元素，称为flex 容器 (flex container)， 简称“容器”。他的所有⼦元 素自动 成为容器成员，称为flex 项目 (flex item)， 简称“项目”。 总结：flex 布局就是通过给父盒⼦添加 flex 属性，来控制⼦盒⼦的位置和排列⽅式。

17 、网页的三层结构有哪些

网页的结构层： 由 HTML 或 XHTML 之类的标记语⾔负责创建 。标签，也就是那些出现在尖括 号里的单词， 对⽹页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息 。例 如， P 标签表达了这样⼀种语义：“这是⼀个⽂本段 。” 网页的样式层： 该层指示结构化 HTML ⽂档如何看待⽹站的访问者， 并由 CSS ( 层叠样式表) 定义 。这些⽂ 件包含有关如何在 Web 浏览器中显示⽂档的样式说明 。样式层通常包括基于屏幕大⼩和设备更改 站点显示的媒体查询 。⽹站的所有视觉样式都应 位于外部样式表中 网页的行为层： ⾏为层使⽹站具有交互性， 允许页面响应用户操作或基于⼀组条件进⾏更改 。JavaScript 是⾏ 为层最常用的语⾔ ，但 CGI 和 PHP 也经常被使用 。当开发⼈员引用⾏为层时，大多数都是指在 Web 浏览器中直接激活的层。

18、CSS 中哪些属性可以继承？

有继承性的属性： ( 1) 字体系列属性 font 、font-family 、font-weight 、font-size 、font-style 、font-variant 、font-stretch 、font- size-adjust (2) 文本系列属性 text-indent 、text-align 、text-shadow 、line-height 、word-spacing 、letter-spacing、 text-transform 、direction 、color (3) 表格布局属性：caption-sideborder-collapseempty-cells (4) 列表属性： list-style-type 、list-style-image 、list-style-position 、list-style ( 5) 光标属性：cursor ( 6) 元素可见性：visibility (7) 还有⼀些不常用的：speak， page， 设置嵌套引用的引号类型quotes等属性 注意： 当⼀个属性不是继承属性时， 可以使用inherit关键字指定⼀个属性应从父元素继承它的值， inherit关键字用于显式地 指定继承性， 可用于任何继承性/非继承性属性。

19 、CSS3 新增伪类有那些？

19-1. elem:nth-child(n)选中父元素下的第n个子元素， 并且这个子元素的标签名为elem， n可以接受具 体的数 值， 也可以接受函数。 19-2. elem:nth-last-child(n)作用同上，不过是从后开始查找。 19-3. elem:last-child选中最后⼀个子元素。 19-4. elem:only-child如果elem是父元素下唯⼀的子元素 ，则选中之。 19-5. elem:nth-of-type(n)选中父元素下第n个elem类型元素， n可以接受具体的数值， 也可以接受函 数。 19-6. elem:first-of-type选中父元素下第⼀个elem类型元素。 19-7. elem:last-of-type选中父元素下最后⼀个elem类型元素。 19-8. elem:only-of-type如果父元素下的⼦元素只有⼀个elem类型元素 ，则选中该元素。 37-9. elem:empty选中不包含⼦元素和内容的elem类型元素。 19-10. elem:target选择当前活动的elem元素。 19-11. :not(elem)选择非elem元素的每个元素。 19-12. :enabled 控制表单控件的禁用状态。 19-13. :disabled 控制表单控件的禁用状态。 19-14. :checked单选框或复选框被选中。

20 、浏览器是怎样解析 CSS 选择器的？

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

21、在网页中应该使用奇数还是偶数的字体？为什么呢？

21-1 、偶数字号相对更容易和web设计的其他部分构成比例关系 。比如： 当我用了14px的正⽂字号， 我 可能会在⼀些地⽅用14×0.5=7px的margin ，在另⼀些地⽅用14×1.5=21px的标题字号。 21-2 、浏览器缘故 ，低版本的浏览器ie6会把奇数字体强制转化为偶数， 即13px渲染为14px 。 39-3 、系统差别， 早期的Windows里， 中易宋体点阵只有12和14 、15 、16px， 唯独缺少13px。

22 、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]

可以把常用的css样式单独做成css文件 ……通用的和业务相关的分离出来， 通用的做成样式模块 儿共享，业务相关的，放进业务相关的库里面做成对应功能的模块儿。

23 、为什么不建议使用统配符初始化 css 样式

采用*{pading:0;margin:0;}这样的写法好处是写起来很简单 ，但是是通配符， 需要把所有的标签都遍 历⼀遍， 当网站较大时， 样式比较多， 这样写就大大的加强了网站运行的负载 ，会使网站加载的时候需 要很长⼀段时间， 因此⼀般大型的网站都有分层次的⼀套初始化样式。 出于性能的考虑， 并不是所有标签都会有padding和margin， 因此对常见的具有默认padding和 margin的元素初始化即可， 并不需使用通配符*来初始化。

24、如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz， 即1秒刷新60次，所以理论上最小间隔为1/60*1000ms＝16.7ms

25 、有⼀个高度自适应的 div，里面有两个 div，⼀个高度 100px，希望另⼀ 个填满剩下的高度

25-1 、外层div使用position：relative；高度要求自适应的div使用 position:absolute;top:100px;bottom:0; left:0;right:0; 25-2 、使用flex布局， 设置主轴为竖轴， 第⼆个div的flex-grow为1。

26、常见的元素隐藏方式？

26-1 、使用 display:none;隐藏元素， 渲染树不会包含该渲染对象， 因此该元素不会在页面中占据位置， 也不会响应绑定的监听事件。 26-2 、使用 visibility:hidden;隐藏元素 。元素在页面中仍占据空间 ，但是不会响应绑定的监听事件。 26-3 、使用 opacity:0;将元素的透明度设置为 0， 以此来实现元素的隐藏 。元素在页面中仍然占据空间， 并且能够响应元素绑定的监听事件。 26-4 、通过使用绝对定位将元素移除可视区域内， 以此来实现元素的隐藏。 26-5 、通过 z-index 负值， 来使其他元素遮盖住该元素， 以此来实现隐藏。 26-6 、通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏， 这种方法下， 元素仍在页面中占据位 置 ，但是不会响应绑定的监听事件。 26-7 、通过 transform:scale(0,0)来将元素缩放为 0， 以此来实现元素的隐藏 。这种方法下， 元素仍在页 面中占据位置 ，但是不会响应绑定的监听事件。

27 、word-spacing 与单词间距？

letter-spacing作用于所有字符，但word-spacing仅作用于空格字符 。换句话说，word- spacing的作用就是增加空格的间隙宽度。

28 、隐藏元素的 background-image 到底加不加载？

根据测试， ⼀个元素如果display计算值为none ，在IE浏览器下( IE8~ IE11， 更高版本不确定) 依然 会发送图片请求， Firefox浏览器不会， 至于Chrome和Safari浏览器则似乎更加智能⼀点：如果隐藏元素 同时⼜设置了background-image ，则图片依然会去加载；如果是父元素的display计算值为none ，则背 景图不会请求 ，此时浏览器或许放⼼地认为这个背景图暂时是不会使用的。 如果不是background-image， 而是元素 ，则设置display:none在所有浏览器下依旧都会请求 图片资源。 还需要注意的是如果设置的样式没有对应的元素 ，则background-image也不会加载 。hover情况下 的background-image ，在触发时加载。

29、列举⼀些CSS框架？

Bootstrap：是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML 、CSS 、 JavaScript 开发的简洁 、直观 、强悍的前端开发框架 ，使得 Web 开发更加快捷 。Bootstrap提供了优雅 的HTML和CSS规范， 它即是由动态CSS语⾔Less写成。 Layui：是⼀款采用自身模块规范编写的前端 UI 框架， 遵循原生 HTML/CSS/JS 的书写与组织形式， 门 槛极低， 拿来即用 。其外在极简， 体积轻盈， 组件丰盈， 非常适合界面的快速开发。 ElementUI：⼀套为开发者 、设计师和产品经理准备的基于 Vue 2.0的桌面端组件库。 antd：是基于 Ant Design 设计体系的 React UI 组件库， 主要用于研发企业级中后台产品 。开箱即用的 高质量 React 组件， 全链路开发和设计工具体系， 数⼗个国际化语⾔支持。

30 、什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？

边距重叠：两个box如果都设置了边距， 那么在垂直方向上，两个box的边距会发生重叠， 以绝对值大的 那个为最终结果显示在页面上。 边距重叠分为两种： 同级关系的重叠： 同级元素在垂直方向上外边距会出现重叠情况， 最后外边距的大⼩取两者绝对值大的那个 父子关系的边距重叠： 嵌套崩塌 父⼦关系， 如果⼦元素设置了外边距 ，在没有把父元素变成BFC的情况下， 父元素也会产生外边距。 给父元素添加overflow：hidden 这样父元素就变为 BFC，不会随⼦元素产生外边距。

31 、行内元素可以设置padding， margin吗？

行内元素的margin左右有效，上下无效。 行内元素的padding左右有效 ，但是由于设置padding上下不占页面空间， 无法显示效果 ，所以无效。

32、那么BFC的原理 ( 规则) 是什么呢？

内部的Box会在垂直方向上⼀个接⼀个的放置 垂直方向上的距离由margin决定 。 ( 完整的说法是：属于同⼀个BFC的两个相邻Box的margin会发生重 叠 (塌陷)，与方向无关 。) 每个元素的左外边距与包含块的左边界相接触 (从左向右)， 即使浮动元素也是如此 。 ( 这说明BFC中 ⼦元素不会超出他的包含块， 而position为absolute的元素可以超出他的包含块边界) BFC的区域不会与float的元素区域重叠 计算BFC的高度时， 浮动⼦元素也参与计算 BFC就是页面上的⼀个隔离的独立容器， 容器里面的⼦元素不会影响到外面元素， 反之亦然

33 、BFC由什么条件创立?

float属性不为none position属性为absolute或fixed display属性为inline-block 、table-cell 、table-caption 、flex 、inline-flex overflow属性不为visible ( overflow: auto/ hidden;)

34 、BFC的使用场景

34-1 、清除元素内部浮动 只要把父元素设为BFC就可以清理⼦元素的浮动了， 最常见的用法就是在父元素上设置overflow:hidden 样式， 对于IE6加上zoom:1就可以了。 主要用到：计算BFC的高度时， 自然也会检测浮动或者定位的盒⼦高度。 34-2 、解决外边距合并问题(嵌套崩塌) 外边距合并的问题。 主要用到：盒⼦垂直方向的距离由margin决定 。属于同⼀个BFC的两个相邻盒⼦的margin会发生重叠属 于同⼀个BFC的两个相邻盒⼦的margin会发生重叠， 那么我们创建不属于同⼀个BFC， 就不会发生 margin重叠了。 34-3 、制作右侧自适应的盒⼦问题 主要用到：普通流体元素BFC后， 为了和浮动元素不产生任何交集， 顺着浮动边缘形成自⼰的封闭上下 文

35 、CSS 优化、提高性能的方法有哪些？

加载性能： css压缩：将写好的css进行打包压缩， 可以减⼩文件体积。 css单⼀样式： 当需要下边距和左边距的时候， 很多时候会选择使用margin-left:20px;margin- bottom:30px; 减少使用@import， 建议使用link， 因为后者在页面加载时⼀起加载， 前者是等待页面加载完成之后再进 行加载。 选择器性能： 关键选择器 ( key selector) 。选择器的最后面的部分为关键选择器 ( 即用来匹配目标元素的部分) 。 CSS选择符是从右到左进行匹配的 。当使用后代选择器的时候， 浏览器会遍历所有⼦元素来确定是否是 指定的元素等等； 如果规则拥有ID选择器作为其关键选择器 ，则不要为规则增加标签 。过滤掉无关的规则 ( 这样样式系统 就不会浪费时间去匹配它们了) 。 尽量少的去对标签进行选择， 而是用class。 尽量少的去使用后代选择器， 降低选择器的权重值 。后代选择器的开销是最高的 ，尽量将选择器的深度 降到最低， 最高不要超过三层， 更多的使用类来关联每⼀个标签元素。 了解哪些属性是可以通过继承而来的， 然后避免对这些属性重复指定规则。 渲染性能： 属性值为0时，不加单位。 可以省略⼩数点之前的0。 标准化各种浏览器前缀：带浏览器前缀的在前 。标准属性在后。 选择器优化嵌套 ，尽量避免层级过深。 css雪碧图， 同⼀页面相近部分的小图标， 方便使用， 减少页面的请求次数 ，但是同时图片本身会变大， 使用时， 优劣考虑清楚， 再使用。 不滥用web字体 。对于中文网站来说WebFonts可能很陌生， 国外却很流行 。web fonts通常体积庞大， 而且⼀些浏览器在下载web fonts时会阻塞页面渲染损伤性能。 可维护性 、健壮性： 将具有相同属性的样式抽离出来， 整合并通过class在页面中进行使用， 提高css的可维护性。 样式与内容分离：将css代码定义到外部css中。

36 、元素的层叠顺序？

层叠顺序， 英文称作 stackingorder， 表示元素发生层叠时有着特定的垂直显示顺序 。下面是盒模型的层 叠规则：

对于上图， 由上到下分别是： 背景和边框：建立当前层叠上下文元素的背景和边框。 负的z-index： 当前层叠上下文中 ，z-index属性值为负的元素。 块级盒：文档流内非行内级非定位后代元素。 浮动盒：非定位浮动元素。 行内盒：文档流内行内级非定位后代元素。 z-index:0：层叠级数为0的定位元素。 正z-index：z-index属性值为正的定位元素。 注意: 当定位元素z-index:auto， 生成盒在当前层叠上下文中的层级为 0，不会建立新的层叠上下文， 除 非是根元素。

37 、box-sizing属性？

用来控制元素的盒子模型的解析模式， 默认为content-box context-box：W3C的标准盒子模型， 设置元素的 height/width 属性指的是 content 部分的高/宽 border-box： IE 传统盒子模型 。设置元素的 height/width 属性指的是 content + border + padding 部分的高/宽

38 、display 有哪些值？说明他们的作用?

inline 默认 。此元素会被显示为内联元素， 元素前后没有换行符。 block 此元素将显示为块级元素 ，此元素前后会带有换行符。 none 此元素不会被显示 ( 隐藏) 。 inline-block 行内块元素 。 ( CSS2.1 新增的值) list-item 此元素会作为列表显示。 table 此元素会作为块级表格来显示 ( 类似table)， 表格前后带有换行符

39 、position 的值？

absolute 生成绝对定位的元素， 相对于 static 定位以外的第⼀个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成固定定位的元素， 相对于浏览器窗口进行定位 。 ( 老IE不支持) 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素， 相对于其正常位置进行定位，不脱离文档流。 因此， "left:20" 会向元素的 LEFT 位置添加 20 像素。 static 默认值 。没有定位， 元素出现在正常的文档流中 ( 忽略 top, bottom, left, right 或者 z-index 声明) 。 inherit: 规定应该从父元素继承 position 属性的值。

40 、什么是CSS 预处理器 / 后处理器？大家为什么要使用他们？

预处理器例如： LESS 、Sass 、Stylus， 用来预编译Sass或less， 增强了css代码的复用性， 还有层级、 mixin 、变量 、循环 、函数等， 具有很方便的UI组件模块化开发能⼒ ， 极大的提高⼯作效率。 后处理器例如： PostCSS， 通常被视为在完成的样式表中根据CSS规范处理CSS， 让其更有效； 目前最 常做的是给CSS属性添加浏览器私有前缀， 实现跨浏览器兼容性的问题。 CSS 预处理器为 CSS 增加⼀些编程的特性， 无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用 变量 、简单的逻辑程序 、函数 ( 如右侧代码编辑器中就使用了变量$color) 等等在编程语⾔中的⼀些基 本特性， 可以让你的 CSS 更加简洁 、适应性更强 、可读性更佳， 更易于代码的维护等诸多好处。 其它 CSS 预处理器语⾔：

• Sass (SCSS)
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

为什么要使用它们？

• 结构清晰， 便于扩展。
• 可以方便地屏蔽浏览器私有语法差异 。这个不用多说， 封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。
• 可以轻松实现多重继承。
• 完全兼容 CSS 代码， 可以方便地应用到老项目中 。LESS 只是在 CSS 语法上做了扩展 ，所以老的
• CSS 代码也可以与 LESS 代码⼀同编译。

41 、CSS优化、提高性能的方法有哪些？

• 避免过度约束
• 避免后代选择符
• 避免链式选择符
• 使用紧凑的语法
• 避免不必要的命名空间
• 避免不必要的重复
• 最好使用表示语义的名字 。⼀个好的类名应该是描述他是什么而不是像什么
• 避免！ important， 可以选择其他选择器
• 尽可能的精简规则 ，你可以合并不同类里的重复规则
• 修复解析错误
• 避免使用多类选择符
• 移除空的css规则
• 正确使用display的属性： 由于display的作用， 某些样式组合会无效， 徒增样式体积的同时也影响解析性能。
• display:inline后不应该再使用width 、height 、margin 、padding以及float。
• display:inline-block后不应该再使用float。
• display:block后不应该再使用vertical-align。
• display:table-*后不应该再使用margin或者float。
• 不滥用浮动：虽然浮动不可避免 ，但不可否认很多css bug是由于浮动而引起。
• 不滥用web字体
• 对于中文⽹站来说Web Fonts可能很陌生， 国外却很流⾏ 。web fonts通常体积庞大， 而且⼀些浏* 览器在下载web fonts时会阻塞⻚⾯渲染损伤性能。
• 不声明过多的font-size：这是设计层⾯的问题， 设计精良的⻚⾯不会有过多的font-size声明。 不在* * 选择符中使用ID标识符， 主要考虑到样式重用性以及与⻚⾯的耦合性。
• 不给h1~h6元素定义过多的样式
• 全站统⼀定义⼀遍heading元素即可 ，若需额外定制样式， 可使用其他选择符作为代替。 不重复定义h1~h6元素值为0时不需要任何单位
• 标准化各种浏览器前缀：通常将浏览器前缀置于前⾯， 将标准样式属性置于最后， 类似：

.foo{    -moz-border-radius: 5px;    border-radius: 5px; }

• 使用CSS渐变等高级特性， 需指定所有浏览器的前缀
• 避免让选择符看起来像正则表达式
• CSS3添加了⼀些类似~=等复杂属性， 也不是所有浏览器都支持， 需谨慎使用。
• 遵守盒模型规则 ( Beware of broken box models)

##42、强制换行的css是什么？ Word-break:break-all;

42、rem 缺点

有局限性， IE8 及以下版本不支持 对 pc 页面来讲使用次数不多 数据量大：所有的图片 、盒子都需要给⼀个准确的值，才能保证不同机型的适配；