web前端面试题第二道—简述盒模型

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端面试题第二道—简述盒模型相关的知识，希望对你有一定的参考价值。

参考技术A W3C组织建议把所有网页上的对象都放在一个盒子（box）中，就是所说的盒子模型，CSS盒模型本质上是一个盒子，封装周围的html元素，它包括：实际内容(content)、填充(padding)、边框(border)，边界(margin)。一个div就是一个盒子。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明与属性：

Content(内容) - 盒子的内容，显示文本和图像。

Padding(内边距) - Padding是盒子中的文字距离盒子边框（border）的距离，内边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Margin(外边距) - margin是盒子距离网页边的距离，外边距是透明的。

最终盒子实际所占位置大小计算公式是这样的：

盒子所占位置的实际宽度=宽度+左填充+右填充+左边框+右边框+左边界+右边界

盒子所占位置的实际高度=高度+顶部填充+底部填充+上边框+下边框+上边界+下边界

要注意区分的是盒子所占位置的实际宽度高度值和盒子实际大小的宽度和高度值，盒子实际大小的宽度和高度是所占位置实际宽度高度的值减去边界（margin）所占的大小，即

盒子的实际宽度=宽度+左填充+右填充+左边框+右边框

盒子的实际高度=高度+顶部填充+底部填充+上边框+下边框

盒子模型的3D示意图，如下图所示，padding与margin是看不见的透明元素

从第一层到第五层依次为：border、content+padding、background-image、background-color、margin。

盒子模型分两种，IE盒子模型和标准的W3C盒子模型。他们对盒子模型的解释各不相同。

W3C标准盒子模型

W3C标准盒子模式包括内容(content)、填充(padding)、边框(border)、边界(margin)

IE盒子模型

从图中可以可以看出IE盒子模型的范围也包括content、padding、border、margin,所不同的是IE盒子模型的content包含了border和padding。那么应该选用哪种模型呢，当然是选用W3C 标准盒模型，就是要在网页的顶部加上DOCTYPE声明，否则各个浏览器会根据自己的行为去理解网页。

例如一个盒子的 margin 为 20px，border 为 1px，padding 为 10px,content 的宽为 200px、高为50px

假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：

宽 20*2+1*2+10*2+200=262px、高20*2+1*2*10*2+50=112px

盒子的实际大小为：宽1*2+10*2+200=222px、高1*2+10*2+50=72px

假如用ie 盒子模型，那么这个盒子需要占据的位置为：

宽 20*2+200=240px、高20*2+50=70px

盒子的实际大小为：宽 200px、高 50px

由于IE浏览器使用自己的非标准模型。IE浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。就是要在网页的顶部加上DOCTYPE声明。

2023年03月 其他-Web前端基础面试题（CSS_42道）

文章目录

前言

CSS 是层叠样式表（Cascading Style Sheets）的简写，它是一种用于定义网页和网页应用程序外观的标准格式语言。

一、 CSS/CSS3/移动端适配

1、css盒子模型，box-sizing属性的理解

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border）元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域。

CSS盒模型：标准模型 + IE模型

  1. 标准模型
div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化
box-sizing:content-box;  /*设置标准盒子*/
  1. 怪异模型|IE模型
div宽度（定死） = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度不会变化
box-sizing:border-box; /*IE模型*/

box-sizing是一个CSS3属性，与盒子模型有着密切联系。即决定元素的宽高如何计算，box-sizing有三个属性：

content-box 使得元素的宽高即为内容区的宽高(默认模式)

border-box: 计算方式content + padding + border = 本身元素大小，即缩小了content大小

inherit 指定 box-sizing 属性的值，应该从父元素继承

2、引入css的方式有几种，分别是什么 ？

（1）内嵌式

通过<style></style>来书写CSS代码。
只能应用于当前网页，不能被其它网页共享。
注意：<style>标记可以放在网页的任何地方，但一般放在<head>。

（2）外联式

通过<link>标记来引入外部的CSS文件(.css)。
可以被其它网页共享。
格式：<link rel="stylesheet" href="style.css" type="text/css">
rel="stylesheet" 被引入文件和当前文件之间的关系是引入了外部样式表
href=“” css文件的路径
注意：<link>标记只能放在<head>中

（3）行内样式

通过style的属性来书写CSS代码。写在标签的开始标签里
在开始的标签里写style=“ ”  <div style="width:100px;height:100px;"></div>
什么时候使用：只有这么一个标签需要这个样式的时候

3、px、em、rem的区别？

1、px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。

2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。

4、区别：IE无法调用那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器已支持rem。

4、怪异盒模型box-sizing？弹性盒模型|盒布局?

在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。

5、:before 和 ::before 区别?

  1. 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
  2. ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after。

6、display的block、inline和inline-block的区别？

（1）block： 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；

（2）inline： 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；

（3）inline-block： 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

对于行内元素和块级元素，其特点如下：

（1）行内元素

设置宽高无效；

可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；

不会自动换行；

（2）块级元素

可以设置宽高；

设置margin和padding都有效；

可以自动换行；

多个块状，默认排列从上到下。

