前端面试题总结（二）CSS篇

前端面试题总结（二）CSS篇

一、link和@import的区别？

1. link属于HTML标签，可以引入出css以外的事务，如RSS，而@import是css提供的，只能加载css文件。
2. link会在页面加载同时加载，@import会等到页面加载完成再加载。
3. import只在IE5以上才能识别，link五兼容性问题。
4. link防止的样式权重，高于@import的权重。
5. link可以使用JavaScript控制dom改变样式，@import不可以。

二、常见兼容性？

1. png24位的图片在IE6浏览器上会出现背景（做成png8）。
2. 浏览器默认的margin和padding不同（加一个全局的样式padding：0;margin：0;）。
3. IE6双边距（块元素浮动后，又有横向margin情况下，在IE6显示的margin比设置的大）。
4. 设置子元素与父元素之间的外间距时会产生塌陷（给父元素设置浮动或overflow，尽量使用padding）。
5. 浮动IE产生的双倍距离（#box{ float:left; 10px; margin:0 0 0 100px;}）。
6. 上下margin重合问题
7. 　　ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
8. 　　解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
9. 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active。
10. 3像素问题 使用float引起的 使用dislpay:inline -3px。 
11. Ie z-index问题 给父级添加position:relative。
12. Min-height 最小高度 ！Important 解决’。
13. select 在ie6下遮盖 使用iframe嵌套。
14. 为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）。
15. IE5-8不支持opacity，解决办法：

1 2 3 4 5 6

