CSS面试题

关注

原创 2023-02-11 18:33:20 682 阅读 AI 写同款· GEO 优化 ›

1.CSS3

1.伪类选择器：:link,:visitied,:hover,:checked,:active.....
2.伪元素选择器：::before,::after（创建的元素属于行内元素，伪元素选择器和标签选择器一样，权重为1）
3.选择器：nth-child(n) nth-of-type(n)
4.filter函数：例如：filter: blur(5px)；blur模糊处理，数值越大越模糊
5.calc函数：让在生命css属性时执行一些计算，例如：width: calc( 100% - 80px )
6.过渡和动画
7.阴影：text-shadow,box-shadow

2.元素水平居中的方法

1.弹性盒
	display: flex
	justify-content: center; align-item: center
2.定位
	position: absolute
	top: 0; right: 0; bottom: 0; left: 0; margin: auto
3.margin + 定位
	position: absolute
	left: 50%; top: 50%; margin-top: -50px(元素高的一半)，margin-left: -50px(元素宽的一半)
4.transform: translate + 定位
	position: absolute
	left: 50%; top: 50px; transform: translate( -50%, -50%)

3.盒模型

box-sizing属性的三个值：content-box，border-box，inherit
	content-box: width和height从content算起，不包含border和padding
	border-box: width和height等于border+padding+width/height
	inherit: 指定 box-sizing 属性的值，应该从父元素继承

4.flex

flex-direction: row | row-reverse | column | column-reverse 设置主轴方向
justify-content: flex-start | flex-end | center | space-between | space-around 设置在主轴上的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch 设置在交叉轴上对齐方式
flex-wrap: nowrap | wrap | wrap-reverse 设置是否换行
align-content: flex-start | flex-end | center | space-between | space-around 设置
around: 设置多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
align-self: auto | flex-start | flex-end | center | baseline | stretch 设置单个项目与其他项目不一样的对齐方式
order: 数值越小，排列越靠前，默认为0，定义项目的排列顺序
flex-grow: 默认为0，即如果存在剩余空间，也不放大
flex-shrink: 默认为1，即如果空间不足，该项目缩小

flex-grow: 定义项目的放大比例，即使存在空间，也不会放大
flex-shrink: 定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义个item的flow-shrink为0，则为不缩小
flex-basis：定义了在分配多余的空间，项目占据的空间
flex: 1是 flex-grow和flex-shrink,flex-basis的简写，默认值为0 1 auto

5.如何让一个元素在页面上看不见

1.display：none，这种方式可以使元素彻底从文档中删除
2.visibility：hidden，元素会从页面中消失，它原本占据的空间会被保留
3.opacity：0
4.margin-left：-100%

6.过渡和动画

相同点：都是随着时间改变元素的属性值
不同点：transition需要触发一个事件（hover事件或click事件等）才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值。从而达到任何一种动画效果，css3的animation就需要明确的动画属性值

7.BFC

BFC的目的：形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素
BFC：块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：
	1.内部的盒子会在垂直方向上一个街一个的放置
	2.对于同一个BFC的两个相邻的盒子的margin会发生重叠，与方向无关
	3.每个元素的左外边距与包含块的左边界相接触（从左到右）
	4.BFC的区域不会与float的元素区域重叠
	
触发BFC的条件：
	1.浮动元素：float的值为left，right
	2.overflow的值不为visible，为auto，scroll，hidden
	3.display的值为inline-block等等
	4.position的值为absolute和fixed

8.两栏布局/三栏布局

两栏布局：
	1.利用浮动
		- 将左边元素宽度设置为200px，并且设置向左浮动
		- 将右边元素的margin-left设置为200px，宽度设置为auto
	2.浮动+BFC
		- 利用浮动，左侧元素设置固定大小，并左浮动
		- 右侧元素设置overflow：hidden；这样右侧就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠
	3.利用flex布局
		- 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex：1

