常见的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.设置层的外边距。

div
{
   
    
float:left；
width：400px；
height：200px；
margin：-100px 0 0-200px；
/*注意，由于左上外边距优先级高于右下外边距优先级，因此，还可以简化设置