CSS面试题

樱花依旧如初

已于 2023-02-19 16:26:20 修改

阅读量503

点赞数

文章标签： css 前端 html

于 2022-10-22 14:22:29 首次发布

本文链接：https://blog.csdn.net/Daisy_i/article/details/127461370

版权

1.什么是BFC?如何实现？

BFC是什么

BFC(Block Format Context)块级格式化上下文。形成一块独立的渲染区域，避免内部元素影响到外部

形成BFC的条件

浮动元素，float除了none以外的值
决定定位元素 position: absolute || fixed ;
display 以下值之一 inline-block,table-cell,table-caption,flex
overflow除了visible以外的值(hidden,auto,scroll)
body 根标签

BFC的特性

bfc的区域不会跟float的元素区域重叠
计算bfc高度时，浮动元素也参与计算

实现一个BFC

这是最开始的样子
在这里插入图片描述

<!-- /* css */ -->
<style>
.box{
   background-color: #999;
}
.box img{
   width: 200px;
   height: 200px;
   float: left; 
}
</style>


<!-- html -->
<div class="box">
   <img src="./img/QQ图片20220314192030.jpg" alt="">
   <p>文字文字文字</p>
</div>
<div>不要影响我</div>

因为给图片设置了float属性img脱离了标准文档流，父元素没了图片的支撑，高度就只剩下p标签文字的高度，这个时候img就会影响到后续的元素
在这里插入图片描述

这个时候只需要他的父元素也就是.box加上overflow: hidden;给设置成BFC 形成一块独立的渲染区域

<!-- /* css */ -->
<style>
.box{
   background-color: #999;
   overflow: hidden;
   /* display:inline-block; */
   /* position: absolute */
      /* 形成BFC的条件 */
   /* 浮动元素，float除了none以外的值
   决定定位元素 position: absolute || fixed ;
   display 以下值之一 inline-block,table-cell,table-caption,flex
   overflow除了visible以外的值(hidden,auto,scroll) */
}
.box img{
   width: 200px;
   height: 200px;
   float: left; 
}
</style>


<!-- html -->
<div class="box">
   <img src="./img/QQ图片20220314192030.jpg" alt="">
   <p>文字文字文字</p>
</div>
<div style="background-color: #666;">不要影响我</div>

在这里插入图片描述

此时的box已经是和img一样高了，也没有影响到后续的元素渲染

2.如何给一个盒子垂直和水平都居中显示

方法一设置定位上下左右都为0，再设置margin:auto;

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

方法二设置定位上50% 左50% 再设置transform:translate(-50%,-50%);

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

方法三使用弹性盒子

display: flex;
align-items: center;
justify-content: center;

3. CSS选择器及其优先级

常用的有：

id选择器 #id
类选择器 .classname
属性选择器 a[name="name"]
伪类选择器 :last-child
标签选择器 div
相邻兄弟选择器 h1 + p
子选择器 ui > li
后代选择器 li a
通配选择器 *

权重值:

标签选择器、伪元素选择器：1
类选择器、伪类选择器、属性选择器：10
id 选择器：100
内联样式：1000
!important 为最高权重
对于优先级的级别相同的情况，后面的样式会覆盖前面的样式
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

4.CSS中可继承与不可继承属性有哪些

无继承性的属性：

display 规定元素应该生成的框的类型
text-shadow 文本阴影效果
text-decoration：规定添加到文本的装饰
盒子模型的属性：width、height、margin、border、padding
背景属性：background、background-color
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

可以继承的：

font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格

text-align 文本水平对齐
line-height：行高
color：文本颜色
text-indent：文本缩进

5.display的属性值及其作用

none 元素不显示，并且移除文档流
block 元素以块级显示独占一行 基础父元素的宽度
inline 元素以行显示，不会换行 不可设置宽高 可以设置左右边距
inline-block 默认宽度为内容宽度，可以设置宽高 不会换行
flex 弹性盒子 它能够扩展和收缩 `flex` 容器内的元素
table 作为块级表格显示
inherit 继承父属性的display属性的值

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

block: 独占一行，可以设置宽高边距
inline: 元素不占一行从左到右显示不可以设置宽高只能设置左右边距
inline-block: inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性

7.隐藏元素的方法有哪些

display: none： 渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility: hidden： 元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity: 0： 将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件
position: absolute： 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
clip/clip-path ： 使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件

8.transition和animation的区别

transition是过度属性 需要主动去触发这个过渡，含义呢就是一个开始关键帧到结束关键帧中间发生的动画(缩放、旋转等)，类似于剪辑中打点关键帧
animation是动画属性 它的实现不需要触发事件，设定好时间之后自己就会执行，使用keyframes定义动画可以设置多个关键帧，再使用animation:动画名执行时间 ;捆绑到元素中

9. link和@import的区别

两种都是外部引用 CSS 的方式区别就是：
原理不同:
link属于html标签还可以做别的事情例如引入网站图标
@import是css中的语法规则，需要写在css区域里例如style标签内

加载顺序不同:
link引用CSS时，在页面载入时同时加载
@import需要页面网页完全载入以后加载

兼容性不同:
link标签任何浏览器都能识别
@import是css2.1提出的，低版本的浏览器无法识别

10.PNG、GIF与JPG的区别有哪些？

JPG: JPG是图画格式，压缩比高，生成文件体积小
PNG: PNG能够支持压缩不失真透明背景、渐变图像的制作
GIF: GIF有动态GIF和静态两种，优点是体积小，成像清晰，支持透明背景图像
webp 格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持

11.伪元素和伪类的区别和作用？

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成
- 伪元素不可以和多个伪元素进行拼接
- 伪元素只能写在后面
- 伪元素是创建一个不存在DOM里的新对象，并且对这个新对象进行操作

a::before{content:'加在开头';}
a::after{content:'加在结尾';}
p::first-letter {color:red;} /*文本中第一个文字改色*/

input::after:checked{ /*这样是无效的*/
	display:block;
}

伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素
- 伪类可以和伪类多个拼接
- 伪类可以写在选择器的前方或者后方
- 伪类是基于DOM 主要起到修饰作用

input:checked + span {
	background: #f00;
}
input:checked + span:after {
	content: " 我被选中了";
}

12.浏览器渲染原理

一个完整的渲染流程一般都经历如下过程：

HTML被HTML解析器解析成DOM树DOM Tree
CSS则被CSS解析器解析成css树CSSOM Tree
DOM Tree和CSSOM Tree解析完成后，被附加到一起，形成渲染树（Render Tree）
根据渲染树计算每个节点的几何信息生成布局树（Layout Tree）
对布局树进行分层，并生成分层树（Layer Tree）
分层树生成后，渲染引擎会创建绘制列表，进行图片绘制
当图层绘制列表准备好后，主线程会把绘制列表交给合成线程，合成线程将图层划分为图块
然后光栅化线程池中将图块转换成位图
所有图块被转换成位图后，合成线程会生成一个绘制图块命令DrawQuad，然后浏览器进程接收到DrawQuad命令
浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上

构建DOM-计算CSS样式-布局-分层-图层绘制-合成位图-最终渲染

13.为什么有时候⽤translate来改变位置⽽不是定位？

translate是transform属性的一个值。改变transform或者opacity不会触发浏览器的重排或者重绘，只会触发复合，而改变绝对定位会触发重排，进而触发重绘和复合

transform是浏览器为元素创建一个GPU图层，但改变绝对定位会使用到CPU，因此translate更高效，可以缩短平滑动画的绘制时间，translate改变位置时，元素不会脱离文档流，而绝对定位会

重排:

当dom元素改变了几何信息的变化，造成布局发生改变，浏览器需要重新计算元素的几何属性，这个过程叫做重排

重绘:

如果元素只是修改了背景颜色，并没有引起几何位置的变化，所以会直接进入绘制阶段，这个过程就叫做重绘，相比较于重排操作，重绘省去了布局和分层阶段，所以执行效率会被重排要高些

合成:

合成是一种将页面的各个部分分离成层，分别将他们栅格化，然后在合成线程中组合的技术
触发时机和影响范围： GUI渲染线程执行后，将GUI渲染线程生成的渲染列表转为位图，然后再发送绘制图块命令给DrawQuad给浏览器进程，浏览器根据DrawQuad消息生成页面，最终显示
流程： GUI渲染 --> 渲染列表转为位图 --> 发送绘制图块命令 DrawQuad 给浏览器进程 --> 浏览器根据DrawQuad消息生成页面并且显示

注意1:重排一定会引起重绘，而重绘不一定会引起重排，重绘的开销较小，重排的代价较高。在日常开发过程中应该尽量减少重排和重绘操作
注意2:有的css属性会触发重排；有的会触发重绘；还有的只会触发合成

14.常见的触发重排、重绘的属性和方法

引发重排的操作

浏览器窗口大小发生改变——resize事件发生时
元素尺寸或位置发生改变——定位、边距、填充、边框、宽度和高度
元素内容变化（文字数量或图片大小等等）
元素字体大小变化
添加或者删除可见的DOM元素

引起重绘的操作

改变字体颜色
改变背景颜色、背景图片
改变文字阴影

15.行级标签直接出现空白间隔是什么原因

因为标签与标签之间出现了空格 tab 换行等，浏览器会渲染成文本节点
解决方法：

设置浮动float或者设置弹性盒子display:flex;
写标签的时候标签与标签之间贴在一起
在父元素设置font-size:0; 然后再单独设置自身的font-size

16.CSS3中有哪些新特性

新增各种CSS选择器兄弟选择器 h1~p :last-child :first-child
颜色：rgba()
弹性盒子 flex
阴影: box-shadow盒子阴影 text-shadow文字阴影
border-radius圆角
动画 aimation 和过渡 transtion
使用transform可以做到旋转rotate，缩放scale,定位translate,倾斜skew

17.对 CSSSprites (精灵图)的理解

就是将页面用到的图都放到一张大图里面去，然后用css的background-image; background-repeat; background-position这三个属性进行背景图的定位

优点:

减少网页请求图片的次数，从而提高页面的性能
减少图片的字节，把3图片合并成1张图的字节通常小于这3张图片的字节总数

缺点:

图片合并比较麻烦，需要预留足够的空间，防止板块出现不必要的背景
维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片

18.对line-height 的理解及其赋值方式

a{
   font-size:20px;
   line-height:200%;
}

当line-height的值是百分比的时候，继承的是计算之后的结果，也就是20 * 200%=40,是这样计算的，当line-height的是是多少px时，直接继承。当line-height的值是比例的时候，比如说line-height:1.5;,那么它的行高就是14*1.5 = 21px

19.上下margin重合的问题

在重合元素外包裹一层容器，并触发该容器生成一个BFC。

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
<!--下面是css代码-->
 .aside {
    margin-bottom: 100px;  
    width: 100px;
    height: 150px;
    background: #f66;
}
  .main {
     margin-top: 100px;
     height: 200px;
     background: #fcc;
}
  .text{
       /*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
     overflow: hidden;  //此时已经触发了BFC属性。
}

20.CSS优化、提高性能的方法有哪些？

css压缩：将写好的css进行打包压缩，可以减小文件体积。
属性值简写
慎重使用高性能属性：浮动、定位。
尽量减少页面重排、重绘。
用css代替图片比如，可以用css画三角形代替一些箭头图片
避免使用通配规则，如*{}计算次数惊人减少浏览器解析css选择器次数
选择器优化嵌套，尽量避免层级过深。
将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
样式与内容分离：将css代码定义到外部css中。

21.浏览器是怎样解析CSS选择器的？

CSS选择器是从右到左解析的，是因为从右到左的匹配第一步就筛选了不符合条件的最右节点，而从左到右会浪费性能在失败的查找上面
CSS解析完毕后，会跟DOM Tree的内容一起分析建立一颗渲染树最终用来进行绘图，浏览器就会为每个DOM树中的元素根据CSS的解析结果来确定生成怎样的渲染树

22.什么是响应式设计？响应式设计的基本原理是什么?

响应式网站设计是一个网站能够兼容多个端，原理是通过媒体查询检测不同的设备屏幕尺寸做处理，页面头部必须有mate声明的viewport

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

23.::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

一个冒号:是伪类两个冒号是::伪元素
::before是以子元素存在，定义在元素主体内容前面的一个伪元素，不存在DOM当中
:before和 :after 这两个伪元素，是在CSS2.1里新出现的，一开始出现这两个伪元素的时候都是前缀单冒号，在之后的CSS3的规范里被改成了双冒号 ::before

24.怎么实现单行、多行文本溢出隐藏

单行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

多行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

25.说一下弹性盒子

弹性盒子是CSS3的一种新的布局模式，能够更加有效的对一个容器中的子元素进行排列、对齐和空白空间的分配，设置弹性盒子只需要 display:flex;

父元素相关的属性：

flex-direction 主轴方向

row：默认值，表示Flex子项水平方向从左到右进行排列，此时水平方向上轴线为主轴方向
row-reverse：与row相反，水平方向轴线为主轴方向，Flex子项排列为从右向左进行排列
column：表示Flex子项垂直方向上从上到下进行排列，此时垂直方向上轴线为主轴方向
column-reverse：与column相反，垂直方向轴线为主轴方向，Flex子项排列为从下到上进行排列

justify-content 主轴的对齐方式

flex-start：默认值，表示Flex子项与行的起始位置对齐
flex-end：表示flex子项与行的结束位置对齐
center：表示Flex子项与行中间对齐
space-between：表示两端对齐，中间间距相等
space-around：表示间距相等，中间间距是两端间距的二倍

align-items 用于交叉轴的对齐方式

stretch：默认值，当Flex子项未设置高度或者高度值为auto的时候，stretch起作用，将Flex子项的高度
flex-start：表示与侧轴开始位置对齐
flex-end：表示与侧轴结束位置对齐
center：表示侧轴方式上中间对齐
baseline：表示基线对齐，项目的第一行文字的基线对齐

flex-wrap 用于指定Flex子项是否换行

nowrap：默认值，不换行，Flex子项可能会溢出
wrap：换行，溢出的Flex子项会自动放到下一行
wrap-reverse：表示反方向换行

子元素相关属性

align-self align-self属性允许单个项目有与其他项目不一样的对齐方式可覆盖align-items属性

align-self: auto | flex-start | flex-end | center | baseline | stretch;
该属性可取6个值，除了auto，其他都与align-items属性完全一致

26.position 的值有哪些，分别有哪些作用？

absolute 绝对定位 相对于第一个非static的父元素进行定位，没找到就以浏览器左上角为准
fixed 固定定位 相对于浏览器窗口进行定位，元素的位置在屏幕滚动时不会改变
relative 相对定位 相对于原来所在的位置进行偏移，不会脱离文档流
inherit 继承 继承父元素position的值
sticky 粘性定位 粘性定位的元素是依赖于用户的滚动

27.对 sticky 定位的理解

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置

注意点:父元素不能overflow:hidden或者overflow:auto属性

28.如何判断元素是否到达可视区域

只需要判断元素顶部到文档顶部的距离小于浏览器可视高度加上浏览器被卷起的高度

img.offsetTop < window.innerHeight + document.body.scrollTop;
元素顶部距离 < 浏览器可视高度 + 浏览器被卷起的高度

29.z-index属性在什么情况下会失效

元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

30.px、em、rem的区别

px是像素，显示的大小依赖显示器的分辨率。
em相对于父元素的font-sze的比例; 例如: 父元素的font-size:20px;那么1em就是20px
rem相对于html标签的font-size的比例；例如: 根元素的font-size:20px;那么1rem就是20px

31.vw和vh有没有了解过

vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度

vw：相对于视窗的宽度，视窗宽度是100vw；
vh：相对于视窗的高度，视窗高度是100vh；
vmin：vw和vh中的较小值；
vmax：vw和vh中的较大值；

32.margin-top和padding-top的值设置为百分比时是怎么计算的

margin-top的百分比是相对于父级元素的width,而padding-top是自身的width

33.怎么实现一个三角形

这个其实很好理解，平时在给盒子设置边框的时候，都会误认为边框是矩形拼接的，实际上拼接处是以斜角的方式，实现一个三角形只需要将，宽高设为0，只设置边框宽度，然后给一个边框设置颜色，其余边框设置透明色

div {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orange blue red green;
}

34.画一条0.5px的线

采用transform: scale()的方式，该方法用来定义元素的2D 缩放转换：

transform: scale(0.5,0.5);

樱花依旧如初

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS面试题

BFC是什么块级格式化上下文。形成一块独立的渲染区域，避免内部元素影响到外部形成BFC的条件浮动元素，float除了none以外的值决定定位元素display以下值之一,table-cell,,flexoverflow除了visible以外的值body根标签BFC的特性bfc的区域不会跟float的元素区域重叠计算bfc高度时，浮动元素也参与计算实现一个BFC这是最开始的样子
复制链接

扫一扫