CSS面试题总结[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

前面的话

小柒前面总结了与HTML相关的面试题，这篇文章总结CSS相关面试题。

题目

(1) 盒子模型的理解？

盒模型分为两种：标准模式与混杂模式（IE模式）

• 标准盒子模型

• IE盒子模型

一般的我们所说的width、height都是指标准盒子模型下的width(也就是content)。

(2) CSS 中哪些属性可以同父元素继承 ?

• 字体系列：font-family，font-size，font-style，font-weight，font-stretch，font-size-adjust；
• 列表相关：list-style，list-style-image，list-style-position，list-style-type，list-style-color；
• 文本系列：text-indent，text-align，line-height，word-spaceing，letter-spacing，text-transform，direction，color；
• 元素可见性：visibility；
• 表格布局：caption-side，border-collapse，border-spacing，empty-cells，table-layout；
• 光标属性：cursor；

(3) box-sizing 常用的属性有哪些 ？分别有什么作用 ？

box-sizing用于告诉浏览器如何计算一个元素总宽度和总高度。

属性：content-box、 border-box、inherit

• box-sizing：content-box 表示标准盒模型，width = content，总宽度 = content+ padding+border
• box-sizing: border-box 表示IE盒模型，总宽度 = width = content+ padding+border

(4) 页面导入样式时，使用 link 和 @import 有什么区别 ？

• link是XHML标签，除了能加载css文件，还可以定义rel连接属性；@import只能加载css
• link标签引入的css文件被同时加载；@import引入css将在页面加载完毕之后被加载
• link无兼容性问题，@import只用IE5以上能识别

总的来说link标签优于@import标签。

(5) a标签的4个伪类样式的正确顺序是怎样的？

正确的伪类样式的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

(6) 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法 ？

如果一个块级元素没有设置height，那么其高度由子元素撑开，如果子元素使用了浮动，脱离了标准的文档流，那么父元素的高度将不能被其撑开。表现出高度塌陷的现象。

这时我们要避免这种情况发生，就需要清除浮动, 就算子元素浮动了，其父元素也不出现高度塌陷 现象。

清除浮动的方式：

• 父级元素定义height。 但这样定死的高度，往往不是我们想要的。
• 父级结尾处添加一个空div,设置css样式clear:both。 原理：添加一个空 div，利用 css 提高的 clear: both 清除浮动，让父级 div 能自动获取到高度。
• 父级定义伪元素:after和zoom(推荐使用)。 原理：元素生成伪元素的作用和效果相当于方法2中的原理，（使用伪元素生成一个看不见的块级元素，并且设置clear:both样式）但是IE8以上和非IE浏览器才支持:after，zoom(IE专有属性)可解决ie6,ie7浮动问题

• 父级div添加css属性：overflow:hidden

(7) position 、float 和 display 的取值和各自的意思和用法

• position 属性取值：static(默认)、relative(处于文档流)、absolute（脱离文档流）、fixed（脱离文档流）、inherit 注意： z-index只对脱离文档流的元素有效
• float：left (或 right)，向左（或右）浮动。（脱离文档流）
• display 属性取值：none、inline、inline-block、block、table 相关属性值、flex、inherit。

(8) css3的相关动画属性?

CSS3动画三兄弟：transition、transform、animation。

(9) css文件有几种引入方式？

外链式（link引入）

内联式

行内式

@import引入

(10) CSS Sprite 是什么，谈谈这个技术的优缺点。

CSS Sprite将多张图片合并在一张图上。

优点：

• 利用CSS Sprite 能很好的减少网页的请求次数，提高页面的性能
• 能减少图片总字节

缺点：

• 合并图片时，要把多张图片有序合理的合并在一张图上，制作起来比较麻烦

(11) 浏览器标准模式和怪异模式之间的区别是什么？

• 标准模式：浏览器按W3C标准解析执行代码；
• 怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
• 浏览器解析时到底使用标准模式还是怪异模式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明,将使网页进入怪异模式(quirks mode)。

(12) 如何解决多个元素重叠问题？

使用z-index属性可以设置元素的层叠顺序,适用于定位元素。

(13) CSS 选择符有哪些 ？哪些属性可以继承 ？优先级算法如何计算 ？新增伪类有那些 ？

• id 选择器（ #myid）
• 类选择器（.myclassname）
• 标签选择器（div, h1, p）
• 相邻选择器（h1 + p）
• 子选择器（ul > li）
• 后代选择器（li a）
• 通配符选择器（ * ）
• 属性选择器（a[rel = “external”]）
• 伪类选择器（a: hover, li: nth – child）

优先级：

• 优先级为: !important > id > class > tag , important 比 内联优先级高
• 优先级就近原则，同权重情况下样式定义最近者为准;

(14) 为什么要初始化 CSS 样式 ?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对css初始化，往往会出现浏览器之间的页面显示出现差异。

(15) 说说你对边距折叠的理解?

外边距折叠（margin塌陷）： 相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）

什么时候会造成margin塌陷？

• 相邻的元素都在普通流中。
• 相邻的元素之间没有其他非空内容隔开

如何解决margin塌陷？

• 浮动元素、inline-block元素、绝对定位元素不会与垂直方向上的其他元素造成margin塌陷
• 创建BFC（块级格式化上下文）的元素，不会造成margin塌陷。

(16) 何时应当时用 padding 和 margin ？

• margin 是用来隔开元素与元素的间距；
• padding 是用来隔开元素与内容的间隔，让内容（文字）与（包裹）元素之间有一段 距离。

(17) ::before 和 :before 中双冒号和单冒号有什么区别 ？

• 起初，伪元素是用:表示的，但在css3中，伪元素的语法被修改为双冒号。这里的::before 和 :before表示的意思一样，都是伪元素。放在主体内容之前作为一个子元素，并不才能在dom之中，只存在页面之中。
• 一般:表示伪类，比如:hover等。

(18) CSS 里的 visibility 属性有个 collapse 属性值 ？在不同浏览器下有什么区别

• 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局，被行或列占据的空间会留给其他内容使用
• 在Chrome中，如果此值在非表格元素上使用，与hidden值没有什么区别。
• 在Firefox、Opera和IE中，如果此值在非表格元素上使用，与display:none没有什么区别。

(19) 用 position: absolute 跟用 float 有什么区别吗 ？

• 都是脱离标准流。position: absolute定位时，可以精准的将元素放在各个位置；而float只能向左、右两侧浮动。
• 各自都有自己的优点。在菜单栏，或者一些图标的横向排列时， 一个 float 就解决了，而且每个元素之间不会有任何间距(所以可以用 float 消除元素间的距离)；

(20) line-height: 150%与line-height: 1.5的区别。

 <div class="parent" style="line-height: 150%; font-size:16px;">
        父元素内容
        <div class="son" style="font-size:40px;">
            子元素<br/>
            line-height问题
        </div>
    </div>

• line-height: 150% : 父元素先根据自身的字体计算出行高：16*150% = 24px。然后子元素继承这个行高。

• line-height: 1.5：子元素根据自己的字体乘以1.5来计算行高：30 * 1.5 = 45px

(21) 任意高度元素的展开收起动画

使用height + overflow：hidden实现比较生硬。好的方式使用max-height

.element { 
   
	max-height: 0;
	overflow:hidden;
	transition: height .25s;
}
.element:active { 
   
	max-height: 666px;
}

(22) 轻松实现hover图片变成另外一张图片

img:hover { 
   
	content: url(xxx.jpg);
}

(2) css中的常见布局

推荐文章：css布局

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/138427.html原文链接：https://javaforall.cn