面试题总结：https://segmentfault.com/a/11...pxrememdifference1.px1.相对长度单位。相对于显示器屏幕分辨率。2.存在浏览器不兼容问题。2.em1。相对长度单位。相对于当前对象中文本的字体大小。2、em的值不固定，em会继承父元素的大小。3.如果parent设置font-size:20px，那么1em=20px。2em=40px；如果父级将font-size设置为30px。1em=30px。2em=60px。4.存在字体设置容易造成混淆的问题。3.rem1。相对长度单位。计算相对于根节点的html字体大小。任何浏览器的默认字体高度都是16px。2、如果设置HTML根节点的font-size为100px，则1em=100px。2em=200px。它与父字体无关。3.浏览器兼容性比较好。display:none和visibility:hidden有什么区别？display:none隐藏对应的元素，在文档布局中不给它分配空间，它每一边的元素都会被关闭，就好像它从未存在过一样。visibility:hidden隐藏相应的元素，但保留文档布局中的原始空间。CSS中的link和@import有什么区别？(1)link为HTML标签，@import由CSS提供；(2)页面加载时，会同时加载链接，@import引用的CSS会等到页面加载完成后再加载；(3)import只能被IE5及以上识别，link是HTML标签，不存在兼容性问题；(4)链接样式的权重高于@import。告诉我有关box-sizing属性和盒子模型的信息？盒子模型：content+border+padding+margin盒子模型分为：基础模型（w3c标准盒子模型）+IE模型（基础模型width=contentIE模型width=content+border+padding）如何区分basicmodel而IE模型Css3新加入的属性Box-sizing有两个值content-box（基础模型）和border-box（IE模型），获取框模型对应的宽高：dom.style.width/heightbox-sizing属性主要用于控制元素的大小解析方式为盒模型。默认值为内容框。content-box：让元素保持W3C标准盒模型。元素的宽/高由border+padding+content的宽/高决定。设置width/height属性是指content部分的width/height。怪癖模式）。设置width/height属性是指border+padding+content标准浏览器，按照W3C规范解析盒模型。一旦修改了元素的border或者padding，就会影响到元素的boxsize，不得不重新计算元素的boxsize，从而影响整个页面的布局。什么是CSS选择器？哪些属性可以继承？优先级算法是如何计算的？CSS3中的新伪类是什么？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)可继承样式：font-sizefont-family颜色，文本缩进；不可继承的样式：borderpaddingmarginwidthheight；priority:!important>id>class>tag(important比inline有更高的优先级，但是inline的链接比id高)CSS3新伪类例子：p:first-of-type选取属于的每个
元素到其父元素的第一个
元素。p:last-of-type选择作为其父元素的最后一个
元素的每个
元素。p:only-of-type选择作为其父元素唯一的
元素的每个
元素。p:only-child选择每个
元素，该元素是其父元素的唯一子元素。p:nth-child(2)选择作为其父元素的第二个子元素的每个
元素。:enabled:disabled控制表单控件的禁用状态。:checked单选或复选框被选中。position的值，relative和absolute是相对于谁定位的？absolute生成绝对定位的元素，相对于最近的非静态定位的父元素定位。fixed（旧IE不支持）生成绝对定位的元素，相对于浏览器窗口定位。relative生成??相对定位的元素，相对于它们在正常流中的位置定位。静态默认。没有定位，元素出现在正常流中CSS3有哪些新特性？官网教程：https://www.runoob.com/css3/c...CSS3实现圆角（border-radius）、阴影（box-shadow）、文字特效（text-shadow）、线性渐变(gradient),rotation(transform)transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//旋转，缩放，定位，倾斜添加更多CSS选项唯一CSS3中引入的伪元素是::selection。媒体查询、多列布局border-imageBFC规范的理解？BFC是块级格式化上下文。是页面中一个相对独立的渲染区域。它决定了内部子元素如何放置和定位，以及区域内部元素和外部元素的关系。特点：1、bfc可以包含浮动元素2、bfc确定的区域不会与外部浮动元素重叠3、同一个bfc下相邻的块级子元素在margin中垂直重叠Howtocreatebfc:floatvalueNotnone,overflow的值为auto，display的值为inline-block，position的值为flex或absolute常见的兼容性问题？PNG24位图像出现在iE6浏览器的背景中。解决方案是将其设为PNG8。也可以引用脚本进行处理。浏览器默认的margin和padding是不一样的。解决办法是加一个全局的*{margin:0;padding:0;}来统一。IE6bilateralmarginbug：block属性标签float后有水平margin，ie6显示的margin比设置的大。floating产生的doubledistanceie（IE6双边间距问题：IE6下，如果在元素上设置floating，同时设置margin-left或margin-right，margin值会加倍。）#框{浮动：左；宽度：10px；margin:000100px;}在这种情况下，IE将生成一个20px的距离。解决办法是加上——_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下，event对象有x,y属性，没有pageX,pageY属性；在Firefox下，事件对象有pageX,pageY属性，但是没有x,y属性。解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求次数。默认情况下，Chrome中文界面会强制小于12px的文字以12px显示，可以通过添加CSS属性-webkit-text-size-adjust:none;来解决。访问超链接后，不会出现悬停样式。链接样式不再有hover和active解决方法是改变CSS属性的顺序：L-V-H-A:a:link{}a:visited{}a:hover{}a:active{}奇怪的模式问题：缺少DTD声明，Firefox页面仍然会以标准模式解析，但在IE中会触发quirks模式。为了避免怪异的模式带来不必要的麻烦，最好养成编写DTD语句的好习惯。现在可以使用html5推荐的写法了：