前端面试题汇总之CSS篇

最新推荐文章于 2022-08-24 14:10:28 发布

世上情为何物

最新推荐文章于 2022-08-24 14:10:28 发布

阅读量277

点赞数

分类专栏： JavaScript 文章标签： css

本文链接：https://blog.csdn.net/weixin_47303886/article/details/120836805

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、CSS选择器及优先级

选择器	格式	优先级权重
id选择器	#id	100
类选择器	.classname	10
伪类选择器	li:last-child	10
标签选择器	div	1
伪元素选择器	li:after	1
相邻兄弟选择器	h1+p	0
子选择器	ul>li	0
后代选择器	li a	0
通配符选择器	*	0

注意事项：

!impportant声明的样式优先级最高；
如果优先级相同，则以最后出现的样式呈现；
样式表的来源不同时，优先级顺序为：内联样式>内部样式>外部样式

2、CSS中可继承与不可继承的属性有哪些

一、无继承性的属性

display：规定元素应该生成的框的类型
文本属性：

vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向

盒子模型属性：width、height、margin、border、padding
背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
定位属性：float、clear、position、min-width、min-height、max-width、overflow

二、有继承性的属性

字体属性

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

文本系列属性

text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
color：文本颜色
text-transform：控制文本大小写

3、display的属性值及其作用

属性值	作用
none	元素不显示，并且会从文档流中移除
block	块元素类型。可设置宽高，换行显示
inline	行内元素类型。不可设置宽高，同行显示
inline-block	可设置宽高，同行显示
list-item	换行显示，并添加列表标记
table	此元素会作为块级表格来显示
inherit	从父元素继承display属性的值

4、隐藏元素的方法有哪些

display：none：元素不会在页面占据空间
visibility：hidden：元素在页面仍占据空间
opacity：0：设置透明度，元素仍然占据空间
position：absolute：通过绝对定位移除元素
z-index：-1：通过其他元素遮盖该元素
transform：scale（0,0）：将元素缩放为0，来实现元素的隐藏。

5、link和@import的区别

两者都是引用外部css文件的方式，它们的区别如下：

加载顺序：link引用会和页面同时加载，而@import引用等页面完全加载完再加载。
DOM操作：JavaScript控制DOM改变样式，只能使用link标签，@import不支持。
兼容性：link标签无兼容问题，@import只有在IE5以上。

6、transition和animation的区别

transition是过度属性。强调过度，它的实现需要触发一个事件才执行动画。
animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自动执行。

7、伪元素和伪类的区别和作用？

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上不存在文档中。它们只在外部显示可见。

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

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

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

8、盒子模型的理解

CSS3中的盒子模型有以下两种：标准盒子模型、IE盒子模型
在这里插入图片描述

盒子模型都是由四个部分组成，分别是margin、border、padding、content。
标准盒子模型和IE盒子模型的区别：

标准盒子模型的width和height属性的范围只包含了content。
IE盒子模型的width和height属性的范围包含border、padding、content。

可以通过修改元素的box-sizing属性来改变元素的盒子模型：

box-sizeing: content-box表示标准盒模型（默认值）
box-sizeing: border-box表示IE盒模型（怪异盒模型）

9、为什么使用translate来改变位置而不是定位？

translate是transform属性的一个值。改变transform或opacity不会触发浏览器重新布局或重绘，只会触发复合。而改变绝对定位会触发重新布局。transform改变位置时，元素依然会占据其原始空间。

10、li与li之间有空白间隔是什么原因引起的？

浏览器会把inline内联元素间的空白字符渲染成一个空格。通常是一个li放在一行，这导致li换行后产生换行字符，它变成一个空格，占用一个字符的宽度。

解决方案：

（1）将所有li写在同一行。
（2）将ul内的字符尺寸直接设为0，即font-size：0

11、CSS3中有哪些新特性

圆角：border-radius
多列布局：multi-column
文字特效：text-shadow
文字渲染：text-decoration
线性渐变：gradient
旋转：transform

12、对CSSSprites（精灵图）的理解

CSSSprites，将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的background-image、background-repeat、background-position属性的组合进行背景定位。
优点：

减少HTTP请求
减少图片的字节

13、单行、多行文本溢出隐藏

单行文本溢出

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

多行文本溢出

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

14、Sass、Less是什么？为什么要使用它们？

它们都是CSS预处理器，是CSS上的一种抽象层。它们是一种特殊的语法、语言编译成CSS。

为什么要使用它们？

结构清晰，便于扩展。
轻松实现多重继承。

15、对媒体查询的理解？

媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，允许内容的呈现针对⼀个特定范围的输出设备⽽进⾏裁剪，⽽不必改变内容本身，适合web⽹⻚应对不同型号的设备⽽做出对应的响应适配。

<!-- link元素中的CSS媒体查询 --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 
<!-- 样式表中的CSS媒体查询 --> 
<style> 
@media (max-width: 600px) { 
  .facet_sidebar { 
    display: none; 
  } 
}
</style>

简单来说。使用@media查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。

16、如何判断元素是否到达可视区域

