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

Posted 微软MVP Eleven

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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、 ‘+’ 与 ‘~’ 选择器有什么不同？

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

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

以上是关于2023年03月 其他-Web前端基础面试题（CSS_42道）的主要内容，如果未能解决你的问题，请参考以下文章

朝夕教育2023年03月 其他-Web前端基础面试题（react专项_35道）

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

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

朝夕教育2023年03月 其他-Web前端基础面试题（VUE专项_58道）

朝夕教育2023年03月 其他-Web前端基础面试题（JS_高级_47道）

朝夕教育2023年03月 其他-Web前端基础面试题（数据结构和算法_8道）