CSS 高频面试题汇总

# 什么是盒子模型？

在网页中，一个元素占有空间的大小由元内容（content），内边距（padding），边框（border），外边距（margin）四个部分。有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
共有两种盒子模型:
W3C标准盒模型: 属性width,height包含content,不包含border和padding
IE盒模型: 属性width,height包含content,border,padding

# box-sizing属性？

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

# 什么是css Hack?

就是针对不同的浏览器写不同css样式。css hack一般来说是为了兼容IE浏览器的。
IE浏览器Hack一般又分为三种: 条件Hack、属性Hack、选择器Hack。

# 为什么要初始化CSS样式？

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

# CSS选择器有哪些？哪些属性可以继承？

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

可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > id > class > tag ( !important 比内联优先级高 )

元素选择符： 1
class选择符： 10
id选择符：100
内联样式：1000

!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

# CSS3新增伪类有那些?

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

# 伪类选择器和伪元素的区别

伪类用于向某些选择器添加特殊效果 (单冒号)
伪元素用于将某个特殊的东西添加到某些元素的前后 (双冒号)

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

bloc 块类型。默认宽度为父元素宽度，可设置宽高，换行显示
none 元素不显示，并从文档流中移除
inline 行内元素，默认宽度为内容宽度，不可设置宽高，同行显示
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示
list-item 像块类型元素一样，可以设置宽高，同行显示
table 此元素会作为会计表格来显示
inherit 规定应该从父元素继承display属性的值

