前端H5初学笔记（五）

1. 元素透明背景
   opacity属性用来设置元素背景的透明，它需要一个0-1之间的值：
   0：完全透明
   1：完全不透明
   0.5：半透明

   但这个属性在IE8及以下的浏览器中不支持，需要使用以下属性代替：
   filter: alpha(opacity=透明度);
   透明度需要一个0-100之间的值
   0：完全透明
   50：半透明
   100：完全不透明

   IE6中支持该特性，但在IE Test中测试不出效果，属于软件的一个bug。

2. 背景图片的位置
   背景图片默认贴着元素的左上角显示，通过background-position可以调整背景图片在元素中的位置，可选值：
   top、right、left、bottom、center中的两个值，来指定一个背景图片的位置。
   top left 左上
   bottom right 右下
   center center 居中
   如果只给出一个值，则另一个默认为center。

   也可以直接指定两个偏移量，第一个为水平偏移量，第二个是垂直偏移量。

3. background-attachment
   设置背景图片是都随页面一起滚动，可选值：
   scroll：默认值，背景图片随着窗口一起滚动。
   fixed：背景图片固定到某个位置，不随页面滚动，定位永远相对于浏览器窗口。

4. 图片整合技术
   优点：
   将多个图片整合为一张图片里，浏览器只需发送一次请求，可以同时加载多个图片，提高请求速度，提高访问效率和用户体验。

5. table边框
   table与td边框之间默认有一个距离，通过border-spacing设置这个距离，但会使边框重叠。
   使用border-collapse可以设置表格的边框合并，并且这个属性会使border-spacing属性失效。

   tr:nth-child(even) 隔行变色，但在IE8及以下浏览器中不支持。

6. clearfix的最终版本
   经过修改后的clearfix是一个多功能的，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠。
   .clearfix:before,
   .clearfix:after{
   content:”“;
   display: table;
   clear : both;
   }
   .clearfix{
   zoom:1;
   }

7. select
   在select中可以使用optgroup对选项进行分组，同一个optgroup中的选项是一组，可以通过optgroup中的lable属性指定分组的名字。
   在select中添加一个multiple=”multiple”，则下拉列表变为一个多选的下拉列表。

8. fieldset
   使用fileldset定义表单项进行分组，可以将表单项中的同一组放到一个filedset中，使用legend子标签指定组名。

9. 框架集
   框架集和内联框架作用类似，都是用于在一个页面中引入其他的外部的页面，框架集可以同时引入多个页面，而内联框架只能引入一个，在H5标准中，推荐使用框架集，而不使用内联框架。
   使用frameset创建框架集时注意不能和body出现在同一个页面中，使用frame子标签引入页面。
   使用frameset布局时使用属性：
   rows：指定框架集中的所有页面一行一行的排列。
   cols：指定框架集中的所有页面一列一列的排列。
   必须选择其中一个属性，并且在属性中指定每一部分所占的大小，在frameset中也可以再嵌套一个frameset。

10. IE6中的png图片问题
    在IE6中对图片格式png24支持度不高，如果使用的图片格式是png24则会导致透明效果无法正常显示，解决方法：
    1.可以使用png8代替png24，但是使用png8代替png24以后图片的清晰度就会有所下降。
    2.使用javascript来解决该问题，引入一个外部的JS文件，然后再写一个简单的JS代码。
    <script type="text/javascript" src="../DD_belatedPNG_0.0.8a-min.js>"</script>
<script type="text/javascript">
DD_belatedPNG.fix("div,img");
</script>

11. hack
    有一些特殊的代码我们只需在某些浏览器中执行，而在其他的浏览器中不需要执行，这时就可以使用CSS hack来解决该问题，不到万不得已的时候尽量不要使用。

    1.条件hack
    条件hack只对IE浏览器有效，其他的浏览器都会将它识别为注释，但IE10及以上的浏览器已经不支持这种方式了。
    <!--[if IE 版本]>
content
<![endif]-->

    2.属性hack
    在样式前面添加_则该样式只有IE6及以下的浏览器才可以识别。
    在样式前面添加*只有IE7及以下的浏览器认识。
    在样式前面添加\0则只有IE8及以上的浏览器才能识别。