三栏布局：
	1.流体布局
		- 左栏左浮动，右栏右浮动
		- 中间margin两边
	2.BFC布局
		- 左右两边浮动
		- 中间用overflow：hidden触发BFC
	3.flex布局
		- 左右两侧固定宽度
		- 中间元素给flex：1
	4.Table布局
		- 先设置外边盒子采用表格布局（display: table）
		- 设置子元素为表格单元格格式（display：table-cell）
		- 左右两栏设置宽度，中间无需设置

9.css画三角形

.sjx {
        width: 0;
        height: 0;
        border-left: 10px solid red;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid transparent;
    }

10.当行/多行文本溢出显示省略号

// 当行文本溢出
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
// 多行文本溢出
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

11.css提高性能的方法

1.内联首屏关键css
2.异步加载css
3.资源压缩
4.合理使用选择器
5.减少使用昂贵的属性
6.不要使用@import

12.生命动画的关键字是什么

@keyframes

13.rem适配怎么实现

常用适配方案
1.rem & vw
2.rem & 媒体查询

14.PC端适配怎么处理

15.移动端适配怎么处理

16.CSS选择器优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

17.双飞翼布局和圣杯布局

18.CSS哪些属性可以继承，哪些不可以继承

可继承：
	1.字体属性：font-family，font-weight，font-size，font-style
	2.文本属性：text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，color
	3.元素可见性：visibility
	4.列表布局：list-style
	5.光标属性：cursor
不可继承：
	1.display
	2.文本属性：vertical-align，text-decoration，text-shadow，white-space，unicode-bidi
	3.盒子模型属性：width，height，margin，border，padding
	4.背景属性：background，background-color，background-image，background-repeat
	5.定位属性：float，clear，position，top，right

19.gird网格布局

在元素上设置display：grid 或 display：inline-grid 来创建一个网格容器
	- display：grid 则该容器是一个块级元素
	- display: inline-grid 则容器元素为行内元素
grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高
grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式
grid-template-areas 属性用来定义区域，一个区域由一个或者多个单元格组成
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。顺序就是由grid-auto-flow决定，默认为行，代表"先行后列"，即先填满第一行，再开始放入第二行
justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下），place-items属性是align-items属性和justify-items属性的合并简写形式
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）

20.CSS3动画有哪些

1.transition 实现渐变动画
	- property:填写需要变化的css属性
	- duration:完成过渡效果需要的时间单位(s或者ms)
	- timing-function:完成效果的速度曲线
	- delay: 动画效果的延迟触发时间
2.transform 转变动画
	常用的功能：
		- translate：位移
		- scale：缩放
		- rotate：旋转
		- skew：倾斜
3.animation 实现自定义动画
	8个属性如下：
		- animation-duration，指定动画完成一个周期所需要时间，单位秒（s）或毫秒（ms），默认是 0
		- animation-timing-function，指定动画计时函数，即动画的速度曲线，默认是 "ease"
		- animation-delay，指定动画延迟时间，即动画何时开始，默认是 0
		- animation-iteration-count，指定动画播放的次数，默认是 1
		- animation-direction 指定动画播放的方向
		- animation-fill-mode，指定动画填充模式。默认是 none
		- animation-play-state，	指定动画播放状态，正在运行或暂停。默认是 running
		- animation-name，指定 @keyframes 动画的名称

21.link和@import的区别

1.link使XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
3.link是XHTML标签，无兼容问题；@import是在css2.1提出的，低版本的浏览器不支持
4.link支持使用JavaScript控制DOM去改变样式，而@import不支持

22.display:none和visibility:hidden的区别

1.display：none不会占据任何空间，visibility：hidden只是内容不可见
2.display：none是非继承属性，visibility：hidden是继承属性

23.伪元素和伪类的区别和作用

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成
伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素
总结： 伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变

24. ::before 和 :after 的双冒号和单冒号有什么区别

冒号(:)属于伪类，双冒号(::)属于伪元素

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

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

26.margin重叠

