CSS前端经典面试题及解析——小白入门必备

参考资料：

css-tricks.com/almanac/sel…

15.说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。

CSS 盒模型描述了以文档树中的元素而生成的矩形框，并根据排版模式进行布局。每个盒子都有一个内容区域（例如文本，图像等）以及周围可选的padding、border和margin区域。

CSS 盒模型负责计算：

块级元素占用多少空间。
边框是否重叠，边距是否合并。
盒子的尺寸。

盒模型有以下规则：

块级元素的大小由width、height、padding、border和margin决定。
如果没有指定height，则块级元素的高度等于其包含子元素的内容高度加上padding（除非有浮动元素，请参阅下文）。
如果没有指定width，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的padding。
元素的height是由内容的height来计算的。
元素的width是由内容的width来计算的。
默认情况下，padding和border不是元素width和height的组成部分。

参考资料：

www.smashingmagazine.com/2010/06/the…

这是我整理的面试题中的一部分，此外还包含HTML、JavaScript、React、Vue、浏览器、服务端与网络、算法等等…

篇幅有限，仅展示部分内容

如果你需要这份完整版的面试题+解析，【点击我】就可以了，免费分享给大家。

16.`* { box-sizing: border-box; }`会产生怎样的效果？

元素默认应用了box-sizing: content-box，元素的宽高只会决定内容（content）的大小。
box-sizing: border-box改变计算元素width和height的方式，border和padding的大小也将计算在内。
元素的height = 内容（content）的高度 + 垂直方向的padding + 垂直方向border的宽度
元素的width = 内容（content）的宽度 + 水平方向的padding + 水平方向border的宽度

17. `display`的属性值都有哪些？

none, block, inline, inline-block, table, table-row, table-cell, list-item.

18. `inline`和`inline-block`有什么区别？

我把block也加入其中，为了获得更好的比较。

| — | — | — | — |

| 能否设置width和height | 能 | 能 | 不能。设置会被忽略。 |

| 可以使用vertical-align对齐 | 不可以 | 可以 | 可以 |

| 浮动（float） | - | - | 就像一个block元素，可以设置垂直边距和填充。 |

19.`relative`、`fixed`、`absolute`和`static`四种定位有什么区别？

经过定位的元素，其position属性值必然是relative、absolute、fixed或sticky。

static：默认定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
absolute：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
sticky：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。

参考资料：

developer.mozilla.org/en/docs/Web…

20.你了解 CSS Flex 和 Grid 吗？

Flex 主要用于一维布局，而 Grid 则用于二维布局。

Flex

flex容器中存在两条轴，横轴和纵轴，容器中的每个单元称为flex item。

在容器上可以设置6个属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

注意：当设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

Flex 项目属性

有六种属性可运用在 item 项目上:

order
flex-basis
flex-grow
flex-shrink
flex
align-self

Grid

CSS网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。

像表格一样，网格布局让我们能够按行或列来对齐元素。但是，使用CSS网格可能还是比CSS表格更容易布局。例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。

21.响应式设计与自适应设计有何不同？

响应式设计和自适应设计都以提高不同设备间的用户体验为目标，根据视窗大小、分辨率、使用环境和控制方式等参数进行优化调整。

响应式设计的适应性原则：网站应该凭借一份代码，在各种设备上都有良好的显示和使用效果。响应式网站通过使用媒体查询，自适应栅格和响应式图片，基于多种因素进行变化，创造出优良的用户体验。就像一个球通过膨胀和收缩，来适应不同大小的篮圈。

自适应设计更像是渐进式增强的现代解释。与响应式设计单一地去适配不同，自适应设计通过检测设备和其他特征，从早已定义好的一系列视窗大小和其他特性中，选出最恰当的功能和布局。与使用一个球去穿过各种的篮筐不同，自适应设计允许使用多个球，然后根据不同的篮筐大小，去选择最合适的一个。

参考资料：

developer.mozilla.org/en-US/docs/…
mediumwell.com/responsive-…
css-tricks.com/the-differe…

22.你有没有使用过视网膜分辨率的图形？当中使用什么技术？

我倾向于使用更高分辨率的图形（显示尺寸的两倍）来处理视网膜显示。更好的方法是使用媒体查询，像@media only screen and (min-device-pixel-ratio: 2) { ... }，然后改变background-image。

对于图标类的图形，我会尽可能使用 svg 和图标字体，因为它们在任何分辨率下，都能被渲染得十分清晰。

还有一种方法是，在检查了window.devicePixelRatio的值后，利用 JavaScript 将<img>的src属性修改，用更高分辨率的版本进行替换。

参考资料：

www.sitepoint.com/css-techniq…

23.什么情况下，用`translate()`而不用绝对定位？什么时候，情况相反。

translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。因此translate()更高效，可以缩短平滑动画的绘制时间。

当使用translate()时，元素仍然占据其原始空间（有点像position：relative），这与改变绝对定位不同。

参考资料：

www.paulirish.com/2012/why-mo…

其他答案

neal.codes/blog/front-…
quizlet.com/28293152/fr…
peterdoes.it/2015/12/03/…

24.一边固定宽度一边宽度自适应

可以使用flex布局复制下面的HTML和CSS代码用浏览器打开可以看到效果

.wrap {

display: flex;

justify-content: space-between;

}

.div1 {

min-width: 200px;

}

