目录

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单选框或复选框被选中。

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

Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
 
任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
 
采用Flex布局的元素，称为Flex容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称"项目"。
 
容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（crossaxis），项目默认沿主轴排列。
 
 
以下6个属性设置在容器上。
 
flex-direction属性决定主轴的方向（即项目的排列方向）。
 
flex-wrap属性定义，如果一条轴线排不下，如何换行。
 
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row  nowrap。
 
justify-content属性定义了项目在主轴上的对齐 方式。
 
align-items属性定义项目在交叉轴上如何对齐。
 
align-content属性定义了多根轴线的对齐方式。 如果项目只有一根轴线，该属性不起作用。
 
 
以下6个属性设置在项目上。
 
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
 
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
 
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
 
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认
值为auto，即项目的本来大小。
 
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为01auto。
 
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父
元素的align-items属性，如果没有父元素，则等同于stretch。

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

        样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直
到和规则匹配，或者是因为不匹配而放弃该规则。
 
        试想一下，如果采用从左至右的方式读取CSS规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样做会费时耗能，
最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配。

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

（1）偶数字号相对更容易和web设计的其他部分构成比例关系。比如：当我用了14px的正文字号，我可能会在一些地方用14
×0.5=7px的margin，在另一些地方用14×1.5=21px的标题字号。
（2）浏览器缘故，低版本的浏览器ie6会把奇数字体强制转化为偶数，即13px渲染为14px。
（3）系统差别，早期的Windows里，中易宋体点阵只有12和14、15、16px，唯独缺少13px。

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

        我的理解是把常用的css样式单独做成css文件……通用的和业务相关的分离出来，通用的做成样式模块儿共享，业务相关的，放
进业务相关的库里面做成对应功能的模块儿。

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

        采用*{pading:0;margin:0;}这样的写法好处是写起来很简单，但是是通配符，需要把所有的标签都遍历一遍，当网站较大时，
样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一
套初始化样式。
 
        出于性能的考虑，并不是所有标签都会有padding和margin，因此对常见的具有默认padding和margin的元素初始化即
可，并不需使用通配符*来初始化。

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

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

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

（1）外层div使用position：relative；高度要求自适应的div使用position:absolute;top:100px;bottom:0;
left:0;right:0;
 
（2）使用flex布局，设置主轴为竖轴，第二个div的flex-grow为1。

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

（1）使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

-（2）使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件。

-（3）使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。

-（4）通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

-（5）通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。

-（6）通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

-（7）通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

12、word-spacing 与单词间距？

letter-spacing作用于所有字符，但word-spacing仅作用于空格字符。换句话说，word-spacing的作用就是增加空格的间隙宽度。

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

根据测试，一个元素如果display计算值为none，在IE浏览器下（IE8～IE11，更高版本不确定）依然会发送图片请求，Fire
fox浏览器不会，至于Chrome和Safari浏览器则似乎更加智能一点：如果隐藏元素同时又设置了background-image，则图片
依然会去加载；如果是父元素的display计算值为none，则背景图不会请求，此时浏览器或许放心地认为这个背景图暂时是不会使
用的。
 
如果不是background-image，而是<img>元素，则设置display:none在所有浏览器下依旧都会请求图片资源。
 
还需要注意的是如果设置的样式没有对应的元素，则background-image也不会加载。hover情况下的background-image，在触
发时加载。

14、列举一些CSS框架？

Bootstrap：是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

Layui：是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，体积轻盈，组件丰盈，非常适合界面的快速开发。

ElementUI：一套为开发者、设计师和产品经理准备的基于 Vue 2.0的桌面端组件库。

antd：是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。开箱即用的高质量 React 组件，全链路开发和设计工具体系，数十个国际化语言支持。

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

1.规范解释
　　块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

2.通俗解释：
BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。

如果一个元素符合触发BFC的条件，则该元素中的布局不受外部影响。

浮动元素会创建BFC，所以浮动元素内部子元素主要受浮动元素影响，两个浮动元素之间是互不影响的。

3.创建方式：

根元素或包含根元素的元素

浮动元素 float ＝ left | right 或 inherit（≠ none）

绝对定位元素 position ＝ absolute 或 fixed

display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption

overflow ＝ hidden | auto 或 scroll (≠ visible)