前端面试题总结（二）CSS篇
一、link和@import的区别？
- link属于HTML标签，可以引入出css以外的事务，如RSS，而@import是css提供的，只能加载css文件。
- link会在页面加载同时加载，@import会等到页面加载完成再加载。
- import只在IE5以上才能识别，link五兼容性问题。
- link防止的样式权重，高于@import的权重。
- link可以使用JavaScript控制dom改变样式，@import不可以。
二、常见兼容性？
- png24位的图片在IE6浏览器上会出现背景（做成png8）。
- 浏览器默认的margin和padding不同（加一个全局的样式padding：0;margin：0;）。
- IE6双边距（块元素浮动后，又有横向margin情况下，在IE6显示的margin比设置的大）。
- 设置子元素与父元素之间的外间距时会产生塌陷（给父元素设置浮动或overflow，尽量使用padding）。
- 浮动IE产生的双倍距离（#box{ float:left; 10px; margin:0 0 0 100px;}）。
- 上下margin重合问题
- ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
- 解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
- 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active。
- 3像素问题 使用float引起的 使用dislpay:inline -3px。
- Ie z-index问题 给父级添加position:relative。
- Min-height 最小高度 ！Important 解决’。
- select 在ie6下遮盖 使用iframe嵌套。
- 为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）。
- 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有哪些新特性？
- 圆角。(border-radius)
- 阴影。(box-shadow/text-shadow)
- 渐变。(gradient)
- 旋转、定位、缩放、倾斜。(transform:rotate/translate/scale/skew)
- 增加了更多选择器。
- 多背景。
- rgba。
- 动画。
- 媒体查询。
- 多栏布局与盒布局。
- 新的盒模型计算方式（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共同点与不同点？
共同点：
- 改变行内元素的呈现方式，display被设置为block。
- 让元素脱离正常文档流，不占据空间。
- 默认会覆盖到非定位元素上。
不同点：
absolute的根元素是可以设置的，非fixed的根元素固定为浏览器窗口。当滚动页面时，fixed元素与浏览器窗口直接的距离是不变的。
八、为什么要初始化样式？“reset.css”的作用和使用它的好处。
- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。但是会对SEO有一定的影响，但鱼与熊掌不可兼得，但力求影响最小的情况下初识话。
- 初始化CSS样式主要是提高编码质量，如果不初始化整个页面做完很糟糕，重复的CSS样式很多。去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。
- 浏览器品种很多，每个浏览器默认样式也不同，所以定义一个reset.css可以使浏览器默认样式统一。
九、CSS Sprites是什么？如何使用？
其实就是把网页中一些背景图整合一张图片文件中，再利用css的background进行背景定位。可以减少图片请求的开销。但是请求虽然可以并发，一般浏览器都只有6个。但是对于未来而言，就不需要这样了，因为有了http2。
十、解释下浮动、以及其工作原理？清除浮动的技巧。
- 浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或浮动元素的边框停留。
- 浮动会导致父元素高度塌陷，与浮动元素同级的非浮动元素会跟随其后，若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
- 清除浮动：浮动元素后面使用空标签设置clear:both，父元素使用overflow，父元素浮动，父元素设置固定高，使用after伪对象清除。
十一、position:absoiute和float的异同？
- 共同点：对内联元素设置absoiute和float属性，可以让元素脱离文档流，并且可以设置其宽高。
- 不同点：float仍会占用位置，absolute会覆盖文档流中的其他元素。
十二、zoom:1清除浮动的原理？
- 触发hasLayout。
- zoom属性是IE浏览器的专有属性，可以设置或检索对象的缩放比例。解决IE下比较奇葩的bug。当设置zoom的值后，所设置的元素就会扩大或缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了IE下子元素浮动时父元素不随着自动扩大的问题。
十三、什么是css Hack？
一般来说是针对不同浏览器写不同的css就是css Hack。
IE浏览器Hack又分为三种，条件、属性级、选择符。
十四、less与sass和scss？以及区别？
- 他们是动态的样式语言，是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。
- 变量符不一样，less是@，而Sass是$;
- Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持;
- Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器
十五、什么是css预处理、后处理？
预处理如less、sass、stylus用来预编译sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
后处理如PostCSS，通常被视为在完成的样式表中根据css规范处理css，让其更有效；目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
十六、书写高效css时会有哪些问题？
- 样式：从右往左的解析一个选择器。
- ID最快，依次是ID、class、tag、universal。
- 不要tag-qualify（tag#id），ID已经是唯一了，不需要tag来标识，这样做会让选择器变慢。
- 后代选择器最糟糕。
- 知道为什么这么写。
- css3的效率问题（css3的选择器能很快的定位到想要的元素，又保证了代码整洁易读，但是会浪费很多的浏览器资源）。
- 我们知道ID速度是最快的，但不能为了效率而牺牲可读性和可维护性。
十七、你用过媒体查询，或针对移动端的布局/CSS嘛？
媒体查询，就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让css可以更精确作用于不同的媒介类型和同一媒介的不同条件。
语法结构：@media 设备名 only(选取条件) not(选取条件) and(设备选取条件),设备二{sRules};
十八、如果设计中使用了非标准字体，你该如何实现？
所谓的标准字体是多数机器上都会有的，或者即使没有也可以由默认字体代替的字体。
- 用图片代替。
- web fonts在线字库。
- @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定位原点是？
- block 象块类型元素一样显示。
-
- none 缺省值。向行内元素类型一样显示。
- inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
- list-item 象块类型元素一样显示，并添加样式列表标记。
2. position的值
-
- absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
- fixed （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。
- relative：生成相对定位的元素，相对于其正常位置进行定位。
- static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
- inherit 规定从父元素继承 position 属性的值。
二十三、知道css有个content属性吗？有什么作用？有什么应用？
- css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。
- 知道css计数器（序列数字字符自动递增）吗？如何通过css content属性实现css计数器？
-
- css计数器是通过设置counter-reset、counter-increment两个属性、及 counter()/counters()一个方法配合after/before 伪类实现
二十四、有哪项方式可以对一个DOM设置它的CSS样式？
- 外部样式表，引入一个外部css文件 内部样式表，将css代码放在 <head> 标签内部内联样式，将css样式直接定义在 HTML 元素内部
二十五、对BFC规范的理解？
- BFC，块级格式化上下文，以创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关）的margin会发生折叠。
- w3c css2.1规范中的一个概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。
二十六、什么是FOUC（无样式内容闪烁）？如何避免FOUC？
- FOUC(Flash Of Unstyled Content)——文档样式闪烁。
- 而引用css文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的dom，然后再去导入外部的css文件，因此，在页面dom加载完成到css导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短和网速、电脑速度有关。解决方法是在head之间加入一个link标签或script标签。或者是把@import换成link引入。