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+才支持