欢迎访问牛耳教育官网 专注实战IT培训技术20年!
400-0731-162
当前位置:IT培训机构 > Web前端培训 > (Web前端面试)Web前端CSS面试题及答案

(Web前端面试)Web前端CSS面试题及答案

时间: 2020-08-12 | 作者: admin | 分类:Web前端培训 | 关键字:Web前端 | 阅读量:

导读:最近牛耳教育了解到很多同学还对(Web前端面试)Web前端CSS面试题及答案有疑问,那么今天小编就来进行简要介绍,Web前端CSS面试题及答案,CSS层叠样式表是一种用来表现HTML或XML等文件样式

  Web前端CSS面试题及答案,CSS层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS在Web设计领域是一个突破,CSS实现修改一个小的样式更新与之相关的所有页面元素。是前端工程师面试过程中必不可少的考核点。

Web前端CSS面试题及答案
  常见的Web前端CSS面试题:


  1、谈谈你对CSS布局的理解


  2、请列举几种可以清除浮动的方法(至少两种)
  浮动会漂浮于普通流之上,像浮云一样,但是只能左右浮动。正是这种特性,导致框内部由于不存在其他普通流元素了,表现出高度为0(高度塌陷)。
  a. 添加额外标签,例如<div style="clear:both"></div>
  b. 使用br标签和其自身的html属性,例如<br clear="all" />
  c. 父元素设置 overflow:hidden;在IE6中还需要触发hasLayout,例如zoom:1;
  d. 父元素设置 overflow:auto 属性;同样IE6需要触发hasLayout
  e. 父元素也设置浮动
  f. 父元素设置display:table
  g. 使用:after 伪元素;由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
  在CSS2.1里面有一个很重要的概念,那就是 Block formatting contexts (块级格式化上下文),简称 BFC。
  创建了BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,同时BFC仍然属于文档中的普通流。
  IE6-7的显示引擎使用的是一个称为布局(layout)的内部概念。
  参考《那些年我们一起清除过的浮动》


  3、请列举几种隐藏元素的方法
  a. visibility: hidden;这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在。
  b. opacity: 0;一个CSS3属性,设置0可以使一个元素完全透明,制作出和visibility一样的效果。与visibility相比,它可以被transition和animate
  c. position: absolute;使元素脱离文档流,处于普通文档之上,给它设置一个很大的left负值定位,使元素定位在可见区域之外。
  d. display: none;元素会变得不可见,并且不会再占用文档的空间。
  e. transform: scale(0);将一个元素设置为无限小,这个元素将不可见。这个元素原来所在的位置将被保留。
  f. HTML5 hidden attribute;hidden属性的效果和display:none;相同,这个属性用于记录一个元素的状态
  g. height: 0; overflow: hidden;将元素在垂直方向上收缩为0,使元素消失。只要元素没有可见的边框,该技术就可以正常工作。
  h. filter: blur(0);将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中。
  参考《使用CSS隐藏HTML元素的4种常用方法》《通过HTML和CSS隐藏和显示元素的4种方法》


  4、如何让一段文本中的所有英文单词的首字母大写
  text-transform:
  none| capitalize(将每个单词的第一个字母转换成大写) | uppercase(将每个单词转换成大写 ) | lowercase(将每个单词转换成小写 )


  5、请简述CSS样式表继承
  CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下:参考《CSS样式表继承详解》
  文本相关:font-family,font-size, font-style,font-variant,font-weight, font,letter-spacing,line-height,color
  列表相关:list-style-image,list-style-position,list-style-type, list-style


  6、请简述CSS的选择器
  元素选择器:* 、E、 E#id、 E.class
  关系选择器:E、F、E>F、E+F、E~F
  属性选择器:E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]
  伪类选择器:E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等
  伪对象选择器:E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection
  参考《选择符列表》


  7、CSS伪类与CSS伪对象的区别
  CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西
  根本区别在于:它们是否创造了新的元素(抽象)
  伪类:一开始用来表示一些元素的动态状态,随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
  伪对象:代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中
  参考《CSS伪类与CSS伪元素的区别及由来》


  8、请简述CSS的权重规则
  一个行内样式+1000,一个id+100,一个属性选择器/class类/伪类选择器+10,一个元素名/伪对象选择器+1。
  关系选择器将拆分为两个选择器再计算。参考《CSS权重》


  9、请写出多种等高布局
  a. 假等高列:使用背景图片,在列的父元素上使用这个背景图进行Y轴的铺放,从而实现一种等高列的假像
  b. 给容器div使用单独的背景色(固定布局)(流体布局):用元素中的最大高度撑大其他的容器高度
  c. 创建带边框的两列等高布局:用border-left来做,只能使用两列。
  d. 使用正padding和负margin对冲实现多列布局方法:在所有列中使用正的上、下padding和负的上、下margin,并在所有列外面加上一个容器,设置overflow:hiden把溢出背景切掉
  e. 使用边框和定位模拟列等高:但不能使用在多列
  f. 模仿表格布局等高列效果:兼容性不好,在ie6-7无法正常运行


  10、在CSS样式中常使用px、em,各有什么优劣,在表现上有什么区别?
  px是相对长度单位,相对于显示器屏幕分辨率而言的。
  em是相对长度单位,相对于当前对象内文本的字体尺寸。
  px定义的字体,无法用浏览器字体放大功能。
  em的值并不是固定的,会继承父级元素的字体大小,1 ÷ 父元素的font-size × 需要转换的像素值 = em值。


  11、CSS中 link 和@import 的区别是什么?
  a. link属于HTML标签,而@import是CSS提供的,且只能加载 CSS
  b. 页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载
  c. import只在IE5以上才能识别,而link是HTML标签,无兼容问题
  d. link方式的样式的权重 高于@import的权重
  e. 当使用 Javascript 控制 DOM 去改变样式的时候,只能使用 link 方式,因为 @import 眼里只有 CSS ,不是 DOM 可以控制


  12、position的absolute与fixed共同点与不同点
  相同:
  a. 改变行内元素的呈现方式,display被置为block
  b. 让元素脱离普通流,不占据空间
  c. 默认会覆盖到非定位元素上
  区别:
  absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。
  当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。


  13、position的值, relative和absolute分别是相对于谁进行定位的?
  absolute:生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位
  fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。(IE6不支持)
  relative:生成相对定位的元素,相对于其在普通流中的位置进行定位
  static:默认值。没有定位,元素出现在正常的流中


  14、CSS3有哪些新特性?
  CSS3实现圆角(border-radius),阴影(box-shadow),对文字加特效(text-shadow),线性渐变(gradient),变形(transform)
  增加了更多的CSS选择器 多背景 rgba,在CSS3中唯一引入的伪元素是::selection,媒体查询,多栏布局
  参考《CSS3中的动画效果记录》、《CSS3中border-radius、box-shadow与gradient那点事儿》


  15、为什么要初始化CSS样式?
  因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
  当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。


  16、解释下 CSS sprites原理,优缺点
  CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,
  再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,
  background-position可以用数字精确的定位出背景图片的位置。
  优点:
  a. 减少网页的http请求
  b. 减少图片的字节
  c. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名
  d. 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。
  缺点:
  a. 在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂
  b. CSS Sprites在开发的时候,要通过photoshop或其他工具测量计算每一个背景单元的精确位置
  c. 在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片


  17、解释下浮动和它的工作原理?
  a. 浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象)
  b. 浮动元素碰到包含它的边框或者浮动元素的边框停留。
  18、浮动元素引起的问题
  a. 父元素的高度无法被撑开,影响与父元素同级的元素
  b. 与浮动元素同级的非浮动元素会跟随其后
  c. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构


  19、什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?
  如果使用import方法对CSS进行导入,会导致某些页面在Windows下的IE出现一些奇怪的现象:
  以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。
  原理:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。
  解决方法:使用LINK标签将样式表放在文档HEAD中。


  20、line-height三种赋值方式有何区别?(带单位、纯数字、百分比)
  带单位:px不用计算,em则会使元素以其父元素font-size值为参考来计算自己的行高
  纯数字:把比例传递给后代,例如父级行高为1.5,子元素字体为18px,则子元素行高为1.5*18=27px
  百分比:将计算后的值传递给后代
  参考《line-height的理解》、《浅析line-height和vertical》,查看在线源码。


  21、:link、:visited、:hover、:active的执行顺序是怎么样的?
  L-V-H-A,l(link)ov(visited)e h(hover)a(active)te,即用喜欢和讨厌两个词来概括


  22、经常遇到的浏览器兼容性有哪些?如何解决?
  a. 浏览器默认的margin和padding不同
  b. IE6双边距bug
  c. 在ie6,ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的
  d. min-height在IE6下不起作用
  e. 透明性IE用filter:Alpha(Opacity=60),而其他主流浏览器用 opacity:0.6
  f. input边框问题,去掉input边框一般用border:none;就可以,但由于IE6在解析input样式时的BUG(优先级问题),在IE6下无效
  23、有哪项方式可以对一个DOM设置它的CSS样式?
  a. 外部样式表:通过<link>标签引入一个外部css文件
  b. 内部样式表:将css代码放在 <style> 标签内部
  c. 内联样式:将css样式直接定义在 HTML 元素内部


  24、什么是外边距重叠?重叠的结果是什么?
  外边距重叠就是margin-collapse。
  在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠外边距。
  折叠结果遵循下列计算规则:
  a. 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
  b. 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
  c. 两个外边距一正一负时,折叠结果是两者的相加的和。


  25、rgba()和opacity的透明效果有什么不同?
  a. opacity作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素的颜色或其背景色。
  b. 设置rgba透明的元素的子元素不会继承透明效果!


  26、css属性content有什么作用?有什么应用?
  css的content属性专门应用在 before/after 伪元素上,用于来插入生成内容。
  可以配合自定义字体显示特殊符号。


  对于所有的网站而言,无论其服务器端的语言是什么,前端都使用了HTML + CSS。且前端开发都会用到HTML + CSS编程,掌握前端CSS面试题基础知识点必不可少。

