浏览器默认样式

• 浏览器为在页面中没有样式时，也可以让页面有一个比较好的显示效果，所以为很多元素都设置了默认的 margin 和 padding 值。而在开发中正常情况下我们是不需要使用它的。所以我们往往在编写样式之前需要将浏览器中默认的 margin 和 padding 值去掉

* {
  margin: 0;
  padding: 0;
}
body {
  font: 12px/1 宋体; /*统一页面字体，浏览器默认是16px，而一般开发都用12px，行高为1*/
}

高度塌陷问题

• 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高父元素就多高（父元素没设置高度值或设置的值比子元素低的情况下）。但是当为子元素设置浮动以后，子元素脱离文档流此时子元素会无法撑起父元素的高度，导致父元素的高度塌陷。从而使父元素下的所有元素都向上移动，这样也会导致页面布局错乱。所以在开发中要避免高度塌陷的问题
  • 处理方法：
  1. 为父元素设置 overflow 和 zoom（兼容 IE6）
  2. 可以直接在高度塌陷的元素后面（浮动子元素后面的兄弟元素），添加一个 class 名为 clear 的空白 div，再对其设置 clear:both；使其不受浮动的兄弟元素影响，通过这个空白的 div 来撑开父元素的高度。这个方案几乎没有副作用（比方案一更加好）。使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构（问题不算大，同时也是 W3C 推荐的方式）。
  3. 通过 after 伪类向浮动元素的最后添加一个空白的块元素，再对其清除浮动，这样做和方案二的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的 div，这是我们开发中最推荐使用的方式，基本完全没有副作用。(技巧，以后在造成高度塌陷浮动元素后面只要再添加第二个 class 类名叫 clearfix，就可以一次性通过下面代码解决所有问题)。 tips：在 IE6 及以下浏览器不支持 after 伪类，所以如需兼容 IE6 还要使用 HasLayout 来处理。

/*解决高度塌陷最佳处理方式*/
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
/*兼容IE6*/
.clearfix {
  zoom: 1;
}

垂直外边距的重叠问题

• 所谓的外边距的重叠指的是兄弟元素之间的相邻外边距会取最大值而不是取和。
• 如果父子元素的垂直外边距相邻了，则子元素的外边距会传递设置给父元素。
  • 解决方法：
  1. 在 css 中在父元素加 border 或者 padding 样式，使得父元素和子元素他们不相邻。
  2. 使用 padding-top，但是注意会影响盒子可见框的大小，故要在盒子设置高度中减去相应的 padding 值。
  3. 使用空的 table 标签可以隔离父子元素的外边距、阻止外边距重叠。但是这样会添加不必要的 table 标签结构。
  4. 最佳优化办法，使用 box:before 子类伪元素选定一个空白的子元素，再通过 display 设置 display:table，将其结构变为一个空表格显示。

/*解决父子元素的外边距重叠最佳处理方式*/
.clearfix:before {
  content: '';
  display: table;
}

多功能 clearfix 写法

• 经过修改后的 clearfix 是一个多功能的工具，既可以解决高度塌陷，又可以确保相邻父子元素的垂直外边距不会重叠。在以后开发中，如需使用这个工具，只需给元素后面添加一个 class 类名为 clearfix 就可以了

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
/*如需兼容IE6*/
.clearfix {
  zoom: 1;
}

条件 Hack

• 有一些情况，有一些特殊的代码我们只需要在某些特殊的浏览器中执行。而在其他的浏览器中不需要执行，这时候就可以使用 CSS Hack 来解决该问题。
• CSS Hack 实际上值的是一段特殊的代码，这段代码只在某些浏览器中（主要指 IE）可以识别，而其他浏览器不能识别，通过这种方式来为一些浏览器设置特殊的代码。
• 条件 Hack，条件 Hack 只对 IE 浏览器有效，其他的浏览器都会将它识别为注释
  • 通过这种方式可以为 IE8 以下浏览器设置专门的样式表放进条件 Hack 里面，达到更好兼容 IE8 的需求。
  • IE10 及以上的浏览器已经不支持这种方式。

<!--[if IE]> <p>显示内容</p> <![endif]--> //只在IE浏览器中显示。
<!--[if IE 6]> <p>显示内容</p> <![endif]--> //IE后面加空格可接版本号，表示只在IE6浏览器中显示。！表示非此版本中显示
<!--[if lt IE 9]> <p>显示内容</p> <![endif]--> //加lt表示以下版本，表示只在IE9以下浏览器中显示，不包括IE9。gt表示大于
<!--[if lte IE 9]> <p>显示内容</p> <![endif]--> //加lte表示小于等于以下版本，表示只在IE9或IE9以下浏览器中显示。gte表示大于或等于

动态按钮问题

• 给 a 伪类设置不同的按钮图片，可以造成动态按钮的效果，做完这个功能以后，发现在第一次切换按钮图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成用户不良的体验。
  • 产生问题的原因：背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求，但是外部资源并不是一次性同时加载的，浏览器会在资源被使用时才去发送请求加载资源，刚打开网页时浏览器只会加载 a:link 的按钮图片，由于 hover 和 active 的状态没有马上触发，这两个的按钮图片不会加载，只有当这两个状态触发时才会去加载。而加载图片需要一定时间，所以在触发状态加载和显示过程中会有一段时间背景图片无法显示（旧的已去新的未来），导致出现闪烁甚至空白的情况。
  • 解决办法：可以将不同状态下的按钮图片整合成一张图片，这样可以将不同状态下的按钮图片一起加载，然后控制按钮盒子大小只显示 link 状态的部分，之后触发 hover 和 active 状态时再通过 background-position 来移动图片位置显示另一个状态的部分，这种技术叫做图片整合技术（CSS-Sprite），这个整合的图叫做雪碧图。
  • 优点：
  1. 将多个图片整合成一张图片，浏览器只需要发送一次请求，就可以同时加载多个图片，提高访问效率，提升了用户体验。
  2. 将多个图片整合成一张图片，减小了图片的总大小，也提高了请求速度，提升了用户体验。
  3. 雪碧图只能用于设置为背景的图片，并且是宽高都固定的背景图片。（不适用于通过 IMG 引入的图片）

IE6 的 png 问题

• 在 IE6 中对图片格式 png24 支持度不高，如果使用的图片格式是 png24，则会导致透明效果无法正常显示。
  • 解决方法：
  1. 可以使用 png8 代替 png24(png24 文件大且清晰)，PS 打开文件后存储为 web 使用格式即可解决问题。但是使用 png8 代替 png24 以后，图片的清晰度会有所下降（图片边缘有锯齿状，白边）。
  2. 使用 JavaScript 来解决问题，需要向页面引入一个外部 JavaScript 文件，然后通过一些简单的 JS 代码，来处理该问题。

    //引入外部JS修复文件
    <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>

    //修复IE6png显示问题
    <!--[if IE 6]>
    <script type="text/javascript">
        DD_belatedPNG.fix("div,img"); //div是修复对象，如果图片放在img里则使用fix("img");
    </script>
    <![endif]-->

IE 双倍边距 BUG

• 在 IE6 中，当为一个向左浮动的元素设置左外边距或者为一个向右浮动的元素设置右外边距时，这个外边距将会是设置的值的两倍。
  • 解决方法：
  1. 通过属性 Hack _单独为 IE6 设置（后期维护修改比较麻烦，不推荐）
  2. 为该元素添加一个样式 display:inline;（对于一个浮动元素来说设置 display:inline 没有任何意义，因为浮动会改变元素模型，但是该属性可以解决 IE6 的双倍边距问题，这也是推荐使用的解决方法）。