# position的值？

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute (绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed (固定定位)：所固定的参照对像是可视窗口。

# CSS里的 visibility 属性有个 collapse 属性值？在不同浏览器下以后什么区别？

当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟 hidden 是一样的。
chrome 中，使用 collapse 值和使用 hidden 没有区别。
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

# display:none 与 visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

# img、inline-block 的 3 像素问题如何解决？

1. 父标签增加font-size:0
2. 标签增加display:block
3. 标签增加vertical-align: middle
4. 标签增加float:left

# flex布局中 flex 的默认值是多少

2009年，W3C提出了一种新的方案：Flex布局，可以简便、完整、响应式地实现各种页面布局。
Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

行内元素也可以使用Flex布局

box{
  display: inline-flex;
}

采用Flex布局的元素，称为Flex容器（flex container），简称容器。
所有子元素自动成为容器成员，称为Flex项目（flex item），简称项目。

设置在容器上的属性有：

1. flex-direction: row | row-reverse | column | column-reverse;
   决定主轴的方向，即项目的排列方向
2. flex-wrap: nowrap | wrap | wrap-reverse;
   如果一条轴线排不下，如何换行
3. flex-flow: <flex-direction> <flex-wrap>;
   flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4. justify-content: flex-start | flex-end | center | space-between | space-around;
   定义了项目在主轴上的对齐方式
5. align-items: flex-start | flex-end | center | baseline | stretch;
   定义项目在交叉轴上如何对齐
6. align-content: flex-start | flex-end | center | space-between | space-around | stretch;
   定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

设置在项目上的属性有：

1. order: <integer> /* default 0 */
   定义项目的排列顺序，数值越小，排列越靠前
2. flex-grow: <number>; /* default 0 */
   定义项目的放大比例， 即如果存在剩余空间，也不放大
3. flex-shrink: <number>; /* default 1*/
   flex-shrink属性定义了项目的缩小比例，默认为1即如空间不足时项目缩小
4. flex-basis: <length> | auto; /* default auto*/
   flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
   默认为auto即项目的本来大小
5. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
   flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
6. align-self: auto | flex-start | flex-end | center | baseline | stretch;
   允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
   默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

.CSS优化、提高性能的方法有哪些？

1. 避免过度约束
2. 避免后代选择符
3. 避免链式选择符
4. 使用紧凑的语法
5. 避免不必要的命名空间
6. 避免不必要的重复
7. 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
8. 避免！important，可以选择其他选择器
9. 尽可能的精简规则，你可以合并不同类里的重复规则

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

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

.说一说BFC

块格式化上下文（Block Formatting Context，BFC）
用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文。是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

触发条件,满足其一即可

1. body元素
2. float的值不为none；
3. overflow的值不为visible；
4. position的值为fixed / absolute；
5. display的值为table-cell / table-caption / inline-block / flex / inline-flex。

BFC作用

1. 可以包含浮动元素——清除内部浮动
   当给元素设置overflow: hidden时，实际上创建了一个超级属性BFC，此超级属性反过来决定了height:auto是如何计算的。在“BFC布局规则”中提到：计算BFC的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，达成了清除浮动的目标，所以父元素就包裹住了子元素。
2. 分属于不同的BFC时可以阻止margin重叠
   兄弟、父子元素等之间之所以会发生margin合并，是因为它们属于同一个BFC。
   所以只要让它们不属于同一个BFC就可以了，即加上overflow: hidden。

BFC布局规则

1. 内部的块级元素会在垂直方向，一个接一个地放置；
2. 块级元素垂直方向的距离由margin决定。
   属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并；
3. 每个元素的margin box的左边，与包含border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此；
4. BFC的区域不会与float box重叠；
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；
6. 计算BFC的高度时，浮动元素也参与计算。

.说说回流和重绘

回流: 当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程
如何引发回流? 页面首次渲染，浏览器窗口改变大小，元素尺寸或位置发生改变，元素内容变化（文字数量或图片大小等等），元素字体大小变化，DOM操作，激活CSS伪类（例如：:hover）
查询某些属性或调用某些方法
scrollTo()，getComputedStyle()，scrollIntoView()、scrollIntoViewIfNeeded()，getBoundingClientRect()

重绘: 当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它的过程。

浏览器使用流式布局模型。浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一。回流必将引起重绘，重绘不一定会引起回流

如何避免

1.避免使用table布局。
2.尽可能在DOM树的最末端改变class
3.避免设置多层内联样式
4.将动画效果应用到position属性为absolute或fixed的元素上。
5.避免使用CSS表达式（例如：calc()）
6.避免频繁操作样式，最好一次性重写style属性，或将样式列表定义为class并一次性更改class属性
7.避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中
8.先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘
9.避免频繁读取会引发回流/重绘的属性，如确实需要多次使用，就用一个变量缓存起来
10.对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流

.link 和 @import的区别

1. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4. link支持使用Javascript控制DOM去改变样式；而@import不支持。

.CSS单位都有哪些

1. %：
   (1). margin，padding 是相对父元素的 宽度 计算的
   (2). top，left，bottom，right 是相对于父元素的 高度 计算的
   (3). translate 是相对自身元素来算的

2. px：像素
   (1). em：1em 等于当前父元素的 font-size (浏览器默认16px，可继承，em 可以省略)
   (2). rem：1rem 等于 html 根元素的 font-size
   (3). vw，vh：视口宽度被均分成 100vw，视口高度被均分成 100vh。视口宽高是页面的可视区域，如键盘弹起安卓的视口宽高发生变化，但 iPhone 不会。（安卓4.4，iOS6以上支持）

3. vmax, vmin：
   1.vmax = max(vw,vh)（vmax安卓4.4，iOS8以上支持）
   2.vmin = min(vw,vh)（vmin安卓4.4，iOS6以上支持）

4. ex和ch：
   1.ex以字符"x"的高度为基准；例如1ex表示和字符"x"一样长。
   2.ch以数字"0"的宽度为基准；例如2ch表示和2个数字"0"一样长

.让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

.li 与 li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

解决方法：

1. 可以将<li>代码全部写在一排
2. 浮动li中float：left
3. 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

# CSS 写在 body前 和 body后 有什么区别

1. 如果没有遇到jS阻塞，放哪里都一样，
2. 如果遇到js阻塞，把CSS写在BODY上面，不会出现二次渲染，把CSS写在BODY下面，JS阻塞时，会出现一次渲染，等阻塞完毕会出现二次渲染（除非外链的CSS下载时间比阻塞时间长）。

.如何选择图片格式，例如 png, webp

图片格式 压缩方式 透明度 动画 浏览器兼容 适应场景
JPEG 有损压缩 不支持 不支持 所有 复杂颜色及形状、 尤其是照片
GIF 无损压缩 支持 支持 所有 简单颜色， 动画
PNG 无损压缩 支持 不支持 所有 需要透明时
APNG 无损压缩 支持 支持 FirefoxSafariiOS Safari 需要半透明效果的动画
WebP 有损压缩 支持 支持 ChromeOperaAndroid ChromeAndroid Browser 复杂颜色及形状浏览器平台可预知
SVG 无损压缩 支持 支持 所有（IE8以上） 简单图形，需要良好的放缩体验需要动态控制图片特效