Web前端开发面试之CSS篇

最新推荐文章于 2023-06-06 09:17:52 发布

_Tough_Girl

最新推荐文章于 2023-06-06 09:17:52 发布

阅读量380

点赞数

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

本文链接：https://blog.csdn.net/icemwj/article/details/119874918

版权

前端笔试面试专栏收录该内容

6 篇文章 4 订阅

订阅专栏

1、说一下CSS盒模型（介绍一下盒模型）

简介： CSS 盒模型就是用来装页面上的元素的矩形区域。CSS 中的盒子模型包括 IE盒子模型 和标准的W3C盒子模型。

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：外边距（margin），边框（border），填充（padding），和实际内容（content）。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

标准的 W3C 盒子模型和 IE盒子模型的区别如下：

1、标准盒模型中 width 指的是内容区域 content 的宽度；height 指的是内容区域content 的高度。
标准盒模型下盒子的大小 = content + border + padding + margin

标准盒模型：
在这里插入图片描述
2、IE盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border + padding）；height 指的是内容、边框、内边距总的高度。

IE盒模型下盒子的大小 = width（content + border + padding） + margin

IE盒模型（怪异盒模型）：
在这里插入图片描述
不同部分的说明：

margin(外边距) ：清除边框外的区域，外边距是透明的。（margin的长度是允许出现负值的）注意：当以百分比来设置长度时，不管是宽度还是高度，都是按照父元素的宽度百分比计算的（即便是计算上下外边距也是按照父元素的宽度百分比计算的）。
border(边框) ：围绕在内边距和内容外的边框。
padding(内边距) ：清除内容周围的区域，内边距是透明的。（padding的长度是不允许出现负值的）和 margin一样，当以百分比来设置长度时，不管是宽度还是高度，都是按照父元素的宽度百分比计算的。
content(内容) ：盒子的内容，显示文本和图像。

设置盒子模型：
语法：

box-sizing: content-box|border-box|inherit:

值	说明
content-box	默认值。表示标准的盒子模型。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框
border-box	表示的是IE盒子模型。为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。大多数情况下，这使得我们更容易地设定一个元素的宽高。注：border-box 不包含 margin。
inherit	指定 box-sizing 属性的值，应该从父元素继承

2、设置一个元素的背景颜色，背景颜色会填充哪些区域？

background-color 设置的背景颜色会填充元素的 content、padding、border 区域。

3、如果想要改变一个DOM元素的字体颜色，不在它本身上进行操作？

可以更改父元素的 color 。

4、对CSS的新属性有了解过的吗？（ CSS3新特性）

CSS3 的新特性：

在布局方面新增了 flex 布局；
在选择器方面新增了例如 first-of-type，nth-child 等选择器；
在盒模型方面添加了 box-sizing 来改变盒模型；
在动画方面增加了 animation，2d变换，3d变换等；
在颜色方面添加透明，rbga 等；
在字体方面允许嵌入字体和设置字体阴影；
最后还有媒体查讯等。

更多CSS3新属性见这里： CSS3新增的属性

5、CSS选择器有哪些，优先级呢 css的常用选择器

CSS选择器：
id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等。

优先级：

同一元素引用了多个样式时，排在后面的样式属性的优先级高；
样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器；
标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低，至少比标签选择器的优先级低；
带有 !important 标记的样式属性的优先级最高；
样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

6、link 标签和 import 标签的区别

页面中使用 CSS 的方式主要有3种：行内添加定义 style 属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：link 和 @import。外部引用 CSS 两种方式 link 和 @import 的方式分别是：

（1）HTML中使用 link 标签

<link rel="stylesheet" href="style.css" />

（2）CSS 中 @import

@import "style.css";
@import url("style.css");
/* 两种方式无差别 */

两者的区别有：

区别1： link 属于 html 标签，除了加载CSS外，还可以定义RSS等其他事务；而 @import 是 CSS 提供的，只能加载CSS。

区别2： 页面被加载时，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面网页完全载入以后加载。

区别3： link 是 html 标签，因此没有兼容性问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持，只有 IE5 以上才能识别。

区别4： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

区别5： link 方式样式的权重高于 @import 的。

7、line-height 和 height 的区别

line-height （行高）一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的。
height 一般是指容器的整体高度。

