前端面试题整理 - css

标题1、BFC?

   边距重叠解决方案：content-box  border-box
   满足下列条件就会触发BFC
1、根元素  即html
2、Float的值不为none
3、Overflow的值不为visible
4、Display的值为inline-block，table-cell、table-caption

标题2、Css哪些样式可以继承？

可继承的样式：font-size, font-family, color，ul，li，dl，dt，dd
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

标题3、解释一下css3的flex布局，以及应用场景

对容器中的条目进行布局，对齐、分配空间
适用于移动端开发

标题4、常见的兼容性问题？

1、不同浏览器默认的padding和margin是不一样的，加一个全局的*｛margin:0;padding:0｝来统一
2、png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8

标题5、写出几种IE6bug解决方法

1、双边距 float 引起的，使用display
2、3像素问题，使用float引起的，使用display:inline -3px
3、超链接hover点击后失效，使用正确的顺序：link  visited  hover  active
4、Ie  zIndex 问题 给父级添加 position:relative
5、Png透明，使用js改
6、Min-height 最小高度 !important
7、Select在ie6下遮盖，使用iframe嵌套
8、没有办法定义1px的容器，ie6默认的行高决定的，使用overflow:hidden,zoom:0.08,line-height:1px
9、Ie6不支持!important

标题6、position 跟 display、overflow、float 这些特性相互叠加后会怎么样？

类似优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

标题7、清除浮动的方式

1、父级div 定义height
2、最后一个浮动元素加空div，添加样式clear:both
3、包含浮动元素的父标签添加样式overflow:hidden 或auto
4、父级div定义zoom
5、用after伪元素清除浮动（用于非IE浏览器）

标题8、设置元素浮动后，该元素的display值是多少

Display:block

标题9、什么是预处理器/后处理器？大家为什么要使用他们？

预处理器：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率
后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
结构清晰，便于扩展，
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

标题10、浏览器是怎样解析css选择器的？

Css的解析是从右向左解析，避免对所有元素进行遍历

标题11、link标签和import标签的区别?

Link属于html，而import属于css
页面被加载时，link会同时被加载，而import会等页面加载完成后加载
Link是html标签，因此没有兼容性，而import只有ie5以上才能被识别
Link的权限高于import的

12、