前端面试题总结(二)CSS篇
一、link和@import的区别?
- link属于HTML标签,可以引入出css以外的事务,如RSS,而@import是css提供的,只能加载css文件。
- link会在页面加载同时加载,@import会等到页面加载完成再加载。
- import只在IE5以上才能识别,link五兼容性问题。
- link防止的样式权重,高于@import的权重。
- link可以使用JavaScript控制dom改变样式,@import不可以。
二、常见兼容性?
- png24位的图片在IE6浏览器上会出现背景(做成png8)。
- 浏览器默认的margin和padding不同(加一个全局的样式padding:0;margin:0;)。
- IE6双边距(块元素浮动后,又有横向margin情况下,在IE6显示的margin比设置的大)。
- 设置子元素与父元素之间的外间距时会产生塌陷(给父元素设置浮动或overflow,尽量使用padding)。
- 浮动IE产生的双倍距离(#box{ float:left; width:10px; margin:0 0 0 100px;})。
- 上下margin重合问题
- ie和ff都存在,相邻的两个div的margin-left和margin-right不会重合,但是margin-top和margin-bottom却会发生重合。
- 解决方法,养成良好的代码编写习惯,同时采用margin-top或者同时采用margin-bottom。
- 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active。
- 3像素问题 使用float引起的 使用dislpay:inline -3px。
- Ie z-index问题 给父级添加position:relative。
- Min-height 最小高度 !Important 解决’。
- select 在ie6下遮盖 使用iframe嵌套。
- 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)。
- IE5-8不支持opacity,解决办法:
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
/* for IE 8*/
}
三、css3有哪些新特性?
- 圆角。(border-radius)
- 阴影。(box-shadow/text-shadow)
- 渐变。(gradient)
- 旋转、定位、缩放、倾斜。(transform:rotate/translate/scale/skew)
- 增加了更多选择器。
- 多背景。
- rgba。
- 动画。
- 媒体查询。
- 多栏布局与盒布局。
- 新的盒模型计算方式(box-sizing)。
四、css3的新增伪类举例?
first-of-type、first-child、last-child、last-of-type、only-child、nth-child、enabled、checked、only-of-type、roo。。。。
唯一的伪元素:::selection。
五、什么是css层叠?
css层叠式针对同一元素配置同一属性,权重高。
六、display:none和visibility:hidden的区别?
display:none隐藏元素,在文档布局中不在给它分配空间,它个边的元素会合拢,就当他从来不存在。
visibility:hidden隐藏元素,但是在文档布局中仍保留原来的空间。
七、position的absolute和fixed共同点与不同点?
共同点:
-
- 改变行内元素的呈现方式,display被设置为block。
- 让元素脱离正常文档流,不占据空间。
- 默认会覆盖到非定位元素上。
不同点:
absolute的根元素是可以设置的,非fixed的根元素固定为浏览器窗口。当滚动页面时,fixed元素与浏览器窗口直接的距离是不变的。
八、为什么要初始化样式?“reset.css”的作用和使用它的好处。
- 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。但是会对SEO有一定的影响,但鱼与熊掌不可兼得,但力求影响最小的情况下初识话。
- 初始化CSS样式主要是提高编码质量,如果不初始化整个页面做完很糟糕,重复的CSS样式很多。去掉标签的默认样式如:margin,padding,其他浏览器默认解析字体大小,字体设置。
- 浏览器品种很多,每个浏览器默认样式也不同,所以定义一个reset.css可以使浏览器默认样式统一。
九、CSS Sprites是什么?如何使用?
其实就是把网页中一些背景图整合一张图片文件中,再利用css的background进行背景定位。可以减少图片请求的开销。但是请求虽然可以并发,一般浏览器都只有6个。但是对于未来而言,就不需要这样了,因为有了http2。
十、解释下浮动、以及其工作原理?清除浮动的技巧。
- 浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或浮动元素的边框停留。
- 浮动会导致父元素高度塌陷,与浮动元素同级的非浮动元素会跟随其后,若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。
- 清除浮动:浮动元素后面使用空标签设置clear:both,父元素使用overflow,父元素浮动,父元素设置固定高,使用after伪对象清除。
十一、position:absoiute和float的异同?
- 共同点:对内联元素设置absoiute和float属性,可以让元素脱离文档流,并且可以设置其宽高。
- 不同点:float仍会占用位置,absolute会覆盖文档流中的其他元素。
十二、zoom:1清除浮动的原理?
- 触发hasLayout。
- zoom属性是IE浏览器的专有属性,可以设置或检索对象的缩放比例。解决IE下比较奇葩的bug。当设置zoom的值后,所设置的元素就会扩大或缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了IE下子元素浮动时父元素不随着自动扩大的问题。
十三、什么是css Hack?
一般来说是针对不同浏览器写不同的css就是css Hack。
IE浏览器Hack又分为三种,条件、属性级、选择符。
十四、less与sass和scss?以及区别?
- 他们是动态的样式语言,是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。
- 变量符不一样,less是@,而Sass是$;
- Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持;
- Sass是基于Ruby的,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出Css到浏览器
十五、什么是css预处理、后处理?
预处理如less、sass、stylus用来预编译sass或less,增强了css代码的复用性,还有层级、mixin、变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。
后处理如PostCSS,通常被视为在完成的样式表中根据css规范处理css,让其更有效;目前最常做的是给css属性添加浏览器私有前缀,实现跨浏览器兼容性的问题。
十六、书写高效css时会有哪些问题?
- 样式:从右往左的解析一个选择器。
- ID最快,依次是ID、class、tag、universal。
- 不要tag-qualify(tag#id),ID已经是唯一了,不需要tag来标识,这样做会让选择器变慢。
- 后代选择器最糟糕。
- 知道为什么这么写。
- css3的效率问题(css3的选择器能很快的定位到想要的元素,又保证了代码整洁易读,但是会浪费很多的浏览器资源)。
- 我们知道ID速度是最快的,但不能为了效率而牺牲可读性和可维护性。
十七、你用过媒体查询,或针对移动端的布局/CSS嘛?
媒体查询,就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让css可以更精确作用于不同的媒介类型和同一媒介的不同条件。
语法结构:@media 设备名 only(选取条件) not(选取条件) and(设备选取条件),设备二{sRules};
十八、如果设计中使用了非标准字体,你该如何实现?
所谓的标准字体是多数机器上都会有的,或者即使没有也可以由默认字体代替的字体。
- 用图片代替。
- web fonts在线字库。
- @font-facs,webfonts。
十九、解释下浏览器是如何判断元素是否匹配某个css选择器?
从后往前判断。浏览器先产生一个集合,这个集合往往由最后一个部分的索引产生(如果没有索引就是所有元素的集合)。然后向上匹配,如果不符合上一个部分,就把元素从集合中删除,知道整个选择器都匹配完,还在集合中的元素就匹配这个选择器了。
二十、超链接访问过后hover样式就不出现的问题是什么?如何解决?
被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A(link,visited,hover,active)
二十一、css中可以让文字在垂直和水平方向上重叠的两个属性是什么?
- 垂直方向:line-height
- 水平方向:letter-spacing
- letter-spacing的妙用知道有哪些么?
- 可以用于消除inline-block元素间的换行符空格间隙问题
二十二、列出display的值,说明他们的作用。position的值, relative和absolute定位原点是?
- block 象块类型元素一样显示。
-
- none 缺省值。向行内元素类型一样显示。
- inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
- list-item 象块类型元素一样显示,并添加样式列表标记。
2. position的值
-
- absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
- fixed (老IE不支持):生成绝对定位的元素,相对于浏览器窗口进行定位。
- relative:生成相对定位的元素,相对于其正常位置进行定位。
- static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。
- inherit 规定从父元素继承 position 属性的值。
二十三、知道css有个content属性吗?有什么作用?有什么应用?
- css的content属性专门应用在 before/after 伪元素上,用来插入生成内容。最常见的应用是利用伪类清除浮动。
- 知道css计数器(序列数字字符自动递增)吗?如何通过css content属性实现css计数器?
-
- css计数器是通过设置counter-reset、counter-increment两个属性、及 counter()/counters()一个方法配合after/before 伪类实现
二十四、有哪项方式可以对一个DOM设置它的CSS样式?
- 外部样式表,引入一个外部css文件 内部样式表,将css代码放在 <head> 标签内部内联样式,将css样式直接定义在 HTML 元素内部
二十五、对BFC规范的理解?
- BFC,块级格式化上下文,以创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关)的margin会发生折叠。
- w3c css2.1规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。
二十六、什么是FOUC(无样式内容闪烁)?如何避免FOUC?
- FOUC(Flash Of Unstyled Content)——文档样式闪烁。
- 而引用css文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的dom,然后再去导入外部的css文件,因此,在页面dom加载完成到css导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短和网速、电脑速度有关。解决方法是在head之间加入一个link标签或script标签。或者是把@import换成link引入。
本文章出自小小菜鸟学web,转载请注明