两个margin产生折叠的必备条件：
1. 必须处于常规文档流的块级盒子，并且处于同一个BFC当中
2. 没有线盒，没有空隙，没有padding和border将他们分割
3. 都处于垂直方向相邻的外边距
marign重叠是指在垂直方向上，相邻的两个元素的margin会发生重叠的原因，一般来说分为以下4种情况；
1. 相邻兄弟元素的margin-bottom和margin-top发生重叠，这时候我们设置一个元素为BFC即可解决
2. 父元素的margin-top和子元素的margin-top发生重叠，他们发生重叠是因为这两个元素是相邻的，通过以下方式解决：
  2.1：为父元素设置padding-top或border-top来分割他们
  2.2：设置父元素为BFC
  2.3：父元素和第一个元素之间添加一个内联元素来进行分割
3. 高度为auto的父元素的margin-bottom和最后一个子元素的margin-bottom发生重叠，他们发生重叠的一个原因是他们是相邻的，另一个原因是父元素的高度是不固定的，可以通过以下方式解决：
  3.1：为父元素设置padding-bottom或border-bottom将他们分开
  3.2：把父元素设置为BFC
  3.3：父元素和最后一个子元素之间添加一个内联元素进行分割
  3.4：为元素设置一个高度，height，max-height或者min-height都可以解决
4. 没有内容的元素，自身的margin-top和margin-bottom发生重叠，可以通过以下方法解决：
  4.1：元素设置padding和border
  4.2：给元素设置一个高度

27.position

1.position: static
	static属性为默认值，没有定位，元素出现在正常的流中，元素设置相对于原本位置的定位，元素并不脱离文档流。
2.position: relative
	相对于自身原本的位置发生改变，不脱离文档流
3.position: absolute
	相对于带有position属性的父级来定位；如果父级都没有position属性，则相对于document来定位（body），脱离文档流
4.position: fixed
	与absolute一样
5.position: sticky
	在屏幕范围内时该元素的位置并不收到定位影响，当该元素的位置将要移出偏移范围时，定位又变成fixed，脱离文档流

28.常见的meta的标签有哪些

1.charset：HTML文档的编码类型
2.keywords：页面关键字
3.description：页面描述
4.viewport：可以控制视口的大小和比例

29.img和srcset属性的作用

srcset属性用于浏览器根据宽，高和像素比来加载响应的图片资源

30.title和h1的区别，b和strong的区别，i和em的区别

title和h1：
- title：显示在网页标题上，h1：显示在网页内容上
- 在seo的角度，title比h1好
b和strong：
- b：只有加粗的样式，没有实际的意义。strong：对标签中的内容起到强调作用
i和em：
- i：只是一个倾斜标签，没有实际意义。em：对标签中的内容起到强调的作用。

31.label的作用是什么？如何使用

label标签是用来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
使用：
	1.用label标签将input标签包裹起来
		<label><input type="checkbox" name="like" value="足球" id="check1">足球</label>
	2.在input标签中定义id，再用label标签将内容包裹起来
		<input type="checkbox" name="like" value="象棋" id="check4"><label for="check4">象棋</label>

32.display的block，inline和inline-block的区别

block：会独占一行，多个元素会另起一行，可以设置width，height，margin和padding属性。
2.inline：元素不会独占一行，设置width，height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin
inline-block：将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内敛对象会被排列在同一行。

32.li与li之间有看不见的空白间隔是什么原因引起的？如何解决

浏览器默认会把display属性为inline或者inline-block元素间的空白字符（空格换行tab）渲染成一个空格。也就是我们上面li元素换行产生的换行符，而它会变成一个空格，当然空格就占用一个字符的宽度。
解决办法：
- li的letter-space设置为normal

33.为什么需要清除浮动?清除浮动的方式？

为了清除使用浮动元素产生的影响
方式：
	1.额外标签法：给谁清除浮动，就在其后添加一个空白标签
	2.父级添加overflow方法：触发BFC，实现清除浮动的结果
	3.使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。
        .clearfix:after{ 正常浏览器，清除浮动
            content: ""; 注意：content:”“；里面尽量不带点
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix{
            *zoom: 1;
        }
    4.使用before和after双伪元素清除浮动
        .clearfix:before, .clearfix:after{
           content: "";
           display: table;
        }
        .clearfix:after{
           clear:both;
        }
        .clearfix{
           *zoom: 1;
        }