window.innerHeight 是浏览器可视区的高度；
document.body.scrollTop || document.documentElement.scrollTop是浏览器滚动过的距离；
imgs.offsetTop是元素顶部距离文档顶部的高度

17、z-index属性在什么情况下会失效

通常z-index的使用是在两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越在最上层。
z-index属性在下列情况下会失效：

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

18、常见的CSS布局单位

常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。

（1）像素px：是页面布局的基础，一个像素表示终端屏幕所能显示的最小的区域。
（2）百分比%：当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化。从而实现响应式的效果。
（3）em和rem：相对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。

（4）vw/vh：vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。

19、如何根据设计稿进行移动端适配？

移动端适配主要有两个维度：

适配不同像素密度：针对不同的像素密度，使用CSS媒体查询，选择不同精度的图片。
适配不同屏幕大小：由于不同的屏幕有着不同的逻辑像素大小。为了适配不同屏幕的大小，应按照比例来还原设计稿的内容。

为了能让页面的尺寸自适应，可以使用rem、em、vw、vh等相对单位。

20、对Flex布局的理解及其使用场景

任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。容器默认存在两根轴：水平的主轴和垂直的交叉轴，默认沿水平主轴排列。

以下6个属性设置在容器上：

flex-direction属性决定主轴的方向
flex-wrap属性定义如何换行
flex-flow属性是前两个的结合
justify-content属性定义了项目在主轴上对齐的方式
align-items属性定义项目在交叉轴上如何对齐。

以下6个属性设置在项目上：

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow属性定义项目的放大比例，默认为0
flex-shrink定义了项目的缩小比例，默认为1
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。
flex属性是flex-grow、flex-shrink、flex-basis的简写
align-self属性允许单个项目与其他项目不一样的对齐方式

21、响应式设计的概念及基本原理

响应式网站设计是一个网站能兼容多个终端，而不是为每一个终端做一个特定的版本。
原理：通过媒体查询根据不同的设备屏幕尺寸做处理。

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

22、为什么需要清除浮动？清除浮动的方式

浮动的定义：容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时内容会溢出到容器外面而影响布局。这种现象被称为浮动。

浮动的工作原理：

浮动元素脱离文档流，不占据空间
浮动元素碰到包含它的边框或者其他浮动元素的边框时停留。

浮动元素引起的问题：

父元素的高度无法被撑开。
与浮动元素同级的非浮动元素会跟随其后。

清除浮动的方式如下：

使用空标签：在需要清除浮动的父元素内部的所有浮动元素后添加一个标签，并定义CSS为clear:both。

        .box1 {
            float: left;
        }
        .box2 {
            float: left;
        }
        .clear {
            clear: both;
        }

    <div class="father">
        <div class="box1">aaa</div>
        <div class="box2">bbb</div>
        <div class="clear"></div>
    </div>

使用overflow属性：给浮动元素的父元素添加overflow:hidden；

        .father {
            border: 1px solid red;
            overflow: hidden;
        }

使用after伪对象清除浮动：

        .father::after,.father::before {
            content: '';
            clear: both;
            display: block;
            visibility: hidden;
        }

23、对BFC的理解，如何创建BFC

Box：CSS布局的基本单位，Box的类型由display决定；

display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

Formatting context：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

最常见的Formatting context有 Block fomatting context (简称BFC)和 Inline formatting context(简称IFC)

BFC：块级格式化上下文，它是指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

创建BFC的条件：

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

BFC的特点：

垂直方向上，自上而下排列，和文档流的排列方式一致。
在BFC中上下相邻的两个容器的margin会重叠。
BFC区域不会与浮动的容器发生重叠
BFC是独立的容器，容器内部元素不会影响外部元素。

BFC的作用：

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

24、什么是margin重叠问题？如何解决？

两个块级元素的上外边距和下外边距可能为合并为一个外边距，其大小会取外边距值大的一个，这种行为就是外边距折叠。重叠只会发生在垂直方向。

解决办法：对于折叠的情况，主要有两种：兄弟之间的重叠和父子之间的重叠

（1）兄弟之间的重叠

底部元素变为行内盒子：display: inline-block
底部元素设置浮动：float
底部元素的position的值为absolute/fixed

（2）父子之间的重叠

父元素加入：overflow: hidden
父元素添加透明边框：border:1px solid transparent
子元素变为行内盒子：display: inline-block
子元素加入浮动属性或定位

25、position的属性有哪些，区别是什么？

属性值	概述
absolute	绝对定位，相对于static定位以外的一个父元素进行定位。
relative	相对定位，相对于其原来位置进行定位
fixed	固定定位，相对于屏幕视口的位置进行定位，元素不会随屏幕滚动而滚动
static	默认值，没有定位，元素出现在正常的文档流中
inherit	继承父元素的position属性值

世上情为何物

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端面试题汇总之CSS篇

1、CSS选择器及优先级选择器格式优先级权重id选择器#id100类选择器.classname10伪类选择器li:last-child10标签选择器div1伪元素选择器li:after1相邻兄弟选择器h1+p0子选择器ul>li0后代选择器li a0通配符选择器*0注意事项：!impportant声明的样式优先级最高；如果优先级相同，则最后出现的样式出现；样式表的来源不同时，优先级
复制链接

扫一扫