html部分（包括浏览器的兼容）知识总结

HTML部分

1、结构样式：width、height、background、border、padding、margin；

2、复合属性：background、border、padding、margin、font

background：url(/img.jpg) no-repeat(repeat-x/y) x轴（left、center、right） y轴 fixed（是否滚动-attachment）；

border:border-top-style(top right bottom left)
边框样式：solid 实线  dashed 虚线  dotted 点线（ie6不兼容）

padding:top right bottom left
注意：内边距相当于给一个盒子加了填充厚度会影响盒子的大小

margin 外边距
1、上下边距会叠加
2、父子级包含的时候子级的margin-top会传递给父级（父级的内边距代替子级的外边距）
3、margin：0 auto；会使盒子居中

常见文本样式设置
font:font-style | font-weight | font-size/line-height |font-family
text-align：文本对齐方式；text-indent：首行缩进（em缩进字符）；text-decoration：文本修饰； letter-spacing：字母间距； word-spacing：单词间距（以空格为解析单位）

2、a链接（链接、下载（要下载的文件地址目录）、锚点）

3、<base target="_blank" />定义页面中所有的链接打开方式

4、锚点：<a href="#box1">百步飞剑(锚点)</a>加的是id号

5、选择符优先级别：类型（标签） < class(10) < id(100) < style(行间样式1000) < js
！important的优先级别跟js差不多。

6、a伪类的正确排放位置 link、visited、hover、active
IE6不支持a以外的其他任何标签的伪类；
IE6以上的浏览器支持所有标签的hover伪类；

7、内联、内嵌、行内属性标签：
     1、默认同行可以继续跟同类型标签；
     2、内容撑开宽高
     3、不支持宽高
     4、不支持上下的margin和padding
     5、代码换行被解析

注意点：display：block；可以将内嵌转为块

8、块属性标签：
     1、默认独占一行显示
     2、没有宽度时，默认撑满一排
     3、支持所有的css命令
   块属性标签：默认独占一行

注意点：display：inline；可以将块转为内嵌

9、inline-block特性：
     1、块在一行内显示；
     2、行内属性标签支持宽高
     3、没有宽度的时候内容撑开宽度

问题：1、代码换行被解析； 2、ie6，ie7不支持块属性标签的inline-block；

面试题：
<P>哥写的不是HTML，是寂寞。<br><br>&nbsp;&nbsp;我说：<br>不要迷恋哥，哥只是一个传说
<hr/>
<p>哥写的不是HTML，是寂寞。</p>
<p>我说：<br/>不要迷恋哥，哥只是一个传说</p>

改成：<p>哥写的不是<abbr titile="Hypertext Markup Language">HTML</abbr>，是寂寞。</p>
<p><cite>我</cite>说：<br /><q>不要迷恋哥，哥只是一个传说</q></p>

10、p标签内不要包含块属性标签；

11、浮动：float：left、right、none：元素加了浮动后会脱离文档流，按照指定的方向移动直到碰到父级的边界或者另外一个浮动元素然后停止。

    1、使块元素在一行内显示
    2、使内嵌支持宽高
    3、不设置宽度的时候宽度由内容撑开
    4、脱离文档流
    5、提升层级半层

注意点：文档流是文档中可显示对象在排列所占用的位置

12、清浮动：clear:left/right/both/none

    ie6,7下清浮动用.clear{ zoom:1;} .clear:after{ content:""; display:block; clear:both;}

13、元素浮动，要并在一行的元素都要加浮动。

14、IE6下的双边距bug，存在的条件：在块元素中有浮动和横向的margin的时候，横向的margin值会被放大成两倍

解决方法：display：inline；

比如：div{ float:left; margin-left:20px; display:inline;}

15、IE6,7下的li的4px间隙问题：存在的条件：li的本身没有浮动，但是li里面的内容浮动了，所以li与li之间会产生4px；

解决方法：1、给li加浮动； 2、给li加zoom：1；overflow：hidden；vertical-align：top；
当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动


16、垂直居中方式：一行内显示：display：inline-block；vertical-align：middle；

17、图片下的间隙问题：解决方案：img{ vertical-align：top；}

18、ie6下最小高度问题：19px 解决方案：给盒子加上overflow：hidden；