7、隐藏元素的方法有哪些？

display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。

visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。

opacity: 0：将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。

position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。

transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

8、图片间隙问题如何解决

两个图片之间和图片下方多出的空白间隙可以使用以下方式解决。

方法 1：将图片显示为块：解决下方间隙

img
display:block;

方法 2：改变图片的 vertical-align :解决下方间隙

img
vertical-align:middle;

除了 middle值，还可以设置为 top  / bottom / middle

方法 3：设置图片父级标签的 font-size:0;line-height:0; 水平间隙，图片下方间隙都能解决

这个办法不仅可以解决图片下面的小空白，也能解决图片与图片之间的小空白
缺点是让父元素里的文字的字号和行高都变成了0，文字看不见了，需要重新定义文字的字号和行高
.imgwrap
 font-size:0;
 line-height:0;

9、项目中你是如何做图片优化的？

（1)、降低图片的大小、选择适当的图片宽度尺寸，压缩图片，选择更小kb的图片格式，以达到最优的显示效果。

（2)、考虑CSS Sprites(背景精灵图/雪碧图)，将同类型的图标或按钮等背景图合到一张大图中，减少HTTP的网络资源请求 。

（3)、Icon Font，将图标做成字体文件。优点是图标支持多个尺寸，兼容所有浏览器，减少页面请求等。

10、简述rem布局原理

rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。

比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。

rem布局实现步骤 ：

（1）设置页面的viewport 动态计算并设置html的fontsize值

（2）按照pc端布局方式正常布局，把px单位换算成rem（较小的长度比如1px的边框就不需要转换成rem,直接设置px

11、解释下浮动和它的工作原理？清除浮动有哪些方式？

浮动为该元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

浮动引起的问题：

父元素的高度无法被撑开，影响与父元素同级的元素

与浮动元素同级的非浮动元素（内联元素）会紧跟其后

若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清除浮动的方法：

（1）、父级div定义height。

（2）、结尾处加空div标签clear:both。

（3）、父级div定义伪类:after和zoom。

（4）、父级div定义overflow:hidden。

（5）、父级div定义overflow:auto。

（6）、父级div也浮动，需要定义宽度。

（7）、父级div定义display:table。

（8）、结尾处加br标签clear:both

12、什么是 BFC？

BFC 也就是常说的块格式化上下文，这是一个独立的渲染区域，规定了内部如何布局，并且这个区域的子元素不会影响到外面的元素，其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算，触发 BFC 的规则有根元素，浮动元素，position 为 absolute 或 fixed 的元素，display 为 inline-block，table-cell，table-caption，flex，inline-flex，overflow 不为 visible 的元素

13、对 CSS 的新属性有了解过的吗？

CSS3 的新特性中，在布局方面新增了 flex 布局，在选择器方面新增了例如

first-of-type,nth-child 等选择器，在盒模型方面添加了 box-sizing 来改变盒模型，在动画

方面增加了 animation，2d 变换，3d 变换等，在颜色方面添加透明，rbga 等，在字体方

面允许嵌入字体和设置字体阴影，最后还有媒体查讯等

14、讲一讲 CSS 的权重和优先级？

权重

从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0

优先级

权重相同，写在后面的覆盖前面的

使用 !important 达到最大优先级，都使用 !important 时，权重大的优先级高

15、介绍 Flex 布局，flex 是什么属性的缩写？

flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

  • 弹性盒布局，CSS3 的新属性，用于方便布局，比如垂直居中
  • flex属性是 flex-grow、flex-shrink 和 flex-basis 的简写

16、说一说你知道的position属性，都有啥特点？

static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。

relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

sticky：具体是类似 relative 和 fixed，在 viewport 视口滚动到阈值之前应用 relative，滚动到阈值之后应用 fixed 布局，由 top 决定。

17、在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

18、margin和padding分别适合什么场景使用？

何时使用margin：

  1. 需要在border外侧添加空白
  2. 空白处不需要背景色
  3. 上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

  1. 需要在border内侧添加空白
  2. 空白处需要背景颜色
  3. 上下相连的两个盒子的空白，希望为两者之和。

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

19、CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。

20、对line-height是如何理解的？

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

21、元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

22、transition和animation的区别是什么？

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

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

23、rgba()和opacity的透明效果有什么不同？

rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，

而 rgba() 只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

24、css sprite是什么,有什么优缺点？

  • 概念：将多个小图片拼接到一个图片中。通过background-position和元素尺寸调节需要显示的背景图案。

  • 优点：

    减少HTTP请求数，极大地提高页面加载速度

    增加图片信息重复度，提高压缩比，减少图片大小

    更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

  • 缺点：

    图片合并麻烦

    维护麻烦，修改一个图片可能需要从新布局整个图片，样式

25、display,float,position的关系？

如果display为none，那么position和float都不起作用，这种情况下元素不产生框

否则，如果position值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。

否则，如果float不是none，框是浮动的，display根据下表进行调整

否则，如果元素是根元素，display根据下表进行调整

其他情况下display的值为指定值

总结起来：绝对定位、浮动、根元素都需要调整display

