文章目录
前言正文1.说一下css盒模型2.说一下CSS 3中引入的`box-sizing`属性3.`link` 标签和`import`标签的区别4.`transition`和`animation`的区别5.说说flex布局6.BFC（块级格式化上下文，用于清除浮动，防止margin重叠等）7.关于JS动画和css3动画的差异性8.说一下块元素和行元素9.多元素的文本省略号10.双边距重叠问题（外边距折叠）11.`position`属性比较12. CSS3新特性都有哪些？13.CSS 选择器有哪些，优先级呢14. 怎么样让一个元素消失，讲讲15. css动画如何实现16. 如何实现图片在某个容器中居中？17. 如何实现垂直居中？18. CSS3中对溢出的处理是什么？19. float 的元素，display 是什么20. `display：table` 和本身的 `table`21. `z-index`的定位方法22.如果想要改变一个DOM元素的字体颜色，不在它本身上进行操作有什么办法？23.对 CSS 的新属性有了解过的吗？24. `line-height` 和 `height` 的区别25.设置一个元素的背景颜色，背景颜色会填充哪些区域？26. 知道属性选择器和伪类选择器的优先级吗27.`inline-block`、`inline` 和 `block` 的区别28.为什么 `img `是 `inline` 还可以设置宽29. 了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法30. `overflow` 的原理31. `display:none` 和 `visibilty:hidden `的区别32.谈谈你知道的css布局都有哪些？33. css预处理器有什么？
前言
本篇文章主要写的是面试题中的CSS篇，如果有需要http/html/浏览器方面面试题的小伙伴们，请在下方评论区留言，下一篇我会更新相关面试题。如果没有的话，下一篇预备更新 JS相关面试题
面试题参考文章：
【Web前端面试】葵花宝典 （2022版本）—— JS篇（上）【Web前端面试】葵花宝典(2022版本)—— JS篇（下）【Web前端面试】葵花宝典(2022版本)—— Vue篇【JavaScript】中this指向相关的经典面试题【JavaScript】作用域提升面试题（详解）正文
1.说一下css盒模型
简介：就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。
2.说一下CSS 3中引入的box-sizing属性
box-sizing:content-box 表示标准的盒子模型，左右 border+左右 padding+widthbox-sizing:border-box 表示的是 IE 盒子模型,IE 盒子模型的盒子宽度：width,width 表示 content+padding+border 这三个部分的宽度box-sizing:padding-box这个属性值的宽度包含了左右 padding+width 3.link 标签和import标签的区别
答：
link属于html标签，而@import是css提供的页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。link方式样式的权重高于@import的。 4.transition和animation的区别
animation和transition大部分属性是相同的，他们都是随事件改变元素的属性值，他们的主要区别是：transition需要触发一个事件才能改变属性值，而animation不需要触发任何事件的情况下才会随事件改变属性值，并且transition为2帧，从from…to，而animation可以一帧一帧的。
5.说说flex布局
详细讲解请移步至这篇文章：Flex 布局
6.BFC（块级格式化上下文，用于清除浮动，防止margin重叠等）
直译成：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。
BFC区域不会与float box重叠
BFC 是页面上的一个独立的容器，子元素不会影响到外面
计算 BFC 的高度时，浮动元素也会参与计算
哪些元素会生成BFC？
根元素float 不为 none的元素position为fixed 和 absolute 的元素display 为 inline-block、table-cell、table-caption、flex、inline-flex 的元素overflow不为 visible的元素 7.关于JS动画和css3动画的差异性
渲染线程分为 main thread 和 compositor thread，如果 css 动画只改变 transform 和 opacity， 这时整个 CSS 动画得以在 compositor trhead 完成（而 JS 动画则会在 main thread 执行，然 后出发 compositor thread 进行下一步操作），特别注意的是如果改变 transform 和 opacity 是不会 layout 或者 paint 的
区别：
功能涵盖面，JS比CSS大实现/重构难度不一，css3比JS更加简单，性能调优方向固定对帧素表现不好的低版本浏览器，css3可以做到自然降级css动画有天然事件支持css3有兼容性问题8.说一下块元素和行元素
块元素：独占一行，并且有自动填满父元素，可以设置margin和padding以及高度和宽度行元素：不会独占一行，width和height会失效，并且在垂直方向上的padding和margin会失效 9.多元素的文本省略号
overflow:hiddendispaly:-webkit-box /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示*/-webkit-box-orient:vertical /*必须结合的属性 ，设置伸缩盒对象的子元素垂直排列 。*/-webkit-line-clamp:3 /*可以显示的行数，超出部分用...表示*/text-overflow:ellipsis /*多行文本的情况下，用省略号“...”隐藏溢出范围的文本*/10.双边距重叠问题（外边距折叠）
多个相邻（兄弟或者父子关系）普通流的块元素垂直方向margin会重叠
折叠的结果为：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。两个外边距一正一负时，折叠结果是两者的相加的和。11.position属性比较
固定定位 fixed
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。
相对定位 relative
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位 absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 <html>。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
粘性定位 sticky
元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位
默认定位 static
默认值。没有定位，元素出现在正常的流中（忽略top，bottom，left，right 或者 z-index声明）。
inherit
规定应该从父元素继承 position 属性的值。
12. CSS3新特性都有哪些？
开放题。
CSS3边框如border-radius，box-shadow 等；CSS3 背景如 background-size， background-origin 等；CSS3 2D，3D 转换如 transform 等；CSS3 动画如 animation 等。 13.CSS 选择器有哪些，优先级呢
选择器：
id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等；优先级：
同一元素引用了多个样式时，排在后面的样式属性的优先级高；
样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器；、
标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了 与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级 比较低，至少比标签选择器的优先级低
带有!important 标记的样式属性的优先级最高；
样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户 自定义样式 > 浏览器默认样式
14. 怎么样让一个元素消失，讲讲
答： display:none; visibility:hidden; opacity: 0; 等
15. css动画如何实现
创建动画序列，需要使用animation 属性或其子属性，该属性允许配置动画时间、时长 以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是 由 @keyframes 规则实现，具体情况参见使用 keyframes 定义动画序列小节部分。transition 也可实现动画。transition 强调过渡，是元素的一个或多个属性发生变化时产生 的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生 （例如 hover）时才能获取样式，这样就会产生过渡动画。 16. 如何实现图片在某个容器中居中？
父元素固定宽高，利用定位及设置子元素margin 值为自身的一半。父元素固定宽高，子元素设置 position: absolute，margin：auto 平均分配 margincss3 属性 transform。子元素设置 position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);即可将父元素设置成 display: table ,子元素设置为单元格 display: table-cell。弹性布局 display: flex。设置 align-items: center; justify-content: center 17. 如何实现垂直居中？
父元素display:flex;align-items:center;元素绝对定位absolute，top:50%，margin-top：-（高度/2）高度不确定用 transform：translateY（-50%）父元素 table 布局，子元素设置 vertical-align:center 18. CSS3中对溢出的处理是什么？
text-overflow 属性，三个可选值如下：
clip 是修剪文本；ellipsis 为显示省略符号来表被修剪的文本；string 为使用给定的字符串来代表被修剪的文本。 19. float 的元素，display 是什么
答：display为block
20. display：table 和本身的 table
display:table 和本身 table 是相对应的，区别在于，display：table 的 css 声明能够让一个 html 元素和它的子节点像 table 元素一样，使用基于表格的 css 布局，是我们能够轻松定 义一个单元格的边界，背景等样式，而不会产生因为使用了 table 那样的制表标签导致 的语义化问题。
之所以现在逐渐淘汰了 table 系表格元素，是因为用 div+css 编写出来的文件比用 table 边写出来的文件小，而且 table 必须在页面完全加载后才显示，div 则是逐行显示，table 的嵌套性太多，没有 div 简洁
21. z-index的定位方法
z-index 属性设置元素的堆叠顺序，拥有更好堆叠顺序的元素会处于较低顺序元素之前， z-index 可以为负，且 z-index 只能在定位元素上奏效
该属性设置一个定位元素沿 z 轴的位置，如果为正数，离用户越近，为负数，离用户越远，它的属性值有 auto、默认、 堆叠顺序与父元素相等、number、inherit、从父元素继承 z-index 属性的值。
22.如果想要改变一个DOM元素的字体颜色，不在它本身上进行操作有什么办法？
答：可以更改父元素的color
23.对 CSS 的新属性有了解过的吗？
CSS3 的新特性中
在布局方面新增了 flex 布局，
在选择器方面新增了例如 first-of-type,nth-child 等选择器
在盒模型方面添加了 box-sizing 来改变盒模型
在动画 方面增加了 animation，2d 变换，3d 变换等
在颜色方面添加透明，rbga 等
在字体方 面允许嵌入字体和设置字体阴影，最后还有媒体查讯等
24. line-height 和 height 的区别
line-height 一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的
height 一般是指容器的整体高度。
25.设置一个元素的背景颜色，背景颜色会填充哪些区域？
background-color 设置的背景颜色会填充元素的 content、padding、border 区域。
26. 知道属性选择器和伪类选择器的优先级吗
属性选择器和伪类选择器优先级相同
27.inline-block、inline 和 block 的区别
block 是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding 水平垂直 方向都有效。
inline：设置 width 和 height 无效，margin 在竖直方向上无效，padding 在水平方向垂直 方向都有效，前后无换行符
inline-block：能设置宽度高度，margin/padding 水平垂直方向 都有效，前后无换行符
28.为什么 img 是 inline 还可以设置宽
涉及到一个概念：**可替换元素** 可替换元素比如`img` `input`等 ,它们的内容不受当前文档的样式的影响 CSS 可以影响他们的位置,但不会影响到内容 ，他们的内容都不是通过在标签内添加文本,而是通过某个属性(比如src、data、label或js控制)来显示内容的，可替换元素拥有内置宽高,他们可以设置width和height。 他们的性质同设置了`display:inline-block`的元素一致。 所以`img`是`inline`元素但是可以设置宽高。29. 了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法
DOM 的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性， 其他元素的几何属性也会受到影响，浏览器需要重新构造渲染书，这个过程称之为重排， 浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘。
引起重排重绘的原因有：
添加或者删除可见的 DOM 元素元素尺寸位置的改变 浏览器页面初始化浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重减少重绘重排的方法有：
不在布局信息改变时做 DOM 查询使用csstext,className 一次性改变属性使用 fragment 对于多次重排的元素，比如说动画使用绝对定位脱离文档流，使其不影响其他元素 30. overflow 的原理
当元素设置了 overflow 样式且值部位 visible 时，该元素就构建了一个 BFC，BFC 在计算 高度时，内部浮动元素的高度也要计算在内，也就是说技术 BFC 区域内只有一个浮动 元素，BFC 的高度也不会发生塌缩，所以达到了清除浮动的目的
31. display:none 和 visibilty:hidden 的区别
visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉 32.谈谈你知道的css布局都有哪些？
六种布局方式总结：圣杯布局、双飞翼布局、Flex 布局、绝对定位布局、表格布局、网 格布局。
圣杯布局是指布局从上到下分为header、container、footer，然后 container 部分定为三栏 布局。这种布局方式同样分为 header、container、footer。圣杯布局的缺陷在于 center 是 在 container 的 padding 中的，因此宽度小的时候会出现混乱。双飞翼布局给 center 部分包裹了一个 main 通过设置 margin 主动地把页面撑开。Flex 布局是由 CSS3 提供的一种方便的布局方式。绝对定位布局是给 container 设置 position: relative 和 overflow: hidden，因为绝对定位的元 素的参照物为第一个 postion 不为 static 的祖先元素。 left 向左浮动，right 向右浮动。 center 使用绝对定位，通过设置 left 和 right 并把两边撑开。 center 设置 top: 0 和 bottom: 0 使其高度撑开。表格布局的好处是能使三栏的高度统一。网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。 网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关 系 33. css预处理器有什么？
lesssass等本期前端面试葵花宝典CSS篇就完结了，预计下一篇更新JavaScript相关面试题，喜欢的小伙伴一键三连哦，有兴趣的可以订阅专栏哦