面试必考15道CSS3基础面试题（含答案）

---

前言

随着CSS的不断的发展，现在出现了CSS3，CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块；CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。

---

提示：以下是本篇文章正文内容，下面案例可供参考

1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？？

• 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
• 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

2、box-sizing属性？

• 用来控制元素的盒子模型的解析模式，默认为content-box
• context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
• border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

3、CSS选择器有哪些？优先级顺序？哪些属性可以继承？

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

• CSS选择器优先级顺序：
  -!important > 行内样式（比重1000）> ID 选择器（比重100） > 类选择器（比重10） > 标签（比重1） > 通配符 > 继承 > 浏览器默认属性

• CSS可以继承属性：
  font-size, font-family, color

• CSS不可以继承属性：
  border, padding, margin, width, height

什么是 !important：
CSS 中的 !important 规则用于增加样式的权重；
!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

4、垂直居中几种方式有哪些？

• 单行文本: line-height = height
• 图片: vertical-align: middle;
• absolute 定位: top: 50%;left: 50%;transform: translate(-50%, -50%);
• flex: display:flex; margin:auto(自由水平居中）

5、display:none和visibility:hidden的区别？

• display:none ：隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
• visibility:hidden ：隐藏对应的元素，但是在文档布局中仍保留原来的空间。

6、position的值， relative和absolute分别是相对于谁进行定位的？

• relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。
• absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位
• fixed: 固定定位，相对于浏览器窗口或者frame进行定位。（老版本IE不支持）
• static:默认值，没有定位，元素出现在正常的文档流中。
• sticky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。

7、常见兼容性问题？

• 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
  可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

8、CSS3新增伪类有那些?

• p:first-of-type 选择属于其父元素的首个元素
• p:last-of-type 选择属于其父元素的最后元素
• p:only-of-type 选择属于其父元素唯一的元素
• p:only-child 选择属于其父元素的唯一子元素
• p:nth-child(2) 选择属于其父元素的第二个子元素
• :enabled :disabled 表单控件的禁用状态。
• :checked 单选框或复选框被选中

9、display有哪些值？说明他们的作用?

• inline（默认）–内联
• none – 隐藏
• block – 块显示
• table – 表格显示
• list-item – 项目列表
• inline-block – 与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

10、CSS3有哪些新特性？

• 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
• font-face属性：定义自己的字体
• 圆角（边框半径）：border-radius 属性用于创建圆角
• 边框图片：border-image: url(border.png) 30 30 round
• 盒阴影：box-shadow: 10px 10px 5px #888888

11、 position跟display、overflow、float这些特性相互叠加后会怎么样？

• display属性规定元素应该生成的框的类型；
• position属性规定元素的定位类型；
• float属性是一种布局方式，定义元素在哪个方向浮动。

类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

11、BFC 是什么？

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于普通流，即：元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。
可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
只要元素满足下面任一条件即可触发 BFC 特性

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

12、DIV布局的三种方式？

常规流式布局：

• 元素按照自身HTML元素定义的位置显示（怎么写的怎么显示）
• 元素按照自身的常规显示特性显示
  浮动布局：
• 左浮动 float:left;
• 右浮动 float:right;
  定位布局：
• 静态定位：position:static;（默认值），不写position相当于写上position:static;以前没学定位的时候其实都是静态定位，元素在它原本的位置显示，即使加了top、left等也不起作用。
• 相对定位：position: relative;相对定位是相对于自身的原始位置进行平移，如果设置position：relative；表示相对定位。z-index:值越大越在上面

注意：z-index必须加在已经定位的元素上才起作用。

• 绝对定位： position: absolute;子容器相对于父容器的定位，如果没有父容器，则相对于body定位。

13、设置元素浮动后，该元素的display值是多少？

• 自动变成display:block

13、全屏滚动的原理是什么？用到了CSS的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现

• overflow：hidden；
• transition：all 1000ms ease；

14、 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用？

• 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
• ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
• :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

15、你对line-height是如何理解的？

• 行高是指一行文字的高度，具体说是两行文字间基线的距离。
• CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。
• 单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
• 多行文本垂直居中：需要设置display属性为inline-block。

总结

以上就是今天要整理的CSS3面试内容，本文仅仅简单介绍了当前CSS3面试的一部分的面试题，并且还有很多关于前端CSS3面试题还有很多，希望大家多多交流探讨，喜欢的可以点赞加关注，后续我会更新更多关于前端开发编程的内容