26、css中link与@import的区别？

1、@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2、加载页面时，link引入的CSS被同时加载，@import引入的CSS将在页面加载完毕后加载。

3、link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，故老版本浏览器（IE5之前）不能识别。

4、可以通过JS操作DOM，来插入link标签改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式。

27、CSS3新特性有哪些？

1、颜色：新增RGBA、HSLA模式

2、文字阴影(text-shadow)

3、边框：圆角（border-radius）边框阴影：box-shadow

4、盒子模型：box-sizing

5、背景：background-size设置背景图片的尺寸，background-origin设置背景图片的原点，background-clip设置背景图片的裁剪区域，以“，”分隔可以设置多背景，用于自适应布局

6、渐变：linear-gradient、radial-gradient

7、过渡：transition可实现动画

8、自定义动画

9、在CSS3中唯一引入的伪元素是::selection

10、多媒体查询、多栏布局

11、border-image

12、2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)

13、3D转换

28、display:none;与visibility:hidden的区别是什么？

display:none;使用该属性后，HTML元素（对象）的宽高，高度等各种属性值都将“丢失”；

visibility:hidden;使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍然具有高度，宽度等属性值。

29、画一条0.5px的直线？

height: 1px;
transform: scale(0.5);

30、html元素的id跟class什么区别

id和class是网页中两个通用属性，他们协同工作使整个页面丰富多彩，当我们为一个元素定义样式时，二者都可用，但有区别？

1、在css样式表中书写时，id选择符前缀应加"#“，class选择符前缀应加”."

2、id属性在一个页面中书写时只能使用一次，而class可以反复使用

3、id作为元素标签用于区分不同结构和内容，而class作为一个样式，可以应用到任何结构和内容当中去

4、布局上的一般原则：id先确定结构和内容再为它定义样式。而class正好相反，是先定义样式，然后在页面中根据不同需求把样式应用到不同结构和内容上

5、目前浏览器都允许同一个页面出现多个相同属性值的id，一般情况能正常显示，不过当javascript通过id来控制元素时就会出错

6、在实际应用中，class常被用到文字版块和页面修饰上，而id多被用在宏伟布局和设计包含块，或包含框的样式。

31、什么是响应式设计，响应式设计的基本原理是什么

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

32、什么是外边距重叠？重叠的结果是什么？

外边距重叠就是 margin- collapse在CSS中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式称为折叠，因此而结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则。

（1）当两个相邻的外边距都是正数时，折叠的结果是它们两者中较大的值

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

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

33、CSS属性content有什么作用？有什么应用？

content属性与::before及::after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器，为页面元素插入编号。

34、CSS优先级如何排序？

优先级如下:

！important>style（内联）>ld（权重100）> class（权重10）>标签（权重1）。同类别的样式中，后面的会覆盖前面的。

35、nth-of-type和nth-child的区别

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型

36、有什么方式可以对一个DOM设置它的CSS？

外链式，即通过link标签引入一个外部CSS文件中。

内嵌式，即将CSS代码写在 style标签内。

行内式，即将CSS代码写在元素的 style属性中。

37、CSS中，自适应的单位都有哪些？

自适应的单位有以下几个

百分比：%

相对于视口宽度的单位：ww

相对于视口高度的单位：vh

相对于视口宽度或者高度（取决于哪个小）的单位：Vm

相对于父元素字体大小的单位：em

相对于根元素字体大小的单位：rem

38、为什么css放在顶部而js写在后面？

1.浏览器预先加载css后，可以不必等待HTML加载完毕就可以渲染页面了
2.其实HTML渲染并不会等到完全加载完在渲染页面，而是一边解析DOM一边渲染。
3.js写在尾部，主要是因为js主要扮演事件处理的功能，一方面很多操作是在页面渲染后才执行的。另一方面可以节省加载时间，使页面能够更加的加载，提高用户的良好体验

但是随着JS技术的发展，JS也开始承担页面渲染的工作。比如我们的UI其实可以分被对待，把渲染页面的js放在前面，时间处理的js放在后面。

39、z-index属性在什么情况下会失效

通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。

z-index属性在下列情况下会失效：

父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；

元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；

元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

40、Flex 布局父级容器属性和子级项目属性有哪些？

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

flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content属性定义了项目在主轴上的对齐方式。

align-items属性定义项目在交叉轴上如何对齐。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下6个属性设置在项目上：

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

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

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

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

41、flex 布局中 align-content 与 align-items 有何区别？

align-content 作用于纵轴多行元素，一行元素不起作用

align-items作用于纵轴单行元素

42、 ‘+’ 与 ‘~’ 选择器有什么不同？

+ 选择器匹配紧邻的兄弟元素

~ 选择器匹配随后的所有兄弟元素

以上是关于web前端面试题第二道—简述盒模型的主要内容，如果未能解决你的问题，请参考以下文章

Web前端面试题-1

IMWEB 前端面试题汇总

2023年03月 其他-Web前端基础面试题（CSS_42道）

前端面试题总结

前端面试题及答案，理论知识

Web前端面试题第六道—链接标记target与Dom，Bom