.div2 {

width: 100%;

background: #e6e6e6;

}

html,

body,

div {

height: 100%;

margin: 0;

}

25.水平垂直居中的方式

flex

// 父容器

display: flex;

justify-content: center;

align-items: center;

position

// 父容器

position: relative;

// 子容器

position:absolute;

margin:auto;

top:0;

bottom:0;

left:0;

right:0;

position+transform

// 父容器

position: relative;

// 子容器

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

table-cell

html, body {

height: 100%;

width: 100%;

margin: 0;

}

.box {

display: table;

height: 100%;

width: 100%;

}

.content {

display: table-cell;

vertical-align: middle;

text-align: center;

}

.inner {

background-color: #000;

display: inline-block;

width: 200px;

height: 200px;

}

26.display:none、visibile:hidden、opacity:0的区别

| — | — | — | — |

| display: none | 是 | 否 | 否 |

| visibile: hidden | 是 | 是 | 否 |

| opacity: 0 | 是 | 是 | 是 |

27.CSS中link和@import的区别

link属于HTML标签，而@import是CSS提供的
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
import只在IE5以上才能识别，而link是HTML标签，无兼容问题
link方式的样式的权重高于@import的权重

28.文本超出部分显示省略号

单行

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

多行

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3; // 最多显示几行

overflow: hidden;

29.利用伪元素画三角

.info-tab {

position: relative;

}

.info-tab::after {

content: ‘’;

border: 4px solid transparent;

border-top-color: #2c8ac2;

position: absolute;

top: 0;

}

复制代码

30.已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形

需要用到css的object-fit属性

div {

width: 200px;

height: 200px;

}

img {

object-fit: cover;

width: 100%;

height: 100%;

}

MDN

31.iframe的作用

iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。

优点

便于修改，模拟分离，像一些信息管理系统会用到。
但现在基本不推荐使用。除非特殊需要，一般不推荐使用。

缺点

iframe的创建比一般的DOM元素慢了1-2个数量级
iframe标签会阻塞页面的的加载，如果页面的onload事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好，在Safari和Chrome中可以通过js动态设置iframe的src属性来避免阻塞。
iframe对于SEO不友好，替换方案一般就是动态语言的Incude机制和ajax动态填充内容等。

32.过渡与动画的区别是什么

transition

可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟以一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果而动画属性

animation

可以制作类似Flash动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。

33.什么是外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

34.去除inline-block元素间间距的方法

移除空格
使用margin负值
使用font-size:0
letter-spacing
word-spacing

更详细的介绍请看:去除inline-block元素间间距的N种方法

35.为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
去掉标签的默认样式如：margin,padding，其他浏览器默认解析字体大小，字体设置。

36.行内格式化上下文 IFC

行内格式化上下文是一个网页的渲染结果的一部分。其中，各行内框（inline boxes）一个接一个地排列，其排列顺序根据书写模式（writing-mode）的设置来决定：

对于水平书写模式，各个框从左边开始水平地排列
对于垂直书写模式，各个框从顶部开始水平地排列

37.margin 塌陷

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
。其中，各行内框（inline boxes）一个接一个地排列，其排列顺序根据书写模式（writing-mode）的设置来决定：

对于水平书写模式，各个框从左边开始水平地排列
对于垂直书写模式，各个框从顶部开始水平地排列

37.margin 塌陷

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

[外链图片转存中…(img-7ybNoukm-1715321066856)]

[外链图片转存中…(img-CW6z7fbN-1715321066857)]

[外链图片转存中…(img-xsjTzZfl-1715321066857)]

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

CSS前端经典面试题及解析——小白入门必备

15.说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。

这是我整理的面试题中的一部分，此外还包含HTML、JavaScript、React、Vue、浏览器、服务端与网络、算法等等…

如果你需要这份完整版的面试题+解析，【点击我】就可以了，免费分享给大家。

16.* { box-sizing: border-box; }会产生怎样的效果？

17. display的属性值都有哪些？

18. inline和inline-block有什么区别？

19.relative、fixed、absolute和static四种定位有什么区别？

20.你了解 CSS Flex 和 Grid 吗？

Flex

Flex 项目属性

Grid

21.响应式设计与自适应设计有何不同？

22.你有没有使用过视网膜分辨率的图形？当中使用什么技术？

23.什么情况下，用translate()而不用绝对定位？什么时候，情况相反。

其他答案

24.一边固定宽度一边宽度自适应

25.水平垂直居中的方式

flex

position

position+transform

table-cell

26.display:none、visibile:hidden、opacity:0的区别

27.CSS中link和@import的区别

28.文本超出部分显示省略号

单行

多行

29.利用伪元素画三角

30.已知父级盒子的宽高，子级img宽高未知，想让img铺满父级盒子且图片不能变形

31.iframe的作用

32.过渡与动画的区别是什么

33.什么是外边距合并

34.去除inline-block元素间间距的方法

35.为什么要初始化CSS样式

36.行内格式化上下文 IFC

37.margin 塌陷

最后

37.margin 塌陷

最后

16.`* { box-sizing: border-box; }`会产生怎样的效果？

17. `display`的属性值都有哪些？

18. `inline`和`inline-block`有什么区别？

19.`relative`、`fixed`、`absolute`和`static`四种定位有什么区别？

23.什么情况下，用`translate()`而不用绝对定位？什么时候，情况相反。