学过前端的人应该都知道CSS的重要性，所以，在前端开发的面试中，CSS的面试题会占到很大一部分的比重，而其中，基础知识又是必考项，这是体现面试者对于前端知识是否掌握好，基础是否牢固的重要证明。
今天，小职就为大家带来一些在前端开发面试中经常会出现的CSS基础面试题，看看你都掌握好了吗？赶紧查漏补缺，前端初学者也可以通过这些基础知识来加深对CSS的了解哦~
一、CSS是什么？
CSS即层叠样式表（Cascading Style Sheets），是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
二、为什么需要CSS？
CSS是Web开发人员定义其创建的网页外观的一种方式，旨在允许开发人员将网站代码的内容和结构与视觉设计分开。结构和样式的分离使HTML可以执行其最初基于的更多功能-内容标记，而不必担心页面本身的设计和布局，这通常称为“外观”页面。
三、CSS集成到HTML页面的方式有哪些？
1、设置标签的style=""属性，称为内联样式；
2、在HTML的<head>标签中使用<style>标签，称为嵌入式样式；
3、创建并链接外部CSS文件，称为外部样式表。
四、css与html结合有哪些方式？
1、每个标签加一个属性法；
2、head中加style标签；
3、head中使用头标签 link。
五、CSS样式（选择器）的优先级？
!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 其他
六、标准的CSS的盒子模型与低版本IE的盒子模型的区别？
标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
七、CSS三大特性是什么？
CSS 的三大特性分别是层叠性、继承性、优先级。
1.层叠性
层叠性是指相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式，层叠性主要解决样式冲突的问题。
层叠性原则:样式冲突，则遵循就近原则；样式不冲突，则不层叠。
2.继承性
CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。
子元素可以继承父元素的样式，如text-，font-，line-这些元素开头的可以继承，以及color属性。
行高的继承性：行高可以跟单位也可以不跟单位；如果子元素没有设置行高，则会继承父元素的行高为 x；此时子元素的行高是：当前子元素的文字大小 * x；body 行高 x，这样写最大的优势就是里面子元素可以根据自己文字大小自动调整行高。
3、优先级(权重)
当同一个元素指定多个选择器，就会有优先级的产生。
八、伪类和伪元素的区别
伪类是一个以冒号作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态才被呈现到指定的元素时，可以往元素的选择器后面加上对应的伪类。伪元素则用于创建一些不在文档树中的元素，并为其添加样式。
伪类和伪元素的主要区别在于，伪类是通过在元素选择器上加入伪类改变元素状态。伪元素通过对元素的操作进行对元素的改变。
九、CSS3新增伪类有哪些?
-
p:first-of-type 选择属于其父元素的首个元素；
-
p:last-of-type 选择属于其父元素的最后元素；
-
p:only-of-type 选择属于其父元素唯一的元素；
-
p:only-child 选择属于其父元素的唯一子元素；
-
p:nth-child(2) 选择属于其父元素的第二个子元素；
-
:checked 单选框或复选框被选中。
-
:enabled :disabled 表单控件的禁用状态；
十、为什么要初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
十一、为什么清除浮动？如何清除？
在开发过程中，浮动元素是css中最常用的属性，浮动起来的元素会脱离标准流。如果父级盒子没有设置高度就会造成父级盒子的高度塌陷，从而影响下面盒子的正常显示。
清除方法：
1、给父级盒子添加高度
造成高度塌陷的原因就是父盒子没有高度，我们只需要给父盒子添加一个高度即可
2、额外标签法
额外标签法会在浮动元素末尾添加一个空的标签。给这个标签设置clear属性，注意这个标签必须是块级元素
3、给父级添加 overflow 属性
这个方法是向浮动元素的父级盒子添加voerflow：hidden属性，这样就可以达到清除浮动的效果
4、给父级添加after伪元素
利用after伪元素定义一个clearfix类，浮动元素的父级元素调用此类可以实现清除浮动的效果
十二、元素竖向的百分比设定是相对于容器的高度吗？
这需要根据具体情况来看，正常来说，当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的。但是，对一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
十三、嵌入式样式表的优缺点是什么？
1、优点:
-
可以在一个文档中创建多种标签类型。
-
在复杂情况下，可以使用选择器和分组方法来应用样式。
-
无需额外下载。
2、缺点：无法控制多个文档。
十四、CSS的常用框架有哪些？
1、Bootstrap：美国Twitter公司的设计师基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
2、Layui：是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，体积轻盈，组件丰盈，非常适合界面的快速开发。
3、ElementUI：一套为开发者、设计师和产品经理准备的基于 Vue 2.0的桌面端组件库。
4、antd：是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。开箱即用的高质量 React 组件，全链路开发和设计工具体系，数十个国际化语言支持。
十五、px 和 em 的区别
px全称pixel像素，是相对于屏幕分辨率而言的，它是一个绝对单位，但同时具有一定的相对性。在同一个设备上每个像素代表的物理长度是固定不变的，这点表现的是绝对性。但是在不同的设备之间每个设备像素所代表的物理长度是可以变化的，这点表现的是相对性。
em是一个相对长度单位，具体的大小需要相对于父元素计算。
十六、居中为什么要使用 transform，而不用 marginLeft/Top？
transform 属于合成属性，对合成属性进行 transition/animation 动画将会创建一个合成层，这使得被动画元素在一个独立的层中进行动画。通常情况下，浏览器会将一个层的内容先绘制进一个位图中，然后再作为纹理上传到 GPU，只要该层的内容不发生改变，就没必要进行重绘，浏览器会通过重新复合来形成一个新的帧。
top/left属于布局属性，该属性的变化会导致重排，即指对这些节点以及受这些节点影响的其他节点，进行CSS计算->布局->重绘过程，浏览器需要为整个层进行重绘并重新上传到 GPU，造成了极大的性能开销。
十七、 什么是响应式设计？响应式设计的基本原理是什么？
响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
十八、style标签写在body后与body前有什么区别？
页面加载自上而下，当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）。
十九、什么是“渐进增强”和“平稳退化”?
渐进增强是指以最基本的可用性作为出发点，在保证站点页面在低级浏览器中的可用性和可访问性的基础之上，逐步增加功能及提高用户体验。我们日常的一些开发习惯，例如首先使用标记语言编写页面，然后通过样式表来控制页面样式等，其实都属于渐进增强的概念。
平稳退化是指先使用最新的技术面向高级浏览器构建最强的功能及用户体验，然后再针对低级浏览器的限制，逐步衰减那些无法被支持的功能及体验。在我们日常的开发中，先针对Chrome编写页面代码，然后修复IE中的异常或针对IE去除那些无法被实现的功能特色，就是一个典型的平稳退化的例子。
在HTML5与 CSS3实战中，“渐进增强”和“平稳退化”这两个概念尤其重要了，怎样保证使用不断变化的新技术来构建在主流浏览器下都具有基本可用性的站点，并针对高级浏览器进行体验提升，这些是我们在开发过程中需要明确的思路。
上面这些CSS高频考点你都掌握了吗？如果还有遗漏的地方赶紧记下来吧。作为CSS的基础，并且也是很多公司前端岗位面试的高频考点，熟记上面的内容可以帮你轻松过面试，避免因为基础知识掌握不牢固而与心仪的公司失之交臂的遗憾哦~
1687
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