19、相对定位：position：relative
    1、不影响元素本身的特性
    2、不使元素脱离文档流
    3、如果没有定位偏移量，对元素本身没有任何影响
定位偏移量：top、right、bottom、left

20、绝对定位：position;absolute;
    1、使元素完全脱离文档流
    2、使内嵌支持宽高
    3、块属性标签内容撑开宽度
    4、如有有定位父级相对于父级发生偏移，没有父级相对于整个文档发生偏移
    5、相对定义一般都是配合绝对定位使用

21、定位层级：z-index：【number】；
一般定位元素，默认后者层级高于前者

22、定位的小应用：盒子在页面中显示居中：
div{ position:absolute; top:50%; left:50%; margin-top:-(height/2+border.width); margin-left:-(width/2+border.width);}
注意点下：如果有边框，那么加上边框的宽度

23、透明度：ie私有：filter:alpha(opacity=90);标准:opacity:0.9;

24、position：fixed；固定定位

与绝对定位特性一致，差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位

25、IE6下的父级的overflow：hidden；包不住子级的相对定位；

26、在IE6下定位元素的父级宽度高度都为奇数的时候，那么定位元素的right、bottom都有1px的偏差

27、清浮动的第8中方法：父级加绝对定位+边框，不设置宽高，子级加浮动

28.清浮动的第9中方法：父级加固定定位+边框，不设置宽高，子级加浮动

30、表格的注意事项：
    1、不要给table、th、td以外的表格标签添加样式；
    2、单元格默认平分table的宽度；
    3、th里面的内容默认加粗并且左右上下居中显示；
    4、td里面的内容默认上下居中左右居左显示
    5、table决定了整个表格的宽度
    6、table里面的单元格宽度会被转换成百分比
    7、表格里面的每一列必须有宽度
    8、表格同一竖列继承最大宽度
    9、表格同行继承最高高度

table的标签基本特性是;display:table;

31、单元格合并：colspan：单元格可横跨的列数；rowspan：单元格可横跨的行数；
写法：<th colspan="2"></th><td rowspan="3"></td>

32、表单：
<form action="#" method=“post或者get”target=“_blank”>
提交按钮：<input type="submit" value="提交" name="" />
文本框：<input type="text" name="" />
密码框：<input type="password" name="" />
单选按钮：<input type="radio" name="gender(性别)" id="a" /><label for="a">男</label>

checked 默认选中 disabled 禁用
复选框：<input type="checkbox" name="" disabled />宅
上传：<input type="file" name="" />
图片：<input src="sun.jpg" type="image" name="" />
按钮：<input type="button" name="" />
隐藏：<input type="hidden" name="" />
重置: <input type="reset" name="" />
下拉选框：<select><option>1990</option><option>2000</option></select>
文本域：<textarea></textarea>
</form>

33、label标签input元素定义标注：<input type="radio" name="gender(性别)" id="a" /><label for="a">男</label>
checked  在页面加载时默认选定的 input 元素。
    <input type="checkbox" name="" checked/>
disabled  属性规定应该禁用 input 元素。
    <input type="checkbox" name="" disabled/>
34、select/option 下拉选框：对高度的支持不兼容

35、textarea 文本域：各个浏览器下的默认滚动条显示不兼容，css3新增resize调整尺寸属性。

36、轮廓线 表单元素兼容性问题
    outline轮廓线：
        a标签轮廓线去除方法:
        1、<a href="#" onfocus="this.blur();">....</a>
            2、<a href="#" hidefocus>....</a>

37、表单元素兼容性问题：IE6下input背景滚动；

38、css精灵：网页图片应用处理方法，允许将页面中零散图片都包含到一张大图中去。

css sprites 优点：利用css sprites能很好的减少网页的http请求，从而大大提高页面的性能，这是最大优点；也减少图片的大小

css sprites缺点：1、降低开发效率；2、维护难度加大

39、兼容问题

1、计算一定要精确，不要让内容的宽度超出我们设置的宽度，IE6下内容会撑开设置好的宽高。

2、在IE6下,元素浮动，宽度需要内容撑开，那么就给里面的块元素都加浮动。
.box{ width:400px;}
.left{background:red;float:left;}
.right{float:right; background:blue;}

3、在IE6,7下元素要通过浮动并在一行，就给这行元素都加浮动

