值得一提的是，把父元素属性设置为overflow: auto或overflow: hidden，会使其内部的子元素形成块格式化上下文（Block Formatting Context），并且父元素会扩张自己，使其能够包围它的子元素。
参考资料：
3.请阐述z-index属性，并说明如何形成层叠上下文（stacking context）。
CSS 中的z-index属性控制重叠元素的垂直叠加顺序。z-index只能影响position值不是static的元素。
没有定义z-index的值时，元素按照它们出现在 DOM 中的顺序堆叠。非静态定位的元素（及其子元素）将始终覆盖静态定位（static）的元素，而不管 HTML 层次结构如何。
层叠上下文是包含一组图层的元素。 在一组层叠上下文中，其子元素的z-index值是相对于该父元素而不是 document root 设置的。每个层叠上下文完全独立于它的兄弟元素。如果元素 B 位于元素 A 之上，则即使元素 A 的子元素 C 具有比元素 B 更高的z-index值，元素 C 也永远不会在元素 B 之上.
每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父层叠上下文中按顺序进行层叠。少数 CSS 属性会触发一个新的层叠上下文，例如opacity小于 1，filter不是none，transform不是none。
参考资料：
4.请阐述块格式化上下文（Block Formatting Context）及其工作原理。
块格式上下文（BFC）是 Web 页面的可视化 CSS 渲染的部分，是块级盒布局发生的区域，也是浮动元素与其他元素交互的区域。
一个 HTML 盒（Box）满足以下任意一条，会创建块格式化上下文：
-
float的值不是none. -
position的值不是static或relative. -
overflow的值不是visible。
在 BFC 中，每个盒的左外边缘都与其包含的块的左边缘相接。
两个相邻的块级盒在垂直方向上的边距会发生合并（collapse）。更多内容请参考边距合并（margin collapsing）。
参考资料：
5.有哪些清除浮动的技术，都适用哪些情况？
-
空
div方法：<div style="clear:both;"></div>。 -
Clearfix 方法：上文使用
.clearfix类已经提到。 -
overflow: auto或overflow: hidden方法：上文已经提到。
在大型项目中，我会使用 Clearfix 方法，在需要的地方使用.clearfix。设置overflow: hidden的方法可能使其子元素显示不完整，当子元素的高度大于父元素时。
6.如何解决不同浏览器的样式兼容性问题？
-
在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
-
使用已经处理好此类问题的库，比如 Bootstrap。
-
使用
autoprefixer自动生成 CSS 属性前缀。 -
使用 Reset CSS 或 Normalize.css。
7.如何为功能受限的浏览器提供页面？ 使用什么样的技术和流程？
-
优雅的降级：为现代浏览器构建应用，同时确保它在旧版浏览器中正常运行。
-
Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
-
渐进式增强：构建基于用户体验的应用，但在浏览器支持时添加新增功能。
-
利用 caniuse.com 检查特性支持。
-
使用
autoprefixer自动生成 CSS 属性前缀。 -
使用 Modernizr进行特性检测。
8.有什么不同的方式可以隐藏内容（使其仅适用于屏幕阅读器）？
这些方法与可访问性有关。
-
visibility: hidden：元素仍然在页面流中，并占用空间。 -
width: 0; height: 0：使元素不占用屏幕上的任何空间，导致不显示它。 -
position: absolute; left: -99999px： 将它置于屏幕之外。 -
text-indent: -9999px：这只适用于block元素中的文本。 -
Metadata： 例如通过使用 Schema.
最低0.47元/天 解锁文章
5597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
