十五道css面试题

目录

1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

2.CSS 中哪些属性可以继承？

3.CSS3 新增伪类有那些？

4、请解释一下 CSS3 的 Flexbox（弹性盒布局模型），以及适用场景？

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

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

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

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

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

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

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

12、word-spacing 与单词间距？

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

14、列举一些CSS框架？

15、什么是块级格式化上下文（BFC），如何工作？

---

1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

相关知识点：

（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）
（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分
 
IE盒模型和W3C标准盒模型的区别：
 
（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding
（2）IE盒模型：属性width，height包含content、border和padding，指的是content
+padding+border。
 
在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型；
如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE
盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。

盒模型都是由四个部分组成的，分别是margin、border、padding和content。
 
标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的
范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。
 
一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。

2.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关键字用于显式地
指定继承性，可用于任何继承性/非继承性属性。

3.CSS3 新增伪类有那些？

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