html/css杂题
1、css选择器：详细（http://www.ruanyifeng.com/blog/2009/03/css_selectors.html）
派生选择器：按标签
类别选择器：按class
ID选择器：按ID
通用选择器：* 匹配所有
属性选择器：按属性，属于css2，IE6不支持
以上五个为基本选择器
后代选择器【div span】；子元素选择器【div > span】；群组选择器【div,p,#my】；相邻元素选择器【div + span】
伪类选择器：【div:first-child】【a:hover】css2
css3同级元素选择器：【div ~ ul】匹配任何div元素后的同级元素ul
2、
.classA{ color:blue;}
.classB{ color:red;}
<p class='classB classA'> 123 </p>
答案：p为red，元素的属性跟class属性顺序无关，跟class样式顺序有关。谁在最后就显示谁
3、hover被访问的样式顺序：L-V-H-A link visited hover active；
4、css的hack：详细（http://blog.csdn.net/liu_rong_fei/article/details/51555438）
1.大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 (opera可识别除外)。
2.\9 ：所有IE浏览器都支持
3._和- ：仅IE6支持
4.* ：IE6、E7支持
5.\0 ：IE8、IE9支持，opera部分支持
6.\9\0 ：IE8部分支持、IE9支持
7.\0\9 ：IE8、IE9支持
#tip{
background:blue;/*Firefox背景变蓝色 所有浏览器都支持*/
background:red\9;/*IE8背景变红色 IE6、7、8、9支持覆盖上面样式*/
*background:black;/*IE7背景变黑色 IE6、7支持又一次覆盖上面样式*/
_background:orange;/*IE6背景变橘色 紧IE6支持又一次覆盖上面样式*/
}
基本是：ie6（_）；ie7（*） ie8（\0） 所有ie(\9)
ie6不识别[!important]，ie7可以
5、src和href
<link href="s.css" rel='stylesheet' /> ：浏览器会识别css文件并下载，同时不会停止当前文档的加载。（故不用@import）
<script src="j.js">：浏览器会停止加载，并加载src中的资源并执行，完成后继续加载。
6、外边框重合
相邻的或父子元素之间的外边距margin可以结合成一个单独外边距，规则为：
都为正或都为负，去绝对值大的一个
一正一负的取两者和。
7、文字重叠
水平方向：letter-spacing设置为负数，则文字会水平方向上重叠
垂直方向：line-height设置为负数，则文字会在垂直方向上重叠
8、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
* 1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li: nth - child）
* 可继承： font-size font-family color, UL LI DL DD DT;
* 不可继承 ：border padding margin width height ;
* 优先级就近原则，样式定义最近者为准;
* 载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中
9、列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
1. block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
2. position的值
*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
* relative
生成相对定位的元素，相对于其正常位置进行定位。
* static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。
* inherit 规定从父元素继承 position 属性的值。
10、浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
* IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；
* png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
* （条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
11、opacity和rgba()都可以设置元素透明，区别
opacity：可以作用到元素及所有子元素和内容
rgba()：不能作用到子元素，也不能作用到元素的文字
12、css的link和@import的区别：
link在不阻塞浏览器加载的情况下加载css文件
import会在页面加载完成后再加载css文件，ie5+才支持
