【前端面试题——CSS篇】

1.absolute的containing block计算方式跟正常流有什么不同？

• 如果此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的padding box (除 margin, border 外的区域) 的最小矩形；
• 否则,则由这个祖先元素的 padding box 构成。 如果都找不到，则为 initial containing block。
• 补充：
  static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
  absolute: 向上找最近的定位为absolute/relative的元素
  fixed: 它的containing block一律为根元素(html/body)

2.CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

visibility:collapse
collapse属性值定义不同的元素有不同的效果。

• 用在表格元素时：会删除一行或一列，不会影响表格的布局；
• 用在非表格元素上时：和hidden属性值的效果一样；

visibility:collapse不同浏览器的区别：
当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟 display: none 一样，也就是说，它们占用的空间也会释放。

在谷歌浏览器里，使用 collapse 值和使用 hidden 值没有什么区别

在火狐浏览器、Opera和IE11里，使用 collapse 值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置

3.display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

4.position(定位)跟display（元素类型）、overflow（溢出）、float（浮动）这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；
position属性规定元素的定位类型；
float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute（绝对定位）/fixed（绝对定位）优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

5.对BFC规范(块级格式化上下文：block formatting context)的理解？

也就是在一个BFC的盒子，会从所在的盒子块的最顶部开始，在盒子的垂直方向上一个挨一个的摆放咱们写的标签，我们平常不太会注意这点，感觉这是没写样式，堆积的现象是正常的，但这却是BFC帮助我们实现的。当我们对某个盒子设置一个margin-top的时候，BFC会帮助我们解析，然后会在盒子布局时候给一个上边距，在一个BFC中，每个元素的左边缘都会紧贴着当前块的左边缘。这都是BFC的影响。
不同的BFC区域之间是相互独立的，互不影响的。BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。

6.为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上。
浮动元素引起的问题
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
清除浮动的方式

• 使用额外的标签，书写方便，但结构差
• 父元素添加overflow：hidden，代码简洁，内容增多的时候容易造成高度塌陷，溢出隐藏
• 为父元素设置高度，简单有效，但需要手动添加高度，如果后面高度发生变化，还需再次修改，比较繁琐
• 使用after伪元素清楚浮动，符合闭合浮动，在一些浏览器上不支持使用after,，会触发hasLayout

7.上下margin重合的问题？

在重合元素外包裹一层容器，并触发该容器生成一个BFC。
第一种情况：

• float浮动
• inline-block

第二种情况：

• 父级加overflow:hidden

• 加padding

• 加border

• 子级加position:absolute

8. 设置元素浮动后，该元素的display值是多少？

css 浮动后的元素display都默认是block，就是设置inline也是block

9.移动端的布局用过媒体查询吗？

10.CSS优化、提高性能的方法有哪些？

• 避免过度约束
• 避免后代选择符
• 避免链式选择符
• 使用紧凑的语法
• 避免不必要的命名空间
• 避免不必要的重复
• 最好使用表示语义的名字
• 避免！important大量使用，可以选择其他选择器

11.浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的。

• 若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
• 若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

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

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

13.margin和padding分别适合什么场景使用？

margin和padding是在html中的盒模型的基础上出现的。
margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离
何时使用margin：

• 需要在border外侧添加空白
• 空白处不需要背景色
• 上下相连的两个盒子之间的空白，需要相互抵消时。
  何时使用padding：
• 需要在border内侧添加空白
• 空白处需要背景颜色
• 上下相连的两个盒子的空白，希望为两者之和。
• 兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

14.元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

15.全屏滚动的原理是什么？用到了CSS的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
overflow：hidden；transition：all 1000ms ease；

16.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式设计：
是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整
基本原理
通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport.
实现方式

• 媒体查询
• 百分比
• vw/vh
• rem
  总结
  响应式设计的思考方向：
  • 弹性盒子和媒体查询
  • 使用百分比创建流式布局，同时使用媒体查询限制元素的尺寸和内容变更范围
  • 使用相对单位是内容自适应调节
  • 选择断点，针对不同断点实现不同的布局和内容展示

17. 视差滚动效果？

18.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用？

**单冒号(: )**用于CSS3伪类，
**双冒号(:😃**用于CSS3伪元素
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

19.让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

20. position:fixed;在android下无效怎么处理？