前端面试中的css经常使用知识点总结

一、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)

二、CSS优先级权重计算法

CSS优先级的计算规则以下：

元素标签中定义的样式（Style属性）,加1,0,0,0

每一个ID选择符(如 #id),加0,1,0,0

每一个Class选择符、每一个属性选择符、每一个伪类（:hover）加0,0,1,0

每一个元素选择符（如p）或伪元素选择符(如 :firstchild)等，加0,0,0,1

而后，将这四个数字分别累加，就获得每一个CSS定义的优先级的值

而后从左到右逐位比较大小，数字大的CSS样式的优先级就高。

三、超连接访问事后hover样式就不出现的问题是什么？如何解决？

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

四、什么是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*/

复制代码

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

不一样的浏览器对一些元素有不一样的默认样式，若是你不处理，在不一样的浏览器下会存在必要的风险，或者更有戏剧性的性发生。 你可能会用Normalize来代替你的重置样式文件。它没有重置全部的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其余的东西（如粗体的标题）。

六、display:none与visibility:hidden的区别是什么？

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

visibility: 隐藏对应的元素而且挤占该元素原来的空间。 便是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各类属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（彻底透明），而它所占据的空间位置仍然存在。

七、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）。

给你们推荐一个技术交流学习圈，里面归纳移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。获取资料 对web开发技术感兴趣的同窗，能够加入交流圈👉👉👉1007317281，无论你是小白仍是大牛都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时天天更新视频资料。

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

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

2）绝对定位（Absolute positioning）元素定位的参照物是其包含块（第一个relative定位的祖先元素）进行定位，不必定是其父元素。绝对定位元素彻底脱离了常规流，每一个绝对定位的框均可以看作一个单独的图层，不会对其余层框的定位产生影响。绝对元素定位的 top 和 left 值跟绝对元素未脱离常规流以前在常规流中位置有关。

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

九、清除浮动的用法？

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

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

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

二、给浮动元素的容器添加overflow:hidden;或overflow:auto;能够清除浮动

三、什么都不作，给浮动元素后面的元素添加clear属性。

四、利用伪类清除浮动，给浮动元素的容器添加一个clearfix的class，然 后给这个class添加一个:after伪

元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

//一种常见利用伪类清除浮动的代码

.clearfix:after {

    content:"."; //这里利用到了content属性

    display:block;

    height:0;

    visibility:hidden;

    clear:both;

}       //欢迎加入前端全栈开发交流圈一块儿学习交流：1007317281

.clearfix {

    *zoom:1;

}

复制代码

十、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;}

复制代码

十一、IE 3像素Bug的产生缘由及解决办法

当在同一行相邻出现一个浮动的块元素和一个非浮动的块元素时，两块元素之间就会出现3px的裂痕。 解决办法就是：对其中一个元素添加“_margin-*:-3px”的CSS属性，或者将另一个非浮动的元素设为浮动。

十二、IE6 双边距Bug的产生缘由及解决办法

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

1三、FOUC - Flash Of Unstyled Content 文档样式闪烁

<style type="text/css"  media="all">@import  "../fouc.css";</style>

复制代码

而引用CSS文件的@import就是形成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，而后再去导入外部的CSS文件，所以，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。 解决方法简单的出奇，只要在之间加入一个或者