（三）CSS前端开发面试会问到的问题有哪些？

⭐️ 作者：船长在船上
🚩主页：来访地址船长在船上的博客
🔨 简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习！

👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。 

上篇文章： 

（一）前端开发面试会问到的问题有哪些？

（二）前端开发面试会问到的问题有哪些？

 

 

 

 20.说一下 css 盒模型

简介：就是用来装页面上的元素的矩形区域。CSS 中的盒子模型包括 IE 盒子模型和标

准的 W3C 盒子模型。

box-sizing(有 3 个值哦)：border-box,padding-box,content-box.

标准盒子模型：

 

 

IE 盒子模型：

 

 

区别：从图中我们可以看出，这两种盒子模型最主要的区别就是 width 的包含范围，在

标准的盒子模型中，width 指 content 部分的宽度，在 IE 盒子模型中，width 表示

content+padding+border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差

异：

 

标准盒子模型的盒子宽度：左右 border+左右 padding+width

 

IE 盒子模型的盒子宽度：width 在 CSS3 中引入了 box-sizing 属性，box-sizing:content-box;表示标准的盒子模型， box-sizing:border-box 表示的是 IE 盒子模型

最后，前面我们还提到了，box-sizing:padding-box,这个属性值的宽度包含了左右 padding+width 也很好理解性记忆，包含什么，width 就从什么开始算起。

 

21.画一条 0.5px 的线

采用 meta viewport 的方式

 

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

采用 border-image 的方式

采用 transform: scale()的方式

 

 

 

22.link 标签和 import 标签的区别

link 属于 html 标签，而@import 是 css 提供的

页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加载。

link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。

link 方式样式的权重高于@import 的。

 

 

23.transition 和 animation 的区别

 

Animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，他们

的主要区别是 transition 需要触发一个事件才能改变属性，而 animation 不需要触发任何

事件的情况下才会随时间改变属性值，并且 transition 为 2 帧，从 from .... to，而 animation

可以一帧一帧的。

 

24.Flex 布局

Flex 是 Flexible Box

的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它

对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

简单的分为容器属性和元素属性

容器的属性：

 

flex-direction：决定主轴的方向（即子 item 的排列方法）

 

.box {

flex-direction: row | row-reverse | column | column-reverse;

}

 

flex-wrap：决定换行规则

 

.box{

flex-wrap: nowrap | wrap | wrap-reverse;

}

 

flex-flow：

 

.box {

flex-flow: <flex-direction> || <flex-wrap>;

}

 

justify-content：对其方式，水平主轴对齐方式

align-items：对齐方式，竖直轴线方向

 

项目的属性（元素的属性）：

order 属性：定义项目的排列顺序，顺序越小，排列越靠前，默认为 0

flex-grow 属性：定义项目的放大比例，即使存在空间，也不会放大

 

flex-shrink 属性：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果

定义个 item 的 flow-shrink 为 0，则为不缩小

flex-basis 属性：定义了在分配多余的空间，项目占据的空间。

flex：是 flex-grow 和 flex-shrink、flex-basis 的简写，默认值为 0 1 auto。

align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖 align-items，默认属

性为 auto，表示继承父元素的 align-items

比如说，用 flex 实现圣杯布局

 

25.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 的元素

 

26.关于 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 有兼容性问题

 

27.说一下块元素和行元素

块元素：独占一行，并且有自动填满父元素，可以设置 margin 和 pading 以及高度和宽

度

行元素：不会独占一行，width 和 height 会失效，并且在垂直方向的 padding 和 margin

会失

效。

 

28.多行元素的文本省略号

display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;

 

29.visibility=hidden, opacity=0，display:none

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些

事件，如 click 事件，那么点击该区域，也能触发点击事件的 visibility=hidden，该元素

隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件 display=none，

把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

 

 

 

30.双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向 marigin 会重叠

折叠的结果为：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

 

 上篇文章： 

（一）前端开发面试会问到的问题有哪些？

（二）前端开发面试会问到的问题有哪些？

🔔  感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。  

后续会继续更新面试题，关注收藏一下随时查看。