web前端面试之CSS不常用问题（码动未来）

2.4.1、为什么要初始化CSS样式。

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法：* {padding: 0; margin: 0;}（强烈不建议）

淘宝的样式初始化代码：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }

2.4.2、absolute的containing block(容器块)计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的position值不为 static 的元素，然后再判断：

1、若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；

2、否则,则由这个祖先元素的 padding box 构成。

如果都找不到，则为initial containing block。

补充：

1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）

2. absolute:向上找最近的定位为absolute/relative的元素

3. fixed:它的containing block一律为根元素(html/body)，根元素也是initial containing block

2.4.3、CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。

在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。

在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。

2.4.4、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

浏览器默认的margin和padding不同。解决方案是加一个全局的{margin:0;padding:0;}来统一。

IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

css

      .bb{

background-color:#f1ee18;/*所有识别*/

.background-color:#00deff\9; /*IE6、7、8识别*/

+background-color:#a200ff;/*IE6、7识别*/

_background-color:#1e0bd1;/*IE6识别*/

      }

IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

IE下,even对象有x,y属性,但是没有pageX,pageY属性;

Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

Chrome中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序:L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

2.4.5、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

这个题目应该能拆成几个点来回答：

1、'display'、'position' 和 'float' 的相互关系；

1）、display 属性规定元素应该生成的框的类型。 block 象块类型元素一样显示，none 缺省值。象行内元素类型一样显示， inline-block 象行内元素一样显示，但其内容象块类型元素一样显示，list-item 象块类型元素一样显示，并添加样式列表标记

2）、position 属性规定元素的定位类型。 absolute表示生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；fixed（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位；relative生成相对定位的元素，相对于其正常位置进行定位；static  默认值。没有定位，元素出现在正常的流中

3）、Float也是是一种布局方式，它定义元素在哪个方向浮动。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 在布局过程中也经常会使用它来达到左右并排布局的效果

2、position跟display、overflow、float下的margin collapse。

把它看作是一个类似优先级的机制，"position:absolute"和 "position:fixed" 优先级最高，有它存在的时候，浮动不起作用，'display' 的值也需要调整； 其次，元素的 'float' 特性的值不是 "none" 的时候或者它是根元素的时候，调整 'display' 的值； 最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display' 特性值同设置值。

2.4.6、对BFC规范(块级格式化上下文：block formatting context)的理解？

（W3C CSS 2.1规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。

不同类型的Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

2.4.7、css定义的权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/*权重为1*/

div{

}

/*权重为10*/

.class1{

}

/*权重为100*/

#id1{

}

/*权重为100+1=101*/

#id1 div{

}

/*权重为10+1=11*/

.class1 div{

}

/*权重为10+10+1=21*/

.class1 .class2 div{

}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

2.4.8、移动端的布局用过媒体查询吗

css的媒体查询允许通过@media标签为特定媒体的浏览器设定样式，其中包含众多筛选，功能强大。 @media (min-width: 700px) { ... }

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

加载性能：比如不要用import啊，压缩啊等等，主要是从减少文件体积、减少阻塞加载、提高并发方面入手的，任何 hint 都逃不出这几个大方向。

渲染性能：渲染性能是CSS优化最重要的关注对象。页面渲染 junky 过多？看看是不是大量使用了 text-shadow？是不是开了字体抗锯齿？CSS 动画怎么实现的？合理利用 GPU 加速了吗？什么你用了 Flexible Box Model？有没有测试换个 layout 策略对 render performance 的影响？这个方面搜索一下 CSS render performance 或者 CSS animation performance 也会有一堆一堆的资料可供参考。

可维护性、健壮性：命名合理吗？结构层次设计是否足够健壮？对样式进行抽象复用了吗？优雅的CSS不仅仅会影响后期的维护成本，也会对加载性能等方面产生影响。这方面可以多找一些 OOCSS（不是说就要用 OOCSS，而是说多了解一下）等等不同 CSS Strategy 的信息，取长补短。

1、可重用性：一般来说，一个项目的整体设计风格是一致的，页面中肯定有几个风格一致但有些许不同的模块，如何在尽可能多地重用CSS代码，尽可能少地增加新代码，这是CSS代码中非常重要的一点。如果CSS代码的重用性高，我们可能只需要写一些不一样的地方，对页面性能和可维护性、提高开发效率都有很大的帮助。

2、可扩展性：如果产品增加了某个功能，我们应该保证新增加的CSS代码不会影响到旧的CSS代码和页面，并且尽可能少地增加新代码而重用旧代码。

3、可修改性：如果某个模块产品经理觉得要修改样式，或者要删掉它，如果没有规划好相应的CSS代码，过了一段时间之后，开发人员可能已经不记得这段代码作用了几个地方，不敢修改或删除它，这样下去CSS代码也就越来越多，影响了页面的性能，还造成了代码的复杂度。

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

浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。

2.4.11、介绍一下Sass和 Less 是什么？它们有何区别？

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。

Less一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。

区别：

