【前端⾯试题】02—59道CSS⾯试题（附答案）
部分的⾯试题主要考察应试者对CSS基础概念模型的理解，例如⽂档流、盒模型、浮动、定位、选择器权重、样式继承等。很多应试者认为CSS很简单，没多少内容，⾯试就是⾯试 JavaScript部分的内容，这些观点是错误的，⾯试的第⼀关往往会考察应试者对CSS的掌握情况。因此，CSS也常常是应试者掉⼊的第⼀个陷阱。
1、CSS有哪些基本选择器？它们的权重是如何表⽰的？
CSS基本有类选择器、属性选择器和ID选择器。
CSS选择器的权重预⽰着CSS选择器渲染的先后顺序，元素样式渲染时，权重⾼的选择器样式会覆盖权重低的选择器样式。
通常将权重分为4个等级，可⽤0.0.0.0来表⽰这4个等级。
！important关键字优先级最⾼。
注意：！importont井⾮选择器，⽽是针对选择器内的单⼀样式设置的。当然，不同选择器内应⽤ ！important的权重也是不⼀样的，例如，在id选择器内的！important关键字权重要⾼于类选择器内的 ！important关键字权重，即下⾯所说的选择器权重组合。
内联样式（⾮元素器）的优先级可看成1.0.0.0。
ID选择器的优先级为0.1.0.0。
类属性选择器、属性选择器、伪类的优先级为0.0.1.0。
元素选择器、伪元素选择器的优先级为0.0.0.1。
通配符选择器对特殊性没有任何贡献值。
当把选择器组合使⽤的时候，相应的层级权重也会递增，例如# id .class的权重为0.1.1.0。
2、CSS的引⼊⽅式有哪些？ink和@ import的区别是什么？
CSS有3种引⼊⽅式。
⾏内式是指将样式写在元素的 style属性内。
内嵌式是指将样式写在 style元素内。
外链式是指通过link标签，引⼊CSS⽂件内的样式。
通过link标签引⼊样式与通过@ import⽅法引⼊样式有如下区别。
（1）加载资源的限制。
link是 XHTML的标签，除了加载CSS⽂件外，还可以加载RSS等其他事务，如加载模板等。
@ import只能加载CSS⽂件。
（2）加载⽅式。
如果⽤link引⽤CSS，在页⾯载⼊时同时加载，即同步加载。
如果⽤@ import引⽤CSS，则需要等到⽹页完全载⼊后，再加载CSS⽂件，即异步加载。
（3）兼容性。
link是 XHTML的标签，没有兼容问题。
@ import是在CSS2.1中提出的，不⽀持低版本的浏览器。
（4）改变样式
link的标签是DOM元素，⽀持使⽤ JavaScript控制DOM和修改样式；@ import是种⽅法，不⽀持控制DOM和修改样式。
3、浮动元素引起的问题和解决⽅法是什么？
引起的问题有如下⼏个。
（1）⽗元素的⾼度⽆法被撑开，影响与⽗元素同级的元素。
（2）与元素同级的⾮浮动元素会紧随其后（类似遮盖现象）。
（3）如果⼀个元素浮动，则该元素之前的元素也需要浮动；否则，会影响页⾯显⽰的结构（即通常所说的串⾏现象）。
解决⽅法如下：
（1）为⽗元素设置固定⾼度。
（2）为⽗元素设置 overflow:hidden即可清除浮动，让⽗元素的⾼度被撑开。
（3）⽤ clear:both样式属性清除元素浮动。
注意：如果只有左浮动或只有右浮动，可以单独设置 clear:left或 clear:right，但是设置clear:both则都可以解决，所以此⽅法在⼯作中⽤得更多。
（4）外墙法是指在⽗元素外⾯，添加“⼀道墙”，设置属性 clear:both
（5）内墙法是指在⽗元素内部，浮动元素的最后⾯，添加“⼀道墙”，设置属性 clear:both
（6）伪元素是指为了少创建元素，对⽗元素添加afer伪元素，设置属性 content：""；display ：block；clear:both。
注意：这⾥所说的少创建元素，实际上并没有少创建，添加的伪元素也是元素，只不过没有写在HTML⽂档中⽽已。
（7）使⽤通⽤类 clearfix, clearfix的实现如下：
clearfix:after {  content " "；display:block;clear:both;}
注意：推荐以上这种⽅式，因为 clearfix已经应⽤在各⼤CSS框架（如 Bootstrap等）中，并成为⾏业的默认规范。
4、position的值分别是相对于哪个位置定位的？
relative表⽰相对定位，相对于⾃⼰本⾝所在正常⽂档流中的位置进⾏定位。absolute表⽰绝对定位，相对于最近⼀级（从直接⽗级元素往上数，直到根元素）定位，相对于 statIc的⽗元素进⾏定位。
fixed⽤于⽣成绝对定位，相对于浏览器窗⼝或 frame进⾏定位。
statIc是默认值，没有定位，元素出现在正常的⽂档流中。
sticky是⽣成黏性定位的元素，容器的位置根据正常⽂档流计算得出。
注意：CSS3的新增属性有点类似于 relative与 fixed的结合体。如果⽬标区域在屏幕中可见，表现为 relative；如果⽬标区域在屏幕中不可见，表现为fixed。
5、请说明 position:absolute和float属性的异同。
共同点是对内联元素设置float和 absolute属性，可以让元素脱离⽂档流，并且可以设置其宽⾼。
不同点是float仍可占据位置，不会覆盖在另⼀个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另⼀个浮动框的边框为⽌， absolute会覆盖⽂档流中的其他元素，即遮盖现象。
6、CSS选择器（符）有哪些？
（1）id选择器（#myld）。
（2）类选择器（ .my ClassName）。
（3）标签选择器（div,p,h1）
（4）相邻选择器（h1+p）
（5）⼦选择器（ul>li）
（6）后代选择器（li  a）
（7）通配符选择器（*）
（8）属性选择器（ button[disabled="true"]）。
（9）伪类选择器（ a:hover、 li:nth- child）表⽰⼀种状态。
（10）伪元素选择器（li:before、“：after”、“：first- letter”、“：first-line”、“；selecton”）表⽰⽂档某个部分的表现。
注意：在CSS3规范中，为了区别伪元素和伪类，CSS3建议伪类⽤单冒号“："，伪元素⽤双冒号"：："。
7、CSS的哪些样式可以继承？哪些不可以继承？
可继承的样式有font- size font-family color, UL LI DL DD DT。
不可继承的样式有 border、 padding, margin, width、 height。
注意：为了⽅便辨识，与字体相关的样式通常可以继承，与尺⼨相关的样式通常不能继承。
8、CSS优先级如何排序？
优先级如下:
！important>style（内联）>ld（权重100）> class（权重10）>标签（权重1）。同类别的样式中，后⾯的会覆盖前⾯的。
9、HTML是什么？CSS是什么？JavaScript是什么？
（1）HTML（ Hyper Text Markup Language，超⽂本标记语⾔）是做⽹站时使⽤的些⽂本标记标签，⽐如div、span等
（2）CSS（ Cascading Style Sheet，层叠样式表）是做⽹站时为美化⽹站⽽为标签添加的样式，⽐如 background（背景）、
color（字体颜⾊） height（⾼度）、widh（宽度）等。
（3） JavaScript是⽹站中实现前后台交互效果、⽹页动画效果的⼀种开发语⾔，⽐如⿏标单击（ click）事件、前后台数据请求（Ajax）等。
10、为什么要初始化CSS？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有初始化CSS，往往会导致页⾯在不同浏览器之间出现差异。
当然，初始化样式有时会对SEO产⽣⼀定的影响，但鱼和熊掌不可兼得，所以在⼒求影响最⼩的情况下初始化CSS。
最简单的初始化⽅法就是：*{ padding：0；margin：0；}
11、如何居中div？如何居中⼀个浮动元素？
确定容器的宽⾼，例如宽400px、⾼200px的div.设置层的外边距。
1div
2{
3float:left；
4width：400px；
5height：200px；
6margin：-100px 0 0-200px；
7/*注意，由于左上外边距优先级⾼于右下外边距优先级，因此，还可以简化设置 margin：-150px-250px；*/
8position:relative；left：50%；top：50%；
9/*为⽅便看效果，添加⼀种背景⾊*/
10background-color:pink
11}
12、构成CSS的基本语句是什么？
构成CSS的基本语句如下。
选择器{属性名称1：属性值1；属性名称2：属性值2；}
例如
div{ margin-top：20px；border：2px solid #red；}
13、display有哪些值？说明它们的作⽤。
display的值有 block、none, inline、 inline- block、list-item、 table和 inherit。其作⽤如下。
block是指块类型。默认宽度为⽗元素宽度，可设置宽⾼，换⾏显⽰。  none是指元素不会显⽰，已脱离⽂档流。
inline是指⾏内元素类型。默认宽度为内容宽度，不可设置宽⾼，同⾏显⽰。
inline- block是指默认宽度为内容宽度，可以设置宽⾼，同⾏显⽰。
list-item是指像块类型元素⼀样显⽰，并添加样式列表标记。
注意：例如，⽤div模拟li元素<ul>< div >有课前端⽹</d></ul>。
table是指此元素会作为块级表格显⽰。
inherit是指从⽗元素继承 display属性的值。
14、简要描述块级元素和⾏内元素的区别。
块级元素的前后都会⾃动换⾏。默认情况下，块级元素会独占⼀⾏。例如<p><h1-h6><div>都是块级元素，当显⽰这些元素中间的⽂本时，都将从新⾏中开始显⽰，其后的内容也将在新⾏中显⽰。
⾏内元素可以和其他⾏内元素位于同⼀⾏，在浏览器中显⽰时不会换⾏。例如<a><span>等，对于⾏内元素，不能设置其⾼度和宽度。
还有⼀种元素是⾏内块级元素，⽐如<img>< input>元素等。这些元素可以和其他⾏内元素位于同⼀⾏，同时可以设置其⾼度和宽度。
15、如何⽤DIV+CSS实现3栏布局（左右固定200pX，中间⾃适应）？
具体代码如下：
html
1<div class="container">
2<div class="main">
3<h2>有课前端⽹</h2>
4</div>
5<div class="left">左边内容</div>
6< div class="right" >右边内容</div>
css表格样式
7</dv>
CSS
3.main,.left,.right{position:relative；float:left；}
4.left.right{width：200px；}
5.main{ width：100%；background:yellow；}
6.left {background:blue：margin-left：-100%；left：-200px；}
7.right {background:green；margin-left：-200px；left：200px；}
16、解释浮动及其⼯作原理。
浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素（⽗元素）或另⼀个浮动元素的边框为⽌。要想使元素浮动，必须为元素设置⼀个宽度（ width）。虽然浮动元素已不在⽂档流中，但是它浮动后所处的位置依然在浮动之前的⽔平⽅向上。
因为浮动元素不在⽂档流中，所以⽂档流中的块元素表现得就像浮动元素不存在⼀样，下⾯的元素会填补原来的位置。
有些元素会在浮动元素的下⽅，但是这些元素的内容并不⼀定会被浮动的元素遮盖。当定位内联元素时，要考虑浮动元素的边界，围绕浮动元素放置内联元素。也可以把浮动元素想象成被块元素忽略的元素，⽽内联元素会关注的元素。
17、解释⼀下 CSS Sprite，以及如何在页⾯或⽹站中使⽤它。
CSS Sprite其实就是把⽹页中⼀些背景图⽚整合到⼀张图⽚⽂件中，再利⽤CSS的“ background- image"“ background- repeat”“background- position”的组合进⾏背景定位， background- position可以⽤数字精确地定位出背景图⽚的位置。
注意：在⾼级浏览器中，可以基于图⽚的bose64编码存储，将图⽚与其他类型的⽂件打包。
18、在书写⾼效CSS时有哪些问题需要考虑？
（1）样式，从右向左解析⼀个选择器
（2）类型选择器的速度，ID选择器最快， Universal（通配符*）最慢。对于常⽤的4种类型选择器，解析速度由快到慢依次是ID、 class, tag和 universal。
（3）不要⽤标签限制ID选择器（如：ul#main- navigation{}，ID已经是唯⼀的，不需要Tag来限制，这样做会让选择器变慢）。
（4）后代选择器最糟糕（换句话说， html body ul li a{}这个选择器是很低效的）。
（5）想清楚你的需求，再去书写选择器。
（6）CSS3选择器（如nth- child）能够漂亮地定位我们想要的元素，⼜能保证CSS整洁易读。然⽽，这些神奇的选择器会浪费很多的浏览器资源。
（7）我们知道ID选择器的速度最快，但是如果都⽤ID选择器，会降低代码的可读性和可维护性等。在⼤型项⽬中，相对于使⽤ID选择器提升速度，代码的可读性和可维护性带来的收益更⼤。
19、说出⼏种解决IE6  Bug的⽅法。
解决⽅案如下：
（1）双边距问题，是使⽤fLoat引起的。
解决⽅法是使⽤ display:inline。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。