太上老俊

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 MozillaGeckogoogleWebKitOpera内核Presto

    * png24为的图片在iE6浏览器上出现背景,解决方案是做成PNG8.

    * 浏览器默认的marginpadding不同。解决方案是加一个全局的*{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游览器从所有情况中分离出来。 

      接着,再次使用“+”IE8IE7IE6分离开来,这样IE8已经独立识别。

      css

          .bb{

           background-color:#f1ee18;/*所有识别*/

          .background-color:#00deff\9; /*IE678识别*/

          +background-color:#a200ff;/*IE67识别*/

          _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样式就不出现了 被点击访问过的超链接样式不在具有hoveractive了解决方法是改变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+才支持

 

 

 

 

 

 

 

posted on 2018-01-15 17:09  太上老俊  阅读(167)  评论(0编辑  收藏  举报

导航