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-growflex-shrinkflex-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的关系?

如果displaynone,那么positionfloat都不起作用,这种情况下元素不产生框

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

否则,如果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道)