或者方法：.left{width:100px;height:100px;float:left;}
          .right{width:200px;height:100px;margin-left:100px;}

4、.box{ width:100px;height:100px;border:1px dotted #000;}1px dotted 在IE6下不支持
解决方案是：切背景平铺

5、.box{background:blue; overflow:hidden;zoom:1;}
   .div{width:200px;height:200px;background:red;margin:100px;}

    在IE6下解决margin传递要触发haslayout
    
    在IE6下父级有边框的时候，子元素的margin值消失
    
    解决办法:触发父级的haslayout

6、当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效

7、在IE6下的文字溢出BUG：子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素
  解决办法:用div把注释或者内嵌元素用div包起来
<div class="box">
    <div class="left"></div>
    <div><!-- IE6下的文字溢出BUG --><span></span></div>
    <div class="right">&darr;leo是个大胖子</div>
</div>    

8、当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失
    
   解决办法:给定位元素外面包个div
<div class="box">   relative
    <ul></ul>   left
    <div><span></span></div>  absolute
</div>

9、在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素
   解决办法: 给父级也加相对定位

10、在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差
.box{width:201px;height:201px;border:1px solid #000; position:relative;}
.box span{ width:20px;height:20px;background:yellow; position:absolute;right:-1px;bottom:-1px;}

11、在IE6，7下输入类型的表单控件上下各有1px的间隙
    解决办法:给input加浮动
.box{ width:200px;height:32px;border:1px solid red;}
.box input{width:100px;height:30px;border:1px solid #000;margin:0;padding:0; float:left;}

12、在IE6，7下输入类型的表单控件加border:none;
    解决办法: 重置input的背景
.box{ width:200px;height:32px;border:1px solid red;background:yellow;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:#fff;}

13、在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动
    解决办法: 把背景加给父级
.box{ width:100px;height:30px;border:1px solid red;background:yellow; background:url(ball.png) no-repeat;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:none;}

14、png的问题在IE6不兼容，所以需要

<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix('.box');
</script>
<![endif]-->

15、IE的条件注释语句
<!--[if IE]>
这是IE
<![endif]-->
<!--[if IE 9]>
9
<![endif]-->
<!--[if IE 8]>
8
<![endif]-->
<!--[if IE 7]>
7
<![endif]-->
<!--[if IE 6]>
6
<![endif]-->

16、css hack：
        \9 IE10之前的IE浏览器解析
    +,* IE7包括IE7之前的IE浏览器解析
    _IE6包括IE6之前的IE浏览器

17、png滤镜：
.box{width:400px;height:400px; background:url(img/png.png);_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/png.png", sizingMethod="crop");

18、在IE6下 在important 后边在家一条同样的样式，会破坏掉important的作用，会按照默认的优先级顺序来走
.box{width:100px;height:100px;background:red !important; background:pink;}

19、圣杯布局：
<style>
body{margin:0;}
.center{height:600px;background:#f60;margin:0 200px;}
.left{width:200px;background:#fc0;height:600px; position:absolute;left:0;top:0;}
.right{width:200px;background:#fcc;height:600px;position:absolute;right:0;top:0;}
</style>
</head>
<body>
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</body>

20、等高布局：
<style>
body{margin:0;}
.wrap{ width:900px;margin:0 auto;overflow:hidden;}
.left{width:200px;background:Red;float:left;padding-bottom:10000px;margin-bottom:-10000px;}
.right{width:700px;background:blue;float:right;padding-bottom:10000px;margin-bottom:-10000px;}
</style>
</head>
<body>
<div class="wrap">
    <div class="left">
        &nbsp;&nbsp;页面内容<br/>

    </div>
    <div class="right">
        &nbsp;&nbsp;页面内容<br/>
        &nbsp;&nbsp;页面内容<br/>
    </div>
</div>
</body>

21、等高布局：
<style>
body{margin:0;}
.wrap{ width:900px;margin:0 auto; border:10px solid #000; overflow:hidden;}
.wrap:after{content:"";display:block;clear:both;}
.left{width:200px;background:Red;float:left; padding-bottom:200px; margin-bottom:-200px;}
.right{width:200px;background:blue;float:right;padding-bottom:200px;margin-bottom:-200px;}
</style>
</head>
<body>
<div class="wrap">
    <div class="left">
        &nbsp;页面内容<br/>
        &nbsp;页面内容<br/>
        &nbsp;页面内容<br/>
        &nbsp;页面内容<br/>
        &nbsp;页面内容<br/>
    </div>
    <div class="right">
    </div>
</div>
</body>

css相关面试题汇总：
1、map 热区
   area 点击区域    
    shape="circle" 圆型 coords="圆心点X,圆心点Y,圆的半径"
    shape="rect" 矩形 coords="矩形左上角x,矩形左上角Y,矩形右下角X,矩形右下角Y"
    shape="poly" 多边形 coords="第一个点X，第一个点Y，第二个点X，第二个点Y,..."

2、iframe：<iframe src="http://www.baidu.com" width="1200" height="600" frameborder="0" scrolling="no"></iframe>

3、flash：
<object>
    <param name="wmode" value="transparent">
    <embed src="1.swf" width="400" height="400" wmode="transparent"></embed>
</object>

4、引入视频：
<embed src="http://player.youku.com/player.php/sid/XNjQ0MDk4MDI0/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

5、英文单词 数字词内断行：word-break:break-all;

6、文本溢出显示省略号：white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

7、可视宽: 元素的内容宽+padding+border
    元素的内容宽：元素里可以放内容的宽度
    
    怪异模式： 可视宽就是的设置宽度  内容宽就是=设置宽度-padding-bordersss
    在IE6,7,8下不设置文档声明的时候    页面的盒模型解析 就会进入怪异模式 <!DOCTYPE          HTML>文档声明

8、隐藏元素：display:none;visibility:hidden;（占的位置还存在，只是看不见元素）

9、模拟固定定位：
.box{height:2000px;}
.div{width:100px;height:100px;background:red; position:fixed;left:100px;top:100px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+100));

10、未知宽高img如何在容器中水平垂直居中：
.box{ width:800px;height:600px;border:2px solid #000; text-align:center;}
span{ display:inline-block; height:100%; vertical-align:middle;}
img{ vertical-align:middle;}
</style>
</head>
<body>
<div class="box">
    <img src="bigptr.jpg" /><span></span>
</div>
</body>
方法2：
<style>
.box{ width:800px;height:600px;border:2px solid #000;display:table;position:relative; overflow:hidden;}
span{ display:table-cell; text-align:center; vertical-align:middle;*position:absolute;left:50%;top:50%;}
img{ *position:relative; vertical-align:top;left:-50%;top:-50%;}
</style>
</head>
<body>
<div class="box">
    <span><img src="bigptr.jpg" /></span>
</div>
</body>

11、列表的文字溢出：
<style>
ul{width:302px; margin:0;padding:0; list-style:none;}
li{ height:30px; font-size:12px; line-height:30px;border:1px solid #000; vertical-align:top;}
p{margin:0;float:left;padding-right:50px; position:relative; overflow:hidden;height:30px;}
span{padding-left:10px;width:40px; position:absolute;right:0;top:0;}
</style>
</head>
<body>
<ul>
    <li>
        <p>
            <a href="#">文字文字文字文字文字字文字文字文字文字文字文字字文字文字文字文字文字文字字文字</a>
            <span>文字</span>
        </p>
    </li>

css reset以及css布局
@charset "utf-8";
/* reset */
body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0;padding:0;}
em{font-style:normal}
li{list-style:none}
a{text-decoration:none;}
img{border:none; vertical-align:top;}
table{border-collapse:collapse;}
textarea{ resize:none;overflow:auto;}
/* end reset */

/* public */
body{ background:url(../img/bg.gif) repeat-x #d9e2ce; min-width:960px;}
.wrap{width:960px;margin:0 auto;}
#header{background:url(../img/head_bg.jpg) no-repeat center 0;}
.header{height:94px;}
#nav{height:43px;background:url(../img/nav_bg.png) no-repeat;}
#nav li{float:left;width:118px;padding-right:8px; position:relative;}
#nav a{ display:block;padding-top:1px;line-height:42px; font-size:16px;color:#fdfbf9; text-align:center; background:url(../img/nav_hover.png) no-repeat center 50px;}
#nav a:hover,#nav .active{background-position:center 0;}
/* end public */

/* index(i) */

/* end index */

/* room(r) */

/* end room */


/* product(p)  */

/* end product*/