(1))Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。

(2)变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。

(3)输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

(4)Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

2.4.12、如何修改chrome记住密码后自动填充表单的黄色背景

可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景

input:-webkit-autofill {

     -webkit-box-shadow: 0 0 0px 1000px white inset;

}

2.4.13、怎么让Chrome支持小于12px 的文字

可以使用到css3里的一个属性：transform:scale()

属性介绍可以戳这里：http://www.w3chtml.com/css3/properties/2d-transform/transform.html

这个属性前给-webkit-谷歌前缀，那么就可以控制字体的大小

<style>

p{font-size:10px;-webkit-transform:scale(0.8);}

/*这里的数字0.8，是缩放比例，可以根据情况变化。*/

</style>

中梦测试10px</p>

2.4.14、让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）

CSS3里面加入了一个“-webkit-font-smoothing”属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。加上之后就顿时感觉页面小清晰了。

2.4.15、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

png:意为可移植网络图形格式(Portable Network Graphic Format)

动画它不支持动画

无损耗性png是一种无损耗的图像格式，这也意味着你可以对png图片做任何操作也不会使  得图像质量产生损耗。这也使得png可以作为jpeg编辑的过渡格式

水平扫描像GIF一样，png也是水平扫描的，这样意味着水平重复颜色比垂直重复颜色的图片更小

间隔渐进显示它支持间隔渐进显示，但是会造成图片大小变得更大

JPEG代表Joint Photograhic Experts Group（联合图像专家组），这种格式经常写成JPG，JPG图片的扩展名为jpg。

JPG最主要的优点是能支持上百万种颜色，从而可以用来表现照片。此外，由于JPG图片使用更有效的有损压缩算法，从而使文件长度更小，下载时间更短。有损压缩会放弃图像中的某些细节，以减少文件长度。它的压缩比相当高，使用专门的JPG压缩工具其压缩比可达180：1，而且图像质量从浏览角度来讲质量受损不会太大，这样就大大方便了网络传输和磁盘交换文件。JPG较GIF更适合于照片，因为在照片中损失一些细节不像对艺术线条那么明显。另外，JPG对照片的压缩比例更大，而最后的质量也更好。

GIF意为Graphics Interchange format（图形交换格式），GIF图片的扩展名是gif。现在所有的图形浏览器都支持GIF格式，而且有的图形浏览器只熟悉GIF格式。GIF是一种索引颜色格式，在颜色数很少的情况下，产生的文件极小，它的优点主要有：

1.GIF格式支持背景透明。GIF图片假如背景色设置为透明，它将与浏览器背景相结合，生成非矩形的图片。

2.GIF格式支持动画。在Flash动画出现之前，GIF动画可以说是网页中唯一的动画形式。GIF格式可以将单帧的图象组合起来，然后轮流播放每一帧而成为动画。虽然并不是所有的图形浏览器都支持GIF动画，但是最新的图形浏览器都已经支持GIF动画。

3.GIF格式支持图形渐进。渐进是指图片渐渐显示在屏幕上，渐进图片将比非渐进图片更快地出现在屏幕上，可以让访问者更快地知道图片的概貌。

4.GIF格式支持无损压缩。无损压缩是不损失图片细节而压缩图片的有效方法，由于GIF格式采用无损压缩，所以它更适合于线条、图标和图纸。

5.水平扫描   Gif是使用了一种叫作LZW的算法进行压缩的，当压缩gif的过程中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小

GIF格式的缺点同样相当明显。索引颜色是历史遗留的产物，在DOS下的老游戏几乎无一例外的采用索引颜色，这种格式本来早就应该淘汰了。但是由于带宽的限制，GIF从DOS时代红到了Internet时代。GIF这种索引颜色格式最大的缺点就是它只有256种颜色，这对于照片质量的图片是显然不够的。

2.4.16、什么是Cookie隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。

因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，提高了webserver的http请求的解析速度。

2.4.17、什么是CSS预处理器 / 后处理器？

预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

2.4.18、style标签写在body后与body前有什么区别？

页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，如果CSS代码放在后面页面可能出现闪跳或白屏的感觉，或者页面很丑直到css加载完成。放在前面是常规写法

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

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

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

把CSS分为公共CSS和业务CSS。模块化的CSS就是公共部分的CSS

2.4.21、什么叫做响应式？

针对不用的屏幕显示不同的网页布局，比如说大屏幕手机、小屏幕手机、平板能够适应不同的屏幕来显示网站

2.4.22、针对不同屏幕的响应式，UI设计师该做几套设计图？

只做一套，大多UI设计师会使用iPhone5的尺寸来做一套（640X1136）。那么这种可以适配响应式的各种屏幕的吗？这种在HTML5中通过代码中的媒体查询来实现。媒体查询怎么写？媒体查询的具体写法如下：@media screen and (max-width:640px) { //最大宽度是640px的屏幕宽度nav li {                             //nav标签下的li标签设置样式display: inline;            //转化为行元素              }}

QQ技术交流群:815302226