前端面试题总结(二)CSS篇

前端面试题总结(二)CSS篇

一、link和@import的区别?

  1. link属于HTML标签,可以引入出css以外的事务,如RSS,而@import是css提供的,只能加载css文件。
  2. link会在页面加载同时加载,@import会等到页面加载完成再加载。
  3. import只在IE5以上才能识别,link五兼容性问题。
  4. link防止的样式权重,高于@import的权重。
  5. link可以使用JavaScript控制dom改变样式,@import不可以。

二、常见兼容性?

  1. png24位的图片在IE6浏览器上会出现背景(做成png8)。
  2. 浏览器默认的margin和padding不同(加一个全局的样式padding:0;margin:0;)。
  3. IE6双边距(块元素浮动后,又有横向margin情况下,在IE6显示的margin比设置的大)。
  4. 设置子元素与父元素之间的外间距时会产生塌陷(给父元素设置浮动或overflow,尽量使用padding)。
  5. 浮动IE产生的双倍距离(#box{ float:left; width:10px; margin:0 0 0 100px;})。
  6. 上下margin重合问题
  7.   ie和ff都存在,相邻的两个div的margin-left和margin-right不会重合,但是margin-top和margin-bottom却会发生重合。
  8.   解决方法,养成良好的代码编写习惯,同时采用margin-top或者同时采用margin-bottom。
  9. 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active。
  10. 3像素问题 使用float引起的 使用dislpay:inline -3px。
  11. Ie z-index问题 给父级添加position:relative。
  12. Min-height 最小高度 !Important 解决’。
  13. select 在ie6下遮盖 使用iframe嵌套。
  14. 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)。
  15. IE5-8不支持opacity,解决办法:
1
2
3
4
5
6
.opacity {
  opacity: 0.4
  filter: alpha(opacity=60); /* for IE5-7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
        /* for IE 8*/
}   

  

三、css3有哪些新特性?

  1. 圆角。(border-radius)
  2. 阴影。(box-shadow/text-shadow)
  3. 渐变。(gradient)
  4. 旋转、定位、缩放、倾斜。(transform:rotate/translate/scale/skew)
  5. 增加了更多选择器。
  6. 多背景。
  7. rgba。
  8. 动画。
  9. 媒体查询。
  10. 多栏布局与盒布局。
  11. 新的盒模型计算方式(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共同点与不同点?
  共同点:

    1. 改变行内元素的呈现方式,display被设置为block。
    2. 让元素脱离正常文档流,不占据空间。
    3. 默认会覆盖到非定位元素上。

  不同点:
      absolute的根元素是可以设置的,非fixed的根元素固定为浏览器窗口。当滚动页面时,fixed元素与浏览器窗口直接的距离是不变的。

八、为什么要初始化样式?“reset.css”的作用和使用它的好处。

  1. 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。但是会对SEO有一定的影响,但鱼与熊掌不可兼得,但力求影响最小的情况下初识话。
  2. 初始化CSS样式主要是提高编码质量,如果不初始化整个页面做完很糟糕,重复的CSS样式很多。去掉标签的默认样式如:margin,padding,其他浏览器默认解析字体大小,字体设置。
  3. 浏览器品种很多,每个浏览器默认样式也不同,所以定义一个reset.css可以使浏览器默认样式统一。

九、CSS Sprites是什么?如何使用?

  其实就是把网页中一些背景图整合一张图片文件中,再利用css的background进行背景定位。可以减少图片请求的开销。但是请求虽然可以并发,一般浏览器都只有6个。但是对于未来而言,就不需要这样了,因为有了http2。

十、解释下浮动、以及其工作原理?清除浮动的技巧。

  1. 浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或浮动元素的边框停留。
  2. 浮动会导致父元素高度塌陷,与浮动元素同级的非浮动元素会跟随其后,若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。
  3. 清除浮动:浮动元素后面使用空标签设置clear:both,父元素使用overflow,父元素浮动,父元素设置固定高,使用after伪对象清除。

十一、position:absoiute和float的异同?

  • 共同点:对内联元素设置absoiute和float属性,可以让元素脱离文档流,并且可以设置其宽高。
  • 不同点:float仍会占用位置,absolute会覆盖文档流中的其他元素。

十二、zoom:1清除浮动的原理?

  1. 触发hasLayout。
  2. zoom属性是IE浏览器的专有属性,可以设置或检索对象的缩放比例。解决IE下比较奇葩的bug。当设置zoom的值后,所设置的元素就会扩大或缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了IE下子元素浮动时父元素不随着自动扩大的问题。

十三、什么是css Hack?

  一般来说是针对不同浏览器写不同的css就是css Hack。
  IE浏览器Hack又分为三种,条件、属性级、选择符。

十四、less与sass和scss?以及区别?

  1. 他们是动态的样式语言,是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。
  2. 变量符不一样,less是@,而Sass是$;
  3. Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持;
  4. Sass是基于Ruby的,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出Css到浏览器

十五、什么是css预处理、后处理?

  预处理如less、sass、stylus用来预编译sass或less,增强了css代码的复用性,还有层级、mixin、变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。
  后处理如PostCSS,通常被视为在完成的样式表中根据css规范处理css,让其更有效;目前最常做的是给css属性添加浏览器私有前缀,实现跨浏览器兼容性的问题。

十六、书写高效css时会有哪些问题?

  1. 样式:从右往左的解析一个选择器。
  2. ID最快,依次是ID、class、tag、universal。
  3. 不要tag-qualify(tag#id),ID已经是唯一了,不需要tag来标识,这样做会让选择器变慢。
  4. 后代选择器最糟糕。
  5. 知道为什么这么写。
  6. css3的效率问题(css3的选择器能很快的定位到想要的元素,又保证了代码整洁易读,但是会浪费很多的浏览器资源)。
  7. 我们知道ID速度是最快的,但不能为了效率而牺牲可读性和可维护性。

十七、你用过媒体查询,或针对移动端的布局/CSS嘛?

  媒体查询,就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让css可以更精确作用于不同的媒介类型和同一媒介的不同条件。
  语法结构:@media 设备名 only(选取条件) not(选取条件) and(设备选取条件),设备二{sRules};

十八、如果设计中使用了非标准字体,你该如何实现?

  所谓的标准字体是多数机器上都会有的,或者即使没有也可以由默认字体代替的字体。

  1. 用图片代替。
  2. web fonts在线字库。
  3. @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定位原点是?

  1. block 象块类型元素一样显示。
    • none 缺省值。向行内元素类型一样显示。
    • inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
    • list-item 象块类型元素一样显示,并添加样式列表标记。

   2. position的值

    • absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
    • fixed (老IE不支持):生成绝对定位的元素,相对于浏览器窗口进行定位。
    • relative:生成相对定位的元素,相对于其正常位置进行定位。
    • static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。
    • inherit 规定从父元素继承 position 属性的值。

二十三、知道css有个content属性吗?有什么作用?有什么应用?

  1. css的content属性专门应用在 before/after 伪元素上,用来插入生成内容。最常见的应用是利用伪类清除浮动。
  2. 知道css计数器(序列数字字符自动递增)吗?如何通过css content属性实现css计数器?
    • css计数器是通过设置counter-reset、counter-increment两个属性、及 counter()/counters()一个方法配合after/before 伪类实现

二十四、有哪项方式可以对一个DOM设置它的CSS样式? 

  1. 外部样式表,引入一个外部css文件
  2. 内部样式表,将css代码放在 <head> 标签内部内联样式,将css样式直接定义在 HTML 元素内部

二十五、对BFC规范的理解?

  1. BFC,块级格式化上下文,以创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关)的margin会发生折叠。
  2. w3c css2.1规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。

二十六、什么是FOUC(无样式内容闪烁)?如何避免FOUC?

  • FOUC(Flash Of Unstyled Content)——文档样式闪烁。
  • 而引用css文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的dom,然后再去导入外部的css文件,因此,在页面dom加载完成到css导入完成中间会有一段时间页面上的内容是没有样式的,这段时间的长短和网速、电脑速度有关。解决方法是在head之间加入一个link标签或script标签。或者是把@import换成link引入。
上一篇:[转]Sql server 大数据量分页存储过程效率测试附代码


下一篇:[译]终极塔防——运用HTML5从头创建一个塔防游戏