.opacity { 　　opacity: 0.4 　　filter: alpha(opacity=60); /* for IE5-7 */ 　　-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";         /* for IE 8*/ }

　　

三、css3有哪些新特性？

1. 圆角。(border-radius)
2. 阴影。(box-shadow/text-shadow)
3. 渐变。(gradient)
4. 旋转、定位、缩放、倾斜。(transform:rotate/translate/scale/skew)
5. 增加了更多选择器。
6. 多背景。
7. rgba。
8. 动画。
9. 媒体查询。
10. 多栏布局与盒布局。
11. 新的盒模型计算方式（box-sizing）。

四、css3的新增伪类举例？

　　first-of-type、first-child、last-child、last-of-type、only-child、nth-child、enabled、checked、only-of-type、roo。。。。
　　唯一的伪元素：::selection。

五、什么是css层叠？

　　css层叠式针对同一元素配置同一属性，权重高。

六、display:none和visibility:hidden的区别？

　　display:none隐藏元素，在文档布局中不在给它分配空间，它个边的元素会合拢，就当他从来不存在。
　　visibility:hidden隐藏元素，但是在文档布局中仍保留原来的空间。

七、position的absolute和fixed共同点与不同点？
　　共同点：

1. 1. 改变行内元素的呈现方式，display被设置为block。
   2. 让元素脱离正常文档流，不占据空间。
   3. 默认会覆盖到非定位元素上。

　　不同点：
　　　　　　absolute的根元素是可以设置的，非fixed的根元素固定为浏览器窗口。当滚动页面时，fixed元素与浏览器窗口直接的距离是不变的。

八、为什么要初始化样式？“reset.css”的作用和使用它的好处。

1. 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。但是会对SEO有一定的影响，但鱼与熊掌不可兼得，但力求影响最小的情况下初识话。
2. 初始化CSS样式主要是提高编码质量，如果不初始化整个页面做完很糟糕，重复的CSS样式很多。去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。
3. 浏览器品种很多，每个浏览器默认样式也不同，所以定义一个reset.css可以使浏览器默认样式统一。

九、CSS Sprites是什么？如何使用？

　　其实就是把网页中一些背景图整合一张图片文件中，再利用css的background进行背景定位。可以减少图片请求的开销。但是请求虽然可以并发，一般浏览器都只有6个。但是对于未来而言，就不需要这样了，因为有了http2。

十、解释下浮动、以及其工作原理？清除浮动的技巧。

1. 浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或浮动元素的边框停留。
2. 浮动会导致父元素高度塌陷，与浮动元素同级的非浮动元素会跟随其后，若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
3. 清除浮动：浮动元素后面使用空标签设置clear:both，父元素使用overflow，父元素浮动，父元素设置固定高，使用after伪对象清除。

十一、position:absoiute和float的异同？

• 共同点：对内联元素设置absoiute和float属性，可以让元素脱离文档流，并且可以设置其宽高。
• 不同点：float仍会占用位置，absolute会覆盖文档流中的其他元素。

十二、zoom:1清除浮动的原理？

1. 触发hasLayout。
2. zoom属性是IE浏览器的专有属性，可以设置或检索对象的缩放比例。解决IE下比较奇葩的bug。当设置zoom的值后，所设置的元素就会扩大或缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了IE下子元素浮动时父元素不随着自动扩大的问题。

十三、什么是css Hack？

　　一般来说是针对不同浏览器写不同的css就是css Hack。
　　IE浏览器Hack又分为三种，条件、属性级、选择符。

十四、less与sass和scss？以及区别？

1. 他们是动态的样式语言，是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。
2. 变量符不一样，less是@，而Sass是$;
3. Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持;
4. Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器

十五、什么是css预处理、后处理？

　　预处理如less、sass、stylus用来预编译sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
　　后处理如PostCSS，通常被视为在完成的样式表中根据css规范处理css，让其更有效；目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

十六、书写高效css时会有哪些问题？

1. 样式：从右往左的解析一个选择器。
2. ID最快，依次是ID、class、tag、universal。
3. 不要tag-qualify（tag#id），ID已经是唯一了，不需要tag来标识，这样做会让选择器变慢。
4. 后代选择器最糟糕。
5. 知道为什么这么写。
6. css3的效率问题（css3的选择器能很快的定位到想要的元素，又保证了代码整洁易读，但是会浪费很多的浏览器资源）。
7. 我们知道ID速度是最快的，但不能为了效率而牺牲可读性和可维护性。

十七、你用过媒体查询，或针对移动端的布局/CSS嘛？

　　媒体查询，就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让css可以更精确作用于不同的媒介类型和同一媒介的不同条件。
　　语法结构：@media 设备名 only(选取条件) not(选取条件) and(设备选取条件),设备二{sRules};

十八、如果设计中使用了非标准字体，你该如何实现？

　　所谓的标准字体是多数机器上都会有的，或者即使没有也可以由默认字体代替的字体。

1. 用图片代替。
2. web fonts在线字库。
3. @font-facs，webfonts。

十九、解释下浏览器是如何判断元素是否匹配某个css选择器？

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

二十、超链接访问过后hover样式就不出现的问题是什么？如何解决？

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

二十一、css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

• 垂直方向：line-height
• 水平方向：letter-spacing
• letter-spacing的妙用知道有哪些么？
• 可以用于消除inline-block元素间的换行符空格间隙问题

二十二、列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

1. block 象块类型元素一样显示。

• • none 缺省值。向行内元素类型一样显示。
  • inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
  • list-item 象块类型元素一样显示，并添加样式列表标记。

　　 2. position的值

• • absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  • fixed （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。
  • relative：生成相对定位的元素，相对于其正常位置进行定位。
  • static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
  • inherit 规定从父元素继承 position 属性的值。

二十三、知道css有个content属性吗？有什么作用？有什么应用？

1. css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。
2. 知道css计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？

• • css计数器是通过设置counter-reset、counter-increment两个属性、及 counter()/counters()一个方法配合after/before 伪类实现

二十四、有哪项方式可以对一个DOM设置它的CSS样式？　

1. 外部样式表，引入一个外部css文件
内部样式表，将css代码放在 <head> 标签内部内联样式，将css样式直接定义在 HTML 元素内部

二十五、对BFC规范的理解？

1. BFC，块级格式化上下文，以创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关）的margin会发生折叠。
2. w3c css2.1规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。

二十六、什么是FOUC（无样式内容闪烁）？如何避免FOUC？

• FOUC(Flash Of Unstyled Content)——文档样式闪烁。
• 而引用css文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的dom，然后再去导入外部的css文件，因此，在页面dom加载完成到css导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短和网速、电脑速度有关。解决方法是在head之间加入一个link标签或script标签。或者是把@import换成link引入。