8、block、inline、inline-block的区别，为什么 img 是inline 还可以设置宽高

（1）block（块级元素）

block 元素会独占一行，多个 block 元素会各自新起一行。默认情况下，block 元素的宽度自动填满其父元素宽度。
block 元素可以设置 width，height属性，块级元素即使设置了宽度，仍然是独占一行。
block 元素可以设置 margin 和 padding 属性。
常见的块级元素有：body from select textarea h1-h6 html table hr p ol ul
dl div

（2） inline（行内元素）

inline 元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline 元素设置width，height属性无效。
inline元素的 margin 和 padding 属性，在垂直方向都会失效。即水平方向的padding-left， padding-right，margin-left，margin-right 都产生边距效果；但竖直方向的 padding-top，padding-bottom，margin-top， margin-bottom 不会产生边距效果。
常见的行内元素有：meat title lable span br a style em b i strong

（3）inline-block（行内块元素）

能设置宽度高度，margin/padding水平垂直方向都有效，前后无换行符。
inline-block 简单来说，就是将对象呈现为 inline 对象，但是对象的内容作为 block 对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有 block的宽度高度特性又具有 inline 的同行特性。
常见的行内块元素常见的有： img input td

9、CSS 中 display 的取值有哪些

（1）display: none; 此元素不会被显示。

（2）display: block; 此元素将显示为块级元素，此元素前后会带有换行符。

（3）display: inline; 默认。此元素会被显示为内联元素，元素前后没有换行符。

（4）display: inline-block; 此元素将显示为行内块元素。CSS2.1 新增的值。

（5）display: flex; 弹性布局。

（6）display: table; 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

（7）display: table-cell; 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）。

10、display：table 和本身的 table 有什么区别

display:table 和本身 table 是相对应的，区别在于：

display：table 的 css 声明能够让一个 html 元素和它的子节点像 table 元素一样，使用基于表格的 css 布局，是我们能够轻松定义一个单元格的边界，背景等样式，而不会产生因为使用了 table 那样的制表标签导致的语义化问题。
之所以现在逐渐淘汰了 table 系表格元素，是因为用 div+css 编写出来的文件比用 table 编写出来的文件小，而且 table 必须在页面完全加载后才显示，div 则是逐行显示，table 的嵌套性太多，没有 div 简洁。

11、怎么样让一个元素消失，讲讲（隐藏页面中某个元素的方法）（怎么隐藏一个元素）

（1）opacity：0

opacity:0 只是透明度为100%，元素隐藏，依然占据空间，不会改变页面布局。
opacity:0 会被子元素继承，且子元素无法反隐藏。
opacity:0 的元素依然能触发已经绑定的事件，如 click 事件，那么点击该区域，也能触发点击事件的。
transition有效，能实现动画效果。

（2） visibility：hidden

元素会被隐藏，但是不会消失，依然占据空间。
visibility: hidden 会被子类继承，子类想要显示，通过显示的设置visibility: visible;即可。
visibility: hidden;不会触发该元素已经绑定的事件。
visibility: hidden;动态修改此属性会引起重绘。
transition 无效。(会延迟n秒后hidden，但不会渐变)
这个属性也能够实现动画效果，只要它的初始和结束状态不一样。

（3）display：none

会改变页面布局，可以理解成在页面中把该元素删除掉。
给它和它的子元素添加的任何动画效果和交互效果都会不起作用。
不占据空间，不响应事件，所以动态改变此属性时会引起重排。

（4） position: absolute
将元素移出可视区域，这个办法既不会影响布局，又让元素保持可以操作。

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

（5）z-index: -1 涂层遮盖

在元素当前 DOM 脱离文档流(position:absolute)的前提下，设置 z-index 才起作用。
设置z-index：-1本质是改变当前 DOM 的层叠上下文，使其置于其他元素之下，达到被隐藏的目的。
部分重排，不影响其他图层布局
被其他元素遮挡部分，无法响应事件，即使上层元素设置了pointer-events:none;也无法点击到(注：这个属性会被继承的)。

12、z-index的定位方法

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)。

z-index 属性：设置元素的堆叠顺序，拥有更高堆叠顺序的元素会处于较低顺序元素之前。
z-index 可以为负，且 z-index 只能在定位元素上奏效，该属性设置一个定位元素沿 z 轴的位置，如果为正数，离用户越近，为负数，离用户越远。
它的属性值有：
- auto：默认，堆叠顺序与父元素相等。
- number：设置元素的堆叠顺序。
- inherit：规定应该从父元素继承 z-index 属性的值。
如果属性值相同，则按照书写顺序，后来居上。

13、两个嵌套的div，position都是absolute，子div设置top属性，那么这个top是相对于父元素的哪个位置定位的。

margin 的外边缘。

14、双边距重叠问题（外边距折叠）

多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin 会重叠，折叠的结果为：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

15、垂直居中的方法（如何实现元素的垂直居中）（如何实现图片在某个容器中居中的？）

（1）设置父元素为相对定位，给子元素设置绝对定位，定位为上下左右为0，margin：auto; 可以实现脱离文档流的居中。

html:
<div class="father">
    我是父亲
    <div class="son">我是儿子</div>
</div>

css:
.father {
    width: 500px;
    height: 400px;
    border: 2px solid #000;
    background-color: skyblue;
    position: relative;
}

.son {
    width: 150px;
    height: 100px;
    background-color: royalblue;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

（2）设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: -元素宽度的一半px; margin-top: -元素高度的一半px;

html:
<div class="father">
    我是父亲
    <div class="son">我是儿子</div>
</div>

css:
.father {
    width: 500px;
    height: 400px;
    border: 2px solid #000;
    background-color: skyblue;
    position: relative;
}

.son {
    width: 150px;
    height: 100px;
    background-color: royalblue;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;   /* height的一半 */
    margin-left: -75px;   /* width的一半 */
}

（3）利用 CSS3 属性 transform 实现，设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%;transform: translate(-50%,-50%);即可。

html:
<div class="father">
    我是父亲
    <div class="son">我是儿子</div>
</div>

css:
.father {
    width: 500px;
    height: 400px;
    border: 2px solid #000;
    background-color: skyblue;
    position: relative;
}

.son {
    width: 150px;
    height: 100px;
    background-color: royalblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

（4）使用 flex 布局实现。设置父元素为 flex 定位，justify-content: center; align-items: center;

html:
<div class="father">
    <div class="son">我是儿子</div>
</div>

css:
.father {
    width: 500px;
    height: 400px;
    border: 2px solid #000;
    background-color: skyblue;
    display: flex;
	/* 水平方向 */
	justify-content: center;
	/* 垂直方向 */
	align-items: center;
}

.son {
    width: 150px;
    height: 100px;
    background-color: royalblue;
}

（5）将父元素设置成 display: table, 子元素设置为单元格 display: table-cell。（不推荐使用）

16、比较 position相关属性（position属性的值有哪些及其区别）（CSS定位）

参考：CSS定位

（1）默认定位 static：

默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者 z-index 声明）。

（2）相对定位 relative：

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素 “相对于” 它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

（3）绝对定位 absolute：

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。

（4）固定定位 fixed：
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。 Fixed定位的元素和其他元素重叠。

（5）粘性定位 sticky：

元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

（6）inherit:

规定应该从父元素继承 position 属性的值。

17、浮动清除清除浮动的方法，能讲讲吗

方法一：使用带 clear 属性的空元素

在浮动元素后使用一个空元素如<div class="clear"></div>，并在 CSS 中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

注意：要求这个新的空标签必须是块级元素。

方法二：使用 CSS 的 overflow 属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

在添加 overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

方法三：给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

方法四：使用邻接元素处理

什么都不做，给浮动元素后面的元素添加 clear 属性。

方法五：使用 CSS 的 :after 伪元素

结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个 clearfix 的 class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

18、transition 和 animation 的区别

animation 和 transition 大部分属性是相同的，他们都是随时间改变元素的属性值，他们的主要区别是 transition 需要触发一个事件才能改变属性，而 animation 不需要触发任何事件的情况下才会随时间改变属性值，并且 transition 为2帧，从 from … to，而 animation 可以一帧一帧的。

19、css动画如何实现

创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现，具体情况参见使用 keyframes 定义动画序列小节部分。
transition 也可实现动画。transition 强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如hover）时才能获取样式，这样就会产生过渡动画。

20、关于 js 动画和 css3 动画的差异性

渲染线程分为 main thread 和 compositor thread，如果 css 动画只改变 transform 和 opacity，这时整个 CSS 动画得以在compositor trhead 完成（而 js 动画则会在 main thread 执行，然后出发 compositor thread 进行下一步操作），特别注意的是如果改变 transform 和 opacity 是不会 layout 或者 paint 的。

区别：

功能涵盖面，js 比 css 大
实现/重构难度不一，CSS3 比 js 更加简单，性能跳优方向固定
对帧速表现不好的低版本浏览器，css3 可以做到自然降级
css 动画有天然事件支持
css3 有兼容性问题

21、css预处理器有什么

CSS预处理器有 sass、less 和 stylus等。

区别有：

（1）基本语法：

LESS 的基本语法和 CSS 差不多，SASS（Sass 依赖 Ruby，安装 SASS 前要安装 Ruby ）和 Stylus
都可以利用缩进代替花括号，并且空格有重要的意义。
SASS 保存为".sass"是缩进格式，保存为".scss"是非缩进格式。SASS 一般使用".scss"扩展名。LESS 的扩展名为".less"，Stylus 的扩展名为".styl" 。

（2）变量：

CSS 预处理器中可以定义变量，并且可以在样式表中使用，变量类型没有限制，这样就可以一定程度上减少 CSS 中无法避免的重复问题。

LESS 变量名必须以 @ 符号开头，变量名和变量值之间以冒号隔开。有个问题是 @ 规则在CSS中算是一种原生的扩展方式，变量名用 @ 开头很可能会和以后 CSS 中的新 @ 规则冲突。
SASS 变量名必须以 $ 开头，变量名和变量值之间以冒号隔开。
Stylus 对变量名没有任何限定，变量名与变量值之间可以用冒号、空格和等号隔开。

（3）变量作用域：
变量都是有作用域的，查找变量的顺序是先在局部定义中查找，如果找不到，则逐级向上查找。

Stylus 和 SASS 行为相同，变量的计算以变量最近一次的定义为准。
Less 以这个变量最后一次的定义的值为准。

参考：详说CSS与预处理器

22、了解重绘和重排吗，知道怎么去减少重绘和重排吗，让文档脱离文档流有哪些方法

DOM 的变化影响到了元素的几何属性，比如宽高，浏览器重新计算元素的几何属性，其他元素的几何属性也会受到影响，浏览器需要重新构造渲染树，这个过程称之为重排。浏览器将受到影响的部分重新绘制在页面上的过程称为重绘。

引起重排、重绘的原因有：

添加或者删除可见的 DOM 元素
元素尺寸、位置的改变
内容改变
浏览器页面初始化
浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排

现代浏览器进行了一定的优化，连续改变宽高和left，top等只会引起一次重排，但是读取或者改变以下属性就会引起重排：

offsetTop、offsetLeft、offsetWidth、offsetHeight
clientTop、clientLeft、clientWidth、clientHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
getComputedStyle()（IE中currentStyle）

减少重绘重排的方法有：

不在布局信息改变时做DOM查询
使用 csstext，className 一次性改变属性
使用 fragment
对于多次重排的元素，比如说动画。使用绝对定位脱离文档流，使其不影响其他元素

1.使用 class 一次性改变元素属性

div.className+=" modify";

2.使用display: none;使元素脱离文档流，然后进行操作，最后再回归文档流

let ul = document.querySelector('#mylist');
ul.style.display = 'none';
appendNode(ul, data);
ul.style.display = 'block';

这样做会引起两次重排。

3.使用文档片段创建一个子树，然后再拷贝到文档中

let fragment = document.createDocumentFragment();
appendNode(fragment, data);
ul.appendChild(fragment);

这样做只引起一次重排。

_Tough_Girl

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Web前端开发面试之CSS篇

说一下css盒模型介绍一下盒模型box-sizing的语法和基本用处link标签和import标签的区别transition和animation的区别BFC（块级格式化上下文，用于清楚浮动，防止margin重叠等）垂直居中的方法如何实现元素的垂直居中垂直居中如何实现图片在某个容器中居中的？有一个width300，height300，怎么实现在屏幕上垂直水平居中关于js动画和css3动画的差异性说一下块元素和行元素visibility=hidden, opacity=0
复制链接

扫一扫