CSS问题

1.重置css和标准化css的区别是什么

   重置：重置意味着除去所有的浏览器默认样式。对于页面所有元素，像margin、padding、font-size这些样式全部置成一样，必须重新定义各种元素的样式。

  标准化：标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见错误。

   当需要实现非常个性化的网页设计时，我会选择重置的方式，因为我要写很多自定义的样式来满足需求，这时候就不再需要标准化的默认样式。

2.请阐述float定位的工作原理

   浮动是css定位属性，浮动元素从网页的正常流动中移出，但保持了部分的流动性，会影响其他元素的定位（比如文字会环绕着浮动元素）。这一点与绝对定位不同，绝对定位的元素完全从文档流中脱离。

   css的clear属性通过使用left、right、both，让该元素向下移动到浮动元素的下面。

   如果父元素只包含浮动元素，那么该父元素的高度将塌缩为0.我们可以通过清除从浮动元素后到父元素关闭前之间的浮动来修复这个问题。

   有一种hack的方法，自定义一个.clearfix类，利用伪元素选择器：：after清除浮动。

3.阐述z-index属性，并说明如何形成层叠上下文

   css中的z-index属性控制重叠元素的垂直叠加顺序，z-index只能影响position值不是static的元素。

   没有定义z-index的值时，元素按照他们出现在dom中的顺序堆叠（层级越低，出现位置越靠前）。非静态定位的元素将始终覆盖静态定位的元素，而不管html层次结构如何。

   层叠上下文是包含一组图层的元素，在一组层叠上下文中，其子元素的z-index是相对于该父元素而不是根元素设置。每个层叠上下文完全独立于它的兄弟元素。

4.请阐述块格式上下文（BFC)及其工作原理

   块格式上下文是web页面的可视化css渲染部分，是块级盒布局发生的区域，也是浮动元素与其他元素交互的区域。

   一个html盒满足以下任意一条，会创建格式化上下文：

   float的值不是none；

   position的值不是static或relative；

   display的值是table-cell、table-caption、inline-block、flex或inline-flex

   overflow的值不是visible

   在bfc中，每个盒的左外边缘都与其包含的块的左边缘相接。

   两个相邻的块级盒在垂直方向上的边距会发生合并。

5.清除浮动的技术以及使用的情况

   空div方法：<div style="clear:both"></div>

   Clearfix方法：上文使用.clearfix类已经提到。

   overflow:auto或overflow：hidden方法

6. 请解释什么是雪碧图（css sprites)，以及如何实现

    雪碧图是把多张图片整合到一张上的图片，它被运用在众多使用了很多小图标的网站上，实现方法：

   a.使用生成器将多张图片打包成一张雪碧图，并为其生成合适的css；

   b.每张图片都有相应的css类，该类定义了background-image、background-position和background-size属性。

   c.使用图片时，将相应的类添加到你的元素中。

 7.如何解决不同浏览器的样式兼容性问题

   a.在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载，这种方法需要使用浏览器端渲染；

   b.使用已经处理好此类问题的类，比如bootsrap；

   c.使用autoprefixer自动生成css属性前缀；

   d.使用Reset CSS或Normalize.css。

  8.如何为功能受限的浏览器提供页面，使用什么样的技术和流程

    优雅的降级：为现代浏览器构建应用，同时确保它在旧版浏览器中正常运行。

    渐进式增强：构建基于用户体验的应用，但在浏览器支持时添加新功能。

    利用caniuse.com检查特性支持。

    使用autoprefixer自动生成css属性前缀。

    使用Modernizr进行特性检测。

   9.有什么不同的方式可以隐藏内容

     这些方法与可访问性有关：

     visibility:hidden:元素仍然在页面流中，并占用空间；

     width：0；height：0：使元素不占用屏幕上的任何空间，导致不显示它。

     position：absolute；left：-999999px：它将至于屏幕之外。

     text-indent：-99999px：这只适用于block元素中的文本。