前端开发面试题总结之——CSS3


相关知识点

布局、 浮动、 盒子模型、 弹性和模型、 选择器优先级、 居中定位、 兼容性、 hack写法......

题目&答案

  • 如何理解CSS的盒子模型? 每个HTML元素都是长方形盒子。 (1)盒子模型有两种:IE盒子模型、标准W3C盒子模型;IE的content部分包含了border和pading。 (2)标准W3C盒模型包含:内容(content)、填充(padding)、边界(margin)、边框(border)。
  • link和@import的区别? (1)link属于XHTML标签,而@import是CSS提供的。 (2)页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载。 (3)import只在IE 5以上才能识别,而link是XHTML标签,无兼容问题。 (4)link方式的样式权重高于@import的权重。 (5)使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
  • CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS 3新增伪类有哪些? id选择器(# myid) 类选择器(.myclassname) 标签选择器(div、h1、p) 相邻选择器(h1 + p) 子选择器(ul < li) 后代选择器(li a) 通配符选择器( * ) 属性选择器(a[rel = "external"]) 伪类选择器(a: hover, li: nth - child) 可继承: font-size font-family color, UL LI DL DD DT; 不可继承 :border padding margin width height ; 优先级就近原则,样式定义最近者为准,载入样式以最后载入的定位为准。 优先级为: !important > id > class > tag important 比 内联优先级高 CSS3新增伪类举例: p:first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素。p:last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素。p:only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素。p:only-child 选择属于其父元素的唯一子元素的每个<p>元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素。 :enabled、:disabled 控制表单控件的禁用状态。 :checked 单选框或复选框被选中。
  • 如何居中div,如何居中一个浮动元素? 给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto; }
  • 如何居中一个浮动元素 确定容器的宽高,如宽500、高 300的层,设置层的外边距 .div { Width:500px ; height:300px;//高度可以不设 Margin: -150px 0 0 -250px; position:relative;相对定位 background-color:pink;//方便看效果 left:50%; top:50%; }
  • 经常遇到的浏览器的兼容性有哪些?原因、解决方法是什么? (1)png24为的图片在IE6浏览器上出现背景,解决方案是做成PNG8。 (2)浏览器默认的margin和padding不同,解决方案是加一个全局的*{margin:0;padding:0;}来统一。 (3)IE6双边距bug:块属性标签float后,又有横行的margin情况下,在IE 6显示margin比设置的大。 (4)浮动ie产生的双边距问题:块级元素就加display:inline;行内元素转块级元素display:inline后面再加display:table。 .bb{ background-color:#f1ee18; /*所有识别*/ .background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff; /*IE6、7识别*/ _background-color:#1e0bd1; /*IE6识别*/ }
  • 常用Hack的技巧: (1)IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性; (2)Firefox下,只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。 (3)IE下,even对象有x,y属性,但是没有pageX,pageY属性; (4)Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。解决方法是条件注释,缺点是在IE浏览器下可能会增加额外的HTTP请求数。 (5)Chrome 中文界面下默认会将小于12px的文本强制按照12px显示,可通过加入 CSS属性-webkit-text-size-adjust: none;来解决。 (6)超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不再具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
  • 列出display的值,说明它们的作用。position的值里,relative和absolute定位原点是? display的值: block 像块类型元素一样显示。none 缺省值。像行内元素类型一样显示。 inline-block 像行内元素一样显示,但其内容像块类型元素一样显示。 list-item 像块类型元素一样显示,并添加样式列表标记。 relative和absolute定位原点: absolute:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。 relative:生成相对定位的元素,相对于其正常位置进行定位。
  • 为什么要初始化CSS样式? 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。 最简单的初始化方法就是:* {padding: 0; margin: 0;} (笔者不建议这样) 淘宝的样式初始化: body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; }ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
  • CSS是怎样定义权重规则的? 以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:/*权重为1*/div{ }/*权重为10*/.class1{ }/*权重为100*/#id1{ }/*权重为100+1=101*/#id1 div{ }/*权重为10+1=11*/.class1 div{ }/*权重为10+10+1=21*/.class1 .class2 div{ } 如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现。
  • 如何理解表现与内容相分离? 表现与结构相分离简单的说就是HTML中只有标签元素 表现完全是由CSS文件控制的。
  • 如何定义高度为1px的容器? div{ heigh:1px; width:10px; background:#000; overflow:hidden } IE 6下这个问题是默认行高造成的,overflow:hidden | zoom:0.08 | line- height:1px这样也可以解决。
  • 如何解决IE 6的3px问题? _zoom:1; margin-left: value; _margin-left: value-3px;
  • Firefox下文本无法撑开容器的高度,如何解决? 清除浮动 .clear{ clear:both; height:0px; overflow:hidden;}
  • 怎么样才能让层显示在Flash之上呢? 解决的办法是给Flash设置透明属性 <param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
  • cursor:hand在FF下不显示小手,如何解决? cursor; pointer;
  • 在IE中内容会自适应高度,而FF不会自适应高度,怎么办? 在要自适应高度的层中加一个层,样式为.clear{clear:both;font-size:0px;height:1px}, 这样解决有一个小小的问题,高度会多一个像素。还有一种解决方法,给当前层加上一个伪类。#test:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  • 用纯 CSS 创建一个三角形的原理是什么? 把上、左、右三条边隐藏掉(颜色设为 transparent)#demo {width:0;height: 0;border-width: 20px;border-style: solid;border-color: transparent transparent red transparent; }
  • 如何设计一个满屏“品”字布局? 简单的方式: 上面的div宽100%,下面的两个div分别宽50%,用float或inline使其不换行。
  • 怎么让Chrome支持小于12px 的文字? body{-webkit-text-size-adjust:none}
  • 前端页面有哪三层构成,分别是什么?作用是什么? 最准确的网页设计思路是把网页分成三个层次,即:结构层、表示层、行为层。 网页的结构层(structural layer)由HTML或XHTML之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如,P 标签表达了这样一种语义:“这是一个文本段。” 网页的表示层(presentation layer)由CSS负责创建。 CSS对“如何显示有关内容”的问题做出了回答。 网页的行为层(behavior layer)负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScript语言和DOM主宰的领域。
  • ::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。 伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的,用于区分伪类和伪元素。但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,比如:first-line、:first-letter、:before、:after等。 对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的。 提醒,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。
  • 现在HTML5中css3可以写出一个旋转的立方体,请写出要用到的CSS属性。 -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(30deg) rotateX(10deg); -webkit-animation: rot 4s linear infinite;
  • 介绍一下 Sass 和 Less 是什么?它们有何区别? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读。Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css。Less一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js)。 区别: (1))Sass是基于Ruby的,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出Css到浏览器,也可以在开发环节使用Less,然后编译成Css文件,直接放到项目中,也有Less.app、SimpleLess、CodeKit.app这样的工具,也有在线编译地址。 (2)变量符不一样,less是@,而Scss是$,而且变量的作用域也不一样,后面会讲到。 (3)输出设置,Less没有输出设置,Sass提供4中输出选项:nested, compact, compressed 和 expanded。 (4)Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持。 常见ie6的浏览器兼容bug(3-5个)?
  • 文字本身的大小不兼容。 同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。
  • IE6吞吃现象。 上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
  • IE6注释bug 注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。 解决方案:用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
  • img 下的留白,如下代码: <div><img src=“1.jpg” /></div>把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写<div><img src=”1.jpg” /></div>后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案:给img设定 display:block。
  • 失去line-height <div style=”line-height:20px”><img />文字</div>,很遗憾,在ie6下单行文字 line-height 效果消失了。原因是<img />这个inline-block元素和inline元素写在一起了。 解决方案:让img 和文字都 float起来。
  • clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层,这样有问题,不仅仅是ff和op下失去margin效果,ie下某些margin值也会失效。 <div style=”background:red;float:left;”>dd</div> <div style=”clear:both;margin-top:18px;background:green”>ff</div>
  • ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。 解决方案:给overflow:hidden加position:relative或者position: absolute。 另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。

多多关注!

原文发布于微信公众号 - 大数据钻研(bigdata118)

原文发表时间:2017-03-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android小菜鸡

自定义View学习之路(三)————验证码的实现

走往android的进阶之路,避不开自定义View的学习和绘制。这里以绘制一个可用的验证码为例。开始系统的学习View的绘制。 验证码需求:

1081
来自专栏向治洪

VectorDrawable与AnimatedVectorDrawable

VectorDrawable  Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图。先来一个例子吧...

2125
来自专栏Porschev[钟慰]的专栏

jQuery Gallery Plugin在Asp.Net中使用

jQuery Gallery Plugin在Asp.Net中使用 推荐一个简单易用的Gallery插件:jQuery Gallery Plugin 下面是在As...

1939
来自专栏腾讯NEXT学位

CSS布局解决方案(下)

2557
来自专栏Echo is learning

常用Markdown公式整理 && 页内跳转注意 && Markdown preview

1915
来自专栏哈雷彗星撞地球

iOS动画三板斧(一)--UIView动画前言UIView 动画

iOS 精致的app,离不开酷炫合宜的动画。而iOS中的动画实现也有多种不同的方式。今天就来介绍一下iOS中的动画。本篇是第一篇,就讲一下最简单的动画实现方式,...

861
来自专栏互联网开发者交流社区

css多浏览常见问题

1013
来自专栏数据小魔方

条件格式的特殊用法——创意百分比构成图

今天继续跟大家分享条件格式的特殊用法——创意百分比构成图。 ▽▼▽ 上一篇推送已经跟大家介绍过如何通过设置条件格式来完成特殊的单元格字体、填充效果。今天趁热打铁...

4676
来自专栏偏前端工程师的驿站

CSS魔法堂:Transition就这么好玩

 以前说起前端动画必须使用JS,而CSS3为我们带来transition和@keyframes,让我们可以以更简单(声明式代替命令式)和更高效的方式实现UI状态...

1233
来自专栏Android机动车

歌词显示控件的实现(下)——自定义View

在上篇文章中呢,分享了关于lrc歌词文件的解析方法,根据歌词文件格式,解析出对应实体类。但是,怎样才能让让自己的音乐播放器的歌词像网易云音乐一样,随音乐(歌词时...

781

扫码关注云+社区

领取腾讯云代金券