前端面试题总结(二)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引入。

前端面试题总结(二)CSS篇的更多相关文章

  1. 前端面试题整理—HTML/CSS篇

    1.简述一下你对HTML语义化的理解 1)用正确的标签做正确的事情 2)html语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析 3)即使在没有样式CSS情况下也以一种文档格式显示,并 ...

  2. 常见前端面试题之HTML/CSS部分

    转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...

  3. 史上最全前端面试题(含答案)-A篇

    HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所 ...

  4. 前端面试题(HTML/CSS)

    (前端面试题大全,持续更新) 常用的块级元素和行内元素有哪些?说说他们的特点? 浮动产生的原因?清除浮动? 说说一下盒模型 float和position一起用是什么效果 rem用过吗?做不同手机的适配 ...

  5. 各大互联网公司前端面试题(HTML/CSS)

    Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto ...

  6. 前端面试题——html与css基础篇

    整理一波html和css的面试题,侧重基础,希望明天面试能用到~(╥╯^╰╥) 一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.C ...

  7. 前端面试题整理(css)

    1.介绍所知道的CSS hack技巧(如:_, *, +, \9, !important 之类). CSS hack的原理: 由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优 ...

  8. 史上最全前端面试题(含答案)-B篇

    面试有几点需要注意面试题目: 根据你的等级和职位变化,入门级到专家级:范围↑.深度↑.方向↑.题目类型: 技术视野.项目细节.理论知识型题,算法题,开放性题,案例题.进行追问: 可以确保问到你开始不懂 ...

  9. 最近面试前端面试题整理(css部分)

    对最近面试的面试题坐下总结: 一,css部分 1,html元素的垂直居中 答案: <div id="box"> <div> 测试 </div> ...

  10. 前端面试题整理(html篇)

    1.Doctype作用?标准模式与兼容模式各有什么区别? <!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器用什么文档标准 ...

随机推荐

  1. 关于$_SERVER['PHP_SELF']用法及其安全性---改良

    网站来源:http://www.5idev.com/p-php_server_php_self.shtml PHP 使用 $_SERVER['PHP_SELF'] 获取当前页面地址及其安全性问题 PH ...

  2. 微调Inception V3网络-对Satellite分类

    目录 1. 流程概述 2. 准备数据集 2.1 Satellite数据集介绍 3. Inception V3网络 4. 训练 4.1 基于Keras微调Inception V3网络 4.2 Keras ...

  3. Candies

    Candies Time Limit: 1500MS   Memory Limit: 131072K Total Submissions: 30247   Accepted: 8409 Descrip ...

  4. 使用Unity容器实现属性注入

    简介 Unity :是微软用C#实现的轻量级,可扩展的依赖注入容器. 控制反转:(Inversion of Control,缩写为IoC),是用来消减程序之间的耦合问题,把程序中上层对下层依赖,转移到 ...

  5. JAVA之动态编译

    通过Java动态生成class文件 今天说下JAVA中的动态编译,这个功能根据我现在的了解好像没有见到过用的,我Jio的吧,现在的一些在线代码编缉器可以用到了,这个具体我也不是很清楚.感兴趣的大家可以 ...

  6. ldap 报错整理

    1.httpd 无法启动 先用systemctl status httpd 查看一下日志 1.提示端口号是否冲突,修改httpd.conf端口号 2.提示没有权限:检查selinux,防火墙是否关闭或 ...

  7. 目前最全的浏览器/CSS选择器兼容性总结(2009-8-10更新)

    2009年2月24日,Safari 4.0 beta版正式发布,Safari从它的3.2版本开始就已经支持所有的CSS选择器(包括最新的CSS3).不过为了方便大家的工作,下面提供了最新版本的CSS选 ...

  8. 学习笔记之a,b=b,a+b与a=b,b=a+b的区别

       兔子序列中用到的常用的计算方法:a,b=b,a+b 当我们真正去运行的时候,会发现它与a=b,b=a+b是有区别的 实例代码如下: def YY(one): a,b,n=0,1,0 while( ...

  9. bzoj3159决战 码农题 树剖套splay

    最近沉迷码农题无法自拔 首先有一个暴力的想法:对于每个重链维护一个splay,需要翻转的连起来,翻转,接回去 然后发现这样没问题... 一条链只能跨log个重链,也就只有log个splay的子树参与重 ...

  10. 去掉word文档两边的空白

    1.设置-页面布局-页边距,把左边距和右边距的数据设置到最小就好,一般为0.43CM 2.把WORD页面顶部标尺,左右拉到最底,如图: 3.在打印预览里,设置页边距,操作方法同 上述 1,如图: