CSS面试总结(持续更新中）

最新推荐文章于 2023-07-17 10:55:55 发布

万希&

最新推荐文章于 2023-07-17 10:55:55 发布

阅读量618

点赞数 2

分类专栏：面试文章标签： css 面试 javascript 前端 html5

本文链接：https://blog.youkuaiyun.com/weixin_46015250/article/details/126361870

版权

面试专栏收录该内容

13 篇文章

订阅专栏

CSS

文章目录

- CSS

1.css选择器优先级

优先级由高到底

内联样式(style=“ ”)1000
ID选择器（id=" “）100
伪类（如：hover)10
属性选择器 (如：a[href] {color:red;})10
类选择器（class=” "）10
元素选择器 (p{})1

通用选择器（*）0

!important 规则例外**,会覆盖CSS的任何声明，**与优先级毫无关系.高于所有优先级
在这里插入图片描述

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

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

3.link和@import的区别

同：都是外部引用CSS的方式

异：

局限性：link：除了加载CSS外，还可以定义其他事务（RSS）；@import属于CSS范畴，只能加载CSS。

link支持使用Javascript控制DOM去改变样式；而@import不支持

加载时：link:在页面载入时同时加载;@import需要页面网页完全载入以后加载。

兼容性：link：XHTML标签，无兼容问题；@import在CSS2.1提出的，低版本的浏览器不支持

4. transition和animation的区别

详情点这

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

伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素

a:hover {color: #FF00FF}
p:first-child {color: red}

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素

p::before {content:“第一章：”;}
p::after {content:“Hot!”;}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

6.对requestAnimationframe的理解

在 Web 应用中，实现动画效果的方法比较多，JavaScript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的 API，即 requestAnimationFrame

核心：

告诉浏览器希望执行动画并请求浏览器在下一次重绘之前调用回调函数来更新动画。让页面重绘的频率与这个刷新频率保持同步

用法：

渲染动画：window.requestAnimationFrame(callback); 其中，callback是下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。

取消动画：使用cancelAnimationFrame()来取消执行动画

优势：

CPU节能：当页面被隐藏或最小化时，SetInterval 仍然在后台执行动画任务。RequestAnimationFrame则会暂停渲染。当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
函数节流：RequestAnimationFrame可保证每个刷新间隔内，函数只被执行一次。
减少DOM操作：requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成。

setTimeout缺点：

settimeout的固定时间间隔不一定与屏幕刷新间隔时间相同，会引起丢帧。

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

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

8.两栏布局,三栏布局

篇幅过长，传送门

9.对flex的理解

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效,

它的所有子元素自动成为容器成员,存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水平主轴排列

6个属性设置在容器上：

flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。默认：nowrap
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

6个属性设置在项目：

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

10.BFC

概念：块格式化上下文，BFC是一个独立的布局环境。内部元素不会受外部影响

创建条件：

根元素：body；
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex等；
overflow 值为：hidden、auto、scroll；

特点：

垂直方向上，自上而下排列，和文档流的排列方式一致。
两个容器BFC的margin不会重叠
计算BFC的高度时，需要计算浮动元素的高度
BFC区域不会与浮动的容器发生重叠
BFC是独立的容器，容器内部元素不会影响外部元素
每个元素的左margin值和容器的左border相接触

BFC的作用：

解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

11.position的属性有哪些

absolute：生成绝对定位的元素,相对最近设置position的父元素进行定位

relative:相对定位，基于目前文档流位置进行定位

fixed:生成绝对定位的元素,相对window进行定位

static:默认值，没有定位。正常出现在文档流中

inherit:规定继承父元素的position

absolute与fixed共同点与不同点?

共同点：

改变行内元素的呈现方式，将display置为inline-block
使元素脱离普通文档流，不再占据文档物理空间
覆盖非定位文档元素

不同点：

abuselute与fixed的根元素不同，abuselute的根元素可以设置，fixed根元素是浏览器。
在有滚动条的页面中，absolute会跟着父元素进行移动，fixed固定在页面的具体位置。

12.盒子模型的理解

一个盒子由四个部分组成：content、padding、border、margin

盒子模型分为两种

标准盒子模型

width/height 只是内容高度，不包含 padding 和 border值
怪异盒子模型

width/height 包含了 padding和 border，content值

转化

box-sizing: content-box（标准）
box-sizing: border-box（怪异）