CSS面试题整理汇总
1、面试官：说说你对盒子模型的理解?
CSS盒模型本质上是一个盒子，它包括：content、padding、border、margin。CSS 中的盒子模型包括IE 盒子模型和标准的 W3C 盒子模型。
在标准的盒子模型中，width 指 content 部分的宽度。
在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度
故在计算盒子的宽度时存在差异：
标准盒模型： 一个块的总宽度= width+margin(左右)+padding(左右)+border(左右)
怪异盒模型： 一个块的总宽度= width+margin（左右）（既 width 已经包含了 padding 和 border值）
2、box-sizing属性
CSS中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度
box-sizing:content-box|border-box|inherit:
content-box：元素的 width/height 不包含padding，border，。【标准盒子模型】
border-box：元素的 width/height 包含 padding，border。【IE 盒子模型】
inherit：继承父元素的 box-sizing 值。
3、面试官：css选择器有哪些？优先级？哪些属性可以继承？
关于css属性选择器常用的有：
id选择器(#myid)
类选择器(.myclass)
属性选择器(a[rel="external"])
伪类选择器(a:hover, li:nth-child)
标签选择器(div, h1,p)
兄弟选择器（h1 + p）
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)
优先级：
!important
内联样式（1000）
ID选择器（0100）
类选择器/属性选择器/伪类选择器（0010）
元素选择器/伪元素选择器（0001）
关系选择器/通配符选择器（0000）
带!important 标记的样式属性优先级最高； 样式表的来源相同时：!important> 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
继承属性：
字体系列属性
font-family |
font-weight |
font-size |
font-style |
字体 |
字体的粗细 |
字体的尺寸 |
字体的风格 |
文本系列属性
text-indent |
text-align |
line-height |
direction |
color |
文本缩进 |
文本水平设置 |
行高 |
书写方向 |
文本颜色 |
元素可见性visibility等
无继承的属性：
display
文本属性：vertical-align、text-decoration、
背景属性、盒子模型的属性、定位属性等
4、面试官：说说em/px/rem/vh/vw区别?
px：绝对单位，页面按精确像素展示
em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值
rem：相对单位，相对的只是HTML根元素font-size的值
vw，就是根据窗口的宽度，分成100等份，100vw就表示满宽，同理，vh则为窗口的高度vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单
5、面试官：css中，有哪些方式可以隐藏页面元素？区别?
通过css实现隐藏元素方法有如下：
1、display:none 将元素设置为display:none后，元素在页面上将彻底消失，导致浏览器的重排和重绘，无法响应点击事件。
2、visibility:hidden 仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘，无法响应点击事件。
3、opacity:0 将元素的透明度设置为0后，元素也是隐藏的，不会引发重排，一般情况下也会引发重绘，可以响应点击事件
4、设置height、width模型属性为0 将元素的height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素，无法响应点击事件
5、position:absolute 将元素移出可视区域 top: -9999px; left:-9999px; 特点：元素不可见，不影响页面布局
6、面试官：谈谈你对BFC的理解？
BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：
1、内部的盒子会在垂直方向上一个接一个的放置
2、对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
3、每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
4、BFC的区域不会与float的元素区域重叠
5、计算BFC的高度时，浮动子元素也参与计算
6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
如何创建BFC？
1、根元素，即HTML元素
2、float的值不为none
3、position为absolute或fixed
4、display的值为inline-block、table-cell、table-caption
5、overflow的值不为visible
BFC应用场景
1、防止margin重叠（塌陷）
2、清除内部浮动
3、自适应多栏布局等
7、面试官：元素水平垂直居中的方法有哪些？
一、水平居中
对于行内元素 : text-align: center;
对于确定宽度的块级元素：
（1）width和margin实现。margin: 0 auto;
（2）绝对定位和margin-left: (父width - 子width）/2,前提是父元素position: relative
对于宽度未知的块级元素
（1）inline-block实现水平居中方法。子元素display：inline-block和父元素text-align:center实现水平居中。
（2）绝对定位+transform，translateX可以移动本身元素的50%。
（3）flex布局父元素使用justify-content:center
（4）table标签配合margin左右auto实现水平居中。使用table标签，再通过给该标签添加左右margin为auto。
二、垂直居中
1、利用 line-height 实现居中，这种方法适合纯文字类
2、通过设置父容器 相对定位 ，子级设置绝对定位，标签通过margin实现自适应居中
3、弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中
4、父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现
5、table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。
8、面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
两栏布局：
两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满。
实现思路1：
1、float 左浮左边栏
2、使用 margin-left 撑出内容块做内容展示
3、级元素添加BFC，防止下方元素飞到上方内容，如overflow: hidden
实现思路2：
flex弹性布局
父盒子display: flex，左侧盒子写入宽度，右侧盒子flex: 1占一份
三栏布局
三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之
实现思路：
1、两边使用 float，中间使用 margin
2、使用 absolute，中间使用 margin
3、圣杯布局，利用margin负值法(详细解释)
使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度为百分之百，这样中间盒子独占一行，左右盒子被挤到下方，让左边的盒子上去要设置margin-left:-100%，让右边的盒子上去要设置margin-left: 负自身宽度
4、使用 display: table 实现
5、使用flex实现 将父级设置为display: flex; justify-content: space-between;即可
6、grid网格布局
设置display: grid; width: 100%; grid-template-columns: 300px auto 300px;即可
9、面试官：说说flexbox（弹性盒布局模型）,以及适用场景？
关于flex常用的属性，我们可以划分为容器属性和容器成员属性，
一、容器属性
flex-direction：决定主轴的方向flex-direction: row | row-reverse |column | column-reverse;
flex-wrap：决定换行规则 flex-wrap: nowrap | wrap |wrap-reverse;
flex-flow： flex-direction属性和flex-wrap属性的简写形式
justify-content：对其方式，水平主轴对齐方式
1、space-between：两端对齐，项目之间的间隔都相等
2、space-around：两个项目两侧间隔相等
align-items：对齐方式，竖直轴线方向
align-content：定义了多根轴线的对齐方式
二、项目的属性（元素的属性）：
order属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0
flex-grow属性：定义项目的放大比例，默认为0，即使存在空间，也不会放大
flex-shrink属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果 定义个item 的 flow-shrink 为 0，则为不缩小
flex-basis属性：定义了在分配多余的空间，项目占据的空间。
flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。
align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖
10、flex实现div左上角、中间、左下角布局css
父级设置 子级利用绝对定位，自由移动到页面的不同位置，例左上角。
display:flex;
position:relative;
flex-direction:row;
justify-content:space-around;
align-items:center;
11、面试官：清除浮动的方式有哪几种？
1、添加额外标签 给父级添加
2、父级添加overflow属性，或者设置高度
3、建立伪类选择器清除浮动(下面案例)或者4、使用before和after双伪元素清除浮动
.parent:after{
/* 设置添加子元素的内容是空*/
content: '';
/* 设置添加子元素为块级元素*/
display: block;
/* 设置添加的子元素的高度0*/
height: 0;
/* 设置添加子元素看不见*/
visibility: hidden;
/* 设置clear：both */
clear: both;
}
12、面试官：CSS3新增了哪些新特性？
一、选择器
css3中新增了一些选择器，主要包括属性选择器、结构伪类选择器、伪元素选择器等
二、新样式
边框 |
背景 |
||
border-radius |
创建圆角边框 |
background-clip |
确定背景画区 |
box-shadow |
为元素添加阴影 |
background-origin |
确定图片对齐点 |
border-image |
使用图片来绘制边框 |
background-size |
调整背景图片大小 |
box-shadow |
设置元素阴影 |
|
|
文字 |
颜色 |
||
word-wrap |
允许在单词内换行 |
rgba |
|
text-overflow |
超过容器边界如何显示 |
rgba分为两部分，rgb为颜色值，a为透明度 |
|
text-shadow |
向文本应用阴影 |
|
|
text-decoration |
对文字更深层次的渲染 |
||
三、transition过渡
transition属性可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔，语法如下：
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
四、transform 转换
transform属性允许你旋转，缩放，倾斜或平移给定元素
五、animation 动画
六、渐变：linear-gradient：线性渐变
background-image:linear-gradient(direction, color-stop1, color-stop2, ...);
七、关于css3其他的新特性还包括flex弹性布局、Grid栅格布局
13、面试官：css3动画有哪些？
css实现动画的方式，有如下几种：
1、transition 实现渐变动画 过渡简写：transition: all 2s ease-in 500ms;
2、transform 转变动画
包含四个常用的功能：translate：位移scale：缩放rotate：旋转skew：倾斜
3、animation 实现自定义动画
通过 @keyframes 来定义关键帧
14、面试官：如果要做优化，CSS提高性能的方法有哪些？
实现方式有很多种，主要有如下：
1、内联首屏关键CSS：通过内联css关键代码能够使浏览器在下载完html后就能立刻渲染
2、异步加载CSS：
3、资源压缩：利用webpack等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间
4、合理使用选择器：不要嵌套使用过多复杂选择器
5、减少使用昂贵的属性：在页面发生重绘的时候，昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低浏览器的渲染性能
6、不要使用@import：@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时
15、面试官：浏览器重绘与重排的区别？
重排/回流（Reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。
重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变
当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分。重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。
重绘不一定会出现重排，重排必然会出现重绘
如何触发重排和重绘？
任何改变用来构建渲染树的信息都会导致一次重排或重绘：
1、添加、删除、更新DOM节点
2、通过display: none隐藏一个DOM节点-触发重排和重绘
3、通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
4、移动或者给页面中的DOM节点添加动画
5、添加一个样式表，调整样式属性
6、用户行为，例如调整窗口大小，改变字号，或者滚动。
如何避免重绘或者重排？
1、集中改变样式，不要一条一条地修改 DOM 的样式。
2、不要把 DOM 结点的属性值放在循环里当成循环里的变量。
3、为动画的 HTML 元件使用 fixed 或 absolute 的 position，那么修改他们的 CSS 是不会reflow 的。
4、不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
5、尽量只修改position：absolute或fixed元素，对其他元素影响不大
6、动画开始GPU加速，translate使用3D变化
7、将元素提升为合成层
16、面试官：什么是响应式设计？响应式设计的基本原理是什么？如何做？
响应式网站设计是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整
响应式设计的基本原理：通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport
实现响应式布局的方式有如下：1、媒体查询 2、百分比 3、vw/vh 4、rem
媒体查询语法：
@mediascreen (min-width: 375px) and (max-width: 600px) {
body {
font-size: 18px;
}
}响应式布局优点：1、面对不同分辨率设备灵活性强2、能够快捷解决多设备显示适应问题
缺点：
1、仅适用布局、信息、框架并不复杂的部门类型网站
2、兼容各种设备工作量大，效率低下
17、面试官：如何实现单行／多行文本溢出的省略样式？
一、单行文本溢出省略
1、text-overflow: ellipsis：规定当文本溢出时，显示省略符号来代表被修剪的文本
2、white-space:nowrap：设置文字在一行显示，不能换行
3、overflow:hidden：文字长度超出限定宽度，则隐藏超出的内容
二、多行文本溢出省略
基于行数截断
-webkit-line-clamp:2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）
display:-webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式
overflow:hidden：文本溢出限定的宽度就隐藏内容
text-overflow:ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本
18、面试官：如何使用css完成视差滚动效果?
视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验
可以使用transform:translate3D来实现
transform:css3 属性，可以对元素进行变换(2d/3d)，包括平移 translate,旋转 rotate,缩放 scale,
perspective:css3 属性，当元素涉及 3d 变换时，perspective 可以定义我们眼睛看到的 3d 立体效果，即空间感
这种方式实现视觉差动的原理如下：
1、容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中，
2、子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样
3、滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果
19、如何画一条0.5px的线
方法一、移动端，采用metaviewport的方式
这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px。
方法二、采用transform: scale()的方式
transform:scale(0.5,0.5);方法三、使用boxshadow
height:1px;
box-shadow:0 0.5px 0 #000;设置box-shadow的第二个参数为0.5px，表示阴影垂直方向的偏移为0.5px。
20、面试官：CSS如何画一个三角形？原理是什么？
/*记忆口诀：盒子宽高均为零，三面边框皆透明。 */
div:after{
position: absolute;
width: 0px;
height: 0px;
content: " ";
border-right: 100px solid transparent;
border-top: 100px solid #ff0;
border-left: 100px solid transparent;
border-bottom: 100px solid transparent;
}
21、面试官：让Chrome支持小于12px的文字方式有哪些？区别？
常见的解决方案有：
1、zoom
zoom的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸
其支持的类型有：
zoom:50%，表示缩小到原来的一半
zoom:0.5，表示缩小到原来的一半
2、-webkit-transform:scale()
针对chrome浏览器,加webkit前缀，用transform:scale()这个属性进行放缩
3、-webkit-text-size-adjust:none
该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小
22、面试官：说说对Css预编语言的理解？有哪些区别?
Css作为一门标记性语言，语法相对简单，但同时也带来一些问题。需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，Css预处理器便是针对上述问题的解决方案
Css预编译语言在前端里面有三大优秀的预编处理器，分别是：
1、sass 2、less 3、stylus
变量：less声明的变量必须以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开
嵌套：三者的嵌套语法都是一致的
作用域：Css 预编译器把变量赋予作用域，也就是存在生命周期。就像 js一样，它会先从局部作用域查找变量，依次向上级作用域查找
混入：Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用
代码模块化：模块化就是将Css代码分成一个个模块
使用方法：
@import './common';