免责声明:本文内容来源于公开网络,若涉及侵权联系尽快删除!,【本文标题和网址】(Web前端面试)Web前端CSS面试题及答案:http://www.csnewer.com/qdxuexi/567.html
申请免费试学
快捷咨询
资深IT讲师一对一为您解答IT问题
电话
咨询服务电话
400-0731-162
微信
IT培训_java培训机构_专注于实战IT培训技术20年-牛耳教育官网
关注了解更多IT知识
QQ
热门课程
java软件开发课程 Java是一种可以撰写跨平台应用程不齐人60%Java工程师缺口序的面向对象的程序设计语言。Java技术具有卓越的通用性、高效性、...
嵌入式应用开发课程 嵌入式开发就是指在嵌入式操作系统下进行开发,包括在系统化设计指导下的硬件和软件以及综合研发。除暂且分离硬件的...
软件测试课程 软件测试具有人才缺口大、发展方向广、专业无限制、适合零基础、技术上手快、职业生涯稳等优势。 人才缺口大 国内测试...
Web前端开发课程 web前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方...
java+大数据课程 什么是Java大数据? Java,是一门面向对象编程语言,具有功能强大和简单易用的特征。作为**受欢迎的计算机语言,发展至今...
python人工智能课程 Python是一门神奇的编程语言,它具有简单易学、就业面广、就业薪资高、竞争压力小、开发效率高、行业风口等6个优势,下...
热门资讯
本文:(零基础学java)零基础也能学Java,5大Java学习方法!,最近有很多同学来问小编,关于学习java的方法,下面小编根据...
Web前端培训机构的好坏直接决定了你学习后的就业薪资,市面上web前端培训机构那么多,应该如何选择靠谱的web前端培训机构...
大家的生活已经离不开嵌入式就连常用的共享单车都离不开嵌入式。所以越来越多的人看中了嵌入式的就业前景,转行来做嵌...
打算参加嵌入式培训的同学对于嵌入式培训课程的内容都特别的关心,只有在了解了课程内容之后才能更好的知道这个嵌入式...
当谈到Python时,一般指的是CPython。但Python实际上是一门语言规范,只是定义了Python这门语言应该具备哪些语言要素,应当能...
2020年学习嵌入式晚不晚?1、学技术不像学艺术,只要坚持,任何时候学都不晚。很多人对于学习嵌入式应用开发都会有所顾...
本文(零基础学python)0基础学习Python容易犯哪些错误呢?主要介绍1. 忘记写冒号 在if、elif、else、for、while、class、def 语句后...
参加IT培训,学哪个技术前景更好呢?java开发、大数据、人工智能、机器学习都是很好的方向。至于选择什么专业,这需要根...
web前端开发火爆了,岗位也紧俏了,薪资也提升了,随着2020年的到来,很多想要入行web前端的学子纷纷加入到web师培训学习...
it培训学校有用吗?其实判断IT培训学校有没有用,看培训的课程是否能满足自己的需求就可以了,如果培训的课程自己都了...