@import"../fouc.css";1.CSS选择器的优先级！important>inline>idselector>classselector>labelselector多个类选择器叠加后的优先级(256)大于一个id选择器!important用来强调CSS属性的优先级最高。IE6不支持这种用法。CSS选择器的种类：1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ul>li)6.后代选择器(lia)7.通配符选择器(*)8.属性选择器(a[rel="external"])9.伪类选择器(a:hover,li:nth-child)2.CSS优先级权重计算方法CSS优先级计算规则如下：元素标签中定义的样式（Style属性），每个ID选择器（如#id）加1,0,0,0，加0,1,0,0对每个Class选择器，每个属性选择器，每个伪类（:hover）加上0,0,1,0，对每个元素选择器（如p）或伪元素选择器（如：firstchild）等，添加将0,0,0,1这四个数字分别相加得到每个CSS定义的优先级值然后从左到右逐位比较大小，数字越大的CSS样式优先级越高。3、访问超链接后不出现hover样式是什么问题？怎么解决？单击访问的超链接样式不再具有悬停和活动状态。解决办法是改变CSS属性的顺序：L-V-H-A（link,visited,hover,active）4.什么是CssHack？ie6、7、8的hack是什么？为不同的浏览器编写不同的CSS代码的过程就是CSShacking。#test{宽度：300px;高度：300px；背景色：蓝色；/*firefox*/background-color:red\9;/*allie*/ie+8background-color:yellow/*background-color:pink;/*ie7*/_background-color:orange;/*ie6*/}:root#test{背景色:紫色\9;}/*ie9*/@mediaalland(min-width:0px){#test{background-color:black\0;}}/*opera*/@mediascreenand(-webkit-min-device-pixel-比率：0）{#test{背景颜色：灰色；}}/*chrome和safari*/5.描述一个“重置”CSS文件以及如何使用它。知道normalize.css吗？你了解他们的区别吗？不同的浏览器对某些元素有不同的默认样式。如果不处理，在不同的浏览器下会有必要的风险，或者会发生更戏剧化的事情。您可以使用Normalize而不是您的重置样式文件。它不会重置所有样式，而只会提供一组合理的默认样式值。使其在浏览器中保持一致和合理，而不会破坏其他内容（例如粗体标题）。6.display:none和visibility:hidden有什么区别？display:隐藏对应元素，但不占用元素原有空间。visibility：隐藏对应元素，占据元素原有空间。即使用CSSdisplay:none属性后，HTML元素（对象）的width、height等属性值将“丢失”；而在使用visibility:hidden属性后，HTML元素（对象）只是在视觉上是不可见的（完全透明），而它所占据的空间位置仍然存在。7.CSS盒模型BoxModel规定了元素盒处理元素内容、padding、border和margin的方式。盒模型有block、inline-block、inline、flex、table-cell等几种显示模式。如图所示，一个元素的高和宽是指盒模型内容区域的高和宽，不包括padding以外的部分。（IE的内容包括border、padding和content）。盒子模型有两种，W3C标准盒子模型（content-box）和IE盒子模型（border-box）。给大家推荐一个技术交流学习圈，总结了移动应用网站开发，css，html，webpack，vuenodeangular，面试资源。获取资料对web开发技术感兴趣的同学可以加入交流圈???1007317281，不管你是新手还是大牛，都欢迎。还有大牛整理的一套高效学习路线和教程，免费分享给大家。同时每天更新视频数据。8、相对定位、浮动float和绝对定位有什么区别？1）相对定位就是在常规流中定位。一个盒子一旦按照正常流向或浮动定位，它也可以相对于那个位置进行偏移，这就是相对定位。offset之后，依然占据常规流中原来的位置，offset不会排挤后面的区块，后面的块好像不知道offset一样，依然按照常规流位置排序。2）绝对定位（Absolutepositioning）元素定位的参考是它的包含块（第一个相对定位祖先元素）进行定位，不一定是它的父元素。绝对定位的元素完全脱离了正常的流向，每个绝对定位的盒子都可以看成一个单独的层，不会影响其他层盒子的定位。绝对元素定位的top和left值与绝对元素在脱离正常流之前在正常流中的位置有关。3)浮动框是在当前行中向左或向右移动（偏移）的框，它不在正常流中。在此浮动对象之前或之后创建的未定位框垂直对齐，就好像浮动对象不存在一样。当前行中浮动前面的任何内容都将重新排列到浮动另一侧的第一个可用行中。9、如何清除浮动？在非IE浏览器（如Firefox）中，当容器高度为auto时，且容器内容中有浮动（float为left或right）元素时，这种情况下，容器高度无法调整自动拉伸以适应内容的高度，使内容溢出容器外，影响（甚至破坏）布局。这种现象称为浮点溢出，而防止这种现象的CSS处理称为CSS清除浮点。使用方法：1、在浮动元素后面使用一个空元素如
，并在CSS中赋值.clear{clear:both;}属性来清除浮动。2.添加溢出：隐藏；或溢出：自动；到浮动元素的容器中清除浮动3.什么都不做，给浮动元素后面的元素加上clear属性。4.使用伪类清除浮动，在浮动元素的容器中添加一个clearfix类，然后在该类中添加一个:after伪元素，实现在最后添加一个不可见的块元素（Blockelement）清除浮动的元素。//使用伪类清除floats的常用代码.clearfix:after{content:".";//这里使用了content属性display:block;高度：0；可见性：隐藏；clear:both;}//欢迎加入前端全栈开发交流圈一起学习交流：1007317281.clearfix{*zoom:1;}10.BOX模型的边距在IE中比IE大2px在其他浏览器中div{margin:30px!important;margin:28px;}注意这两个边距的顺序不能颠倒，阿杰说的！important属性不被IE识别，但被其他浏览器识别。所以在IE中，其实是这样解释的：div{maring:30px;margin:28px}如果重复定义，会按照上一次执行，所以不能只写margin:XXpx!important;你也可以hackdiv{_margin:28px;margin:28px\9;margin:30px;}11.IE3pixelbug的原因及解决方法当浮动块元素和非浮动块元素相邻出现在同一个线，两个元素之间会有间隙。出现一个3px的裂缝。解决方法是：给其中一个元素添加“_margin-*:-3px”CSS属性，或者将另一个非浮动元素设置为浮动。12、IE6双边距离bug的原因及解决方法。当我们在浮动元素上添加margin-*属性时，比如在float:left元素CSS中添加margin-left:50px，那么在IE6下最终显示为该元素的margin-left最终为100px，将margin加倍.解决方法：添加_display:inline13,FOUC-FlashOfUnstyledContent文档样式闪烁
