08月26, 2018

前端笔试面试中的常用知识点总结(CSS)

1、CSS选择器的优先级

!important > 内联 > id选择器 > 类选择器 > 标签选择器

多个类选择器叠加(256)之后的优先级大于一个id选择器

!important 用于强调CSS属性具有最高的优先级。IE6不支持这种用法。

CSS选择器的种类:

  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)

2、CSS优先级权重计算法

CSS优先级的计算规则如下:

  1. 元素标签中定义的样式(Style属性),加1,0,0,0
  2. 每个ID选择符(如 #id),加0,1,0,0
  3. 每个Class选择符、每个属性选择符、每个伪类(:hover)加0,0,1,0
  4. 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1
  5. 然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值
  6. 然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。

3、超链接访问过后hover样式就不出现的问题是什么?如何解决?

被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A(link,visited,hover,active)

4、什么是Css Hack?ie6,7,8的hack分别是什么?

针对不同的浏览器写不同的CSS code的过程,就是CSS hack。

#test       {   
        width:300px;   
        height:300px;   
        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow\0;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/    }  
        :root #test { background-color:purple\9; }  /*ie9*/
    @media all and (min-width:0px){ 
          #test {background-color:black\0;} 
     }  /*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0){ 
#test {background-color:gray;} 
}       /*chrome and safari*/

5、描述一个"reset"的CSS文件并如何使用它。知道normalize.css吗?你了解他们的不同之处?

不同的浏览器对一些元素有不同的默认样式,如果你不处理,在不同的浏览器下会存在必要的风险,或者更有戏剧性的性发生。

  你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格,但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理,但又不扰乱其他的东西(如粗体的标题)。

6、display:none与visibility:hidden的区别是什么?

display : 隐藏对应的元素但不挤占该元素原来的空间。

visibility: 隐藏对应的元素并且挤占该元素原来的空间。

  即是,使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。

7、CSS盒子模型

Box Model规定了元素框处理元素内容(element content)、内边距(padding)、边框(border) 和 外边距(margin) 的方式。盒子模型有 block,inline-block,inline,flex,table-cell等几种显示方式。

元素的高度和宽度指的是盒子模型的content区域的高度和宽度,不包括内边距以外的部分。(IE的content则是包含border、内边距和content)。盒子模型有两种,W3C标准盒子模型(content-box)以及IE盒子模型(border-box)。

8、相对定位relative、浮动float以及绝对定位absolute的区别?

1)相对定位是在常规流中的定位。一旦一个框按照常规流或者是浮动得到定位,它还可以相对该位置而偏移, 这就是相对定位。偏移后,在常规流中依然占据原有位置,偏移量并不会对后续的block产生挤占,后续的块就好像没有感知到偏移,依然按照常规流位置排位。

2)绝对定位(Absolute positioning)元素定位的参照物是其包含块(第一个relative定位的祖先元素)进行定位,不一定是其父元素。绝对定位元素完全脱离了常规流,每个绝对定位的框都可以看做一个单独的图层,不会对其他层框的定位产生影响。绝对元素定位的 top 和 left 值跟绝对元素未脱离常规流之前在常规流中位置有关。

3)浮动框就是一个框在当前行被向左或向右挪动(偏移),它不在常规流中。在该浮动框之前或之后创建的非定位框垂直排列,就好象浮动框并不存在一样。当前行里浮动框前的任何内容,都将被重新排列到该浮动另一侧的第一个可用行里。

9、清除浮动的用法?

在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。

使用方法:

1、在浮动元素后使用一个空元素如

,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。

2、给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动

3、什么都不做,给浮动元素后面的元素添加clear属性。

4、利用伪类清除浮动,给浮动元素的容器添加一个clearfix的 class,然 后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。 //一种常见利用伪类清除浮动的代码

.clearfix:after {
    content:".";       //这里利用到了content属性
    display:block; 
    height:0;
    visibility:hidden; 
    clear:both; 
}
.clearfix { 
    *zoom:1; 
}

10、BOX模型的margin在IE比在其他浏览器大2px的解决办法

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个 属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样: div{maring:30px;margin:28px} 重复定义的话按照最后一个来执行,所以不可以只写 margin:XXpx!important; 也可以这样子hack

div { _margin:28px;margin:28px\9;margin:30px;}

11、IE 3像素Bug的产生原因及解决办法

当在同一行相邻出现一个浮动的块元素和一个非浮动的块元素时,两块元素之间就会出现3px的裂痕。

解决办法就是:对其中一个元素添加“_margin-*:-3px”的CSS属性,或者将另外一个非浮动的元素设为浮动。

12、IE6 双边距Bug的产生原因及解决办法

当我们在浮动元素上面添加margin-*的属性的时候,比如在float:left的元素CSS添加margin-left:50px,那么最终在IE6下面的显示就是该元素的margin-left最终变为100px,边距翻倍。 解决办法:添加_display:inline

原文链接:https://m.imooc.com/article/2181

本文链接:http://www.laijianlou.top/post/css0.html

-- EOF --

Comments