Web前端笔试、面试题及答案——CSS篇(2)

11、什么是外边距重叠？重叠的结果是什么？外边距重叠的意义？如何防止外边距重叠？

（1）外边距重叠就是 margin-collapse。外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度。
（2）如果都是正边界，边界宽度是相邻边界宽度中最大的值。
如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。
如果没有正边界，则从零中减去绝对值最大的负边界。
只有外边距才可以是负值，内边距不允许为负值。
（3）外边距的重叠只产生在普通流文档的上下外边距之间,当上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。
（4）
      .外层元素padding代替
      .内层元素透明边框 border:1px solid transparent;
      .内层元素绝对定位 postion:absolute:
      .外层元素 overflow:hidden;
      .内层元素加float:left;或display:inline-block;
      .内层元素padding:1px;

12、 px 、em、rem 的区别？

px 、em、rem都是长度单位，区别是：

px的值是固定的，指定是多少就是多少，计算比较容易。
em的值不是固定的，并且em会继承父级元素的字体大小。
rem的值是不是固定的，是css3新增的一个相对根元素的大小单位。

浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

13、CSS引入的方式有哪些？使用Link和@import有什么区别？

CSS引入的方式有内联，内嵌，外链，导入。使用Link和@import的区别：

link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义RSS，定义 rel 连接属性等作用，无兼容性，支持使用javascript改变样式；而@import是CSS提供的，只能用于加载CSS，不支持使用 javascript 改变样式；
页面被加载的时，link 会被同时加载，而@import 引用的CSS会等到页面加载完再加载；
import是CSS2.1 提出的，CSS2.1以下浏览器不支持，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

14、如何理解 CSS 的继承和重用？

继承：在一个属性应用于一个特定标签之后，该标签的子标签也应该应用该属性。这一行为称为继承。但并不是所有的属性都会被继承。如文字样式一般都继承，盒图的宽高一般不继承，总之该继承的都会继承，不该继承的都不继承。
重用：一个样式文件，可以多个页面使用，这对于一些公共样式的重构是很有用的。

15、行内元素和块级元素的区别？列举常用行内元素和块元素。

行内元素：
（1）行内元素不换行
（2）行内元素不可以设置大小
（3）行内元素大小由内容决定
块元素：
（1）块元素独立成行
（2）块元素可以设置大小
（3）块元素如果不设置宽度，宽度会自适应其父级的宽度

行元素：span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select（下拉列表）、small、sub、sup，strong、u（下划线）、button（默认display：inline-block）。

块元素：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等。

16、CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个 元素的每个 元素。
p:last-of-type 选择属于其父元素的最后 元素的每个 元素。
p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。
:enabled选择所有启用的表单元素。
:disabled 控制表单控件的禁用状态。
:checked单选框或复选框被选中。
:before在元素之前添加内容，也可以用来做清除浮动。
:after在元素之后添加内容。

17、为什么要初始化 CSS 样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

*{
margin:0;
padding:0;
}

18、display:none 与 visibility:hidden 的区别是什么？

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

19、什么是CSS 预处理器 / 后处理器？为什么要使用他们？

预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。其它 CSS 预处理器语言：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS。

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

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