2024年Web前端最新CSS基础，2024年最新常用的面试题目_2024年css最新

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

资料截图 ：

高级前端工程师必备资料包

• line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

一般情况下，行距比字号大7–8像素左右就可以了。

line-height: 24px;

行高测量

行高测量方法行高我们利用最多的一个地方是：可以让单行文本在盒子中垂直居中对齐。

文字的行高等于盒子的高度。 行高 = 上距离 + 内容高度 + 下距离

上距离和下距离总是相等的，因此文字看上去是垂直居中的。

行高与高度的三种关系

• 如果 行高 等 高度 文字会 垂直居中

• 如果行高 大于 高度 文字会 偏下

• 如果行高小于高度 文字会 偏上

/line-height 要设置在font属性下面，否则无效，例如：/

height: 80px;

text-align: center;

font: normal bold 30px “宋体”;

line-height: 80px;

可以使用display:flex;布局方式让文字水平垂直居中

display: flex;

align-items: center; /* 侧轴对齐方式*/

justify-content: center; /* 主轴对齐方式 */

「4. text-indent」

text-indent属性用于设置首行文本的缩进

• 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值。

• 建议使用em作为设置单位。

• 1em 就是一个字的宽度。如果是汉字的段落，1em 就是一个汉字的宽度

p {

/行间距/

line-height: 25px;

/首行缩进2个字 em 1个em 就是1个字的大小/

text-indent: 2em;

}

「5. text-decoration」 文本的装饰

text-decoration,通常我们用于给链接修改装饰效果

| 值 | 描述 |

| :-- | :-- |

| none | 默认。定义标准的文本。取消下划线（最常用） |

| underline | 定义文本下的一条线。下划线 也是我们链接自带的（常用） |

| overline | 定义文本上的一条线。（不用） |

| line-through | 定义穿过文本下的一条线。（不常用） |

「6. CSS外观属性总结」

| 属性 | 表示 | 注意点 |

| :-- | :-- | :-- |

| color | 颜色 | 我们通常用 十六进制 比如 而且是简写形式 #fff |

| line-height | 行高 | 控制行与行之间的距离 |

| text-align | 水平对齐 | 可以设定文字水平的对齐方式 |

| text-indent | 首行缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; |

| text-decoration | 文本修饰 | 记住 添加 下划线 underline 取消下划线 none |

---

标签显示模式(display)

---

标签显示模式是标签以什么方式进行显示。HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素。

标签显示模式转换 display

• 块转行内：display:inline;

• 行内转块：display:block;

• 块、行内元素转换为行内块：display: inline-block;

「1. 块级元素(block-level)」

• 块级元素的特点

• • 独占一行

• 高度，宽度，外边距以及内边距都可以控制。

• 宽度默认是容器(父级宽度)的100%

• 是一个容器及盒子，里面可以放行内或者块级元素

• 注意：只有文字才能组成段落，因此p标签里面不能放块级元素，特别是p不能放div。同理，还有h1~h6，dt,它们都是文字类块级标签，里面不能放其他块级元素。

「2. 行内元素(inline-level)」

• 行内元素的特点

• 1. 相邻行内元素在一行上，一行可以显示多个。

2. 高度、宽度直接设置是无效的。

3. 默认高度就是它本身内容的宽度。

4. 行内元素只能容纳文本或其他行内元素。

注意

• 链接里面不能再放链接

• 特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

「3. 行内块元素(inline-block)」

• 行内块元素的特点

• 1. 和相邻行内元素(行内块)在一行上，但是之间会有空白风险。一行可以显示多个

2. 默认宽度就是它本身内容的宽度。

3. 高度，行高，外边距以及内边距都可以控制。

三种模式总结

| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |

| :-- | :-- | :-- | :-- | :-- |

| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |

| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或则其他行内元素 |

| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 | |

---

CSS背景(background)

---

「1. 背景颜色」

background-color: 颜色值; 默认的值是 transparent 透明的

「2. 背景图片(image)」

语法：

background-image : none | url (url) ;

例如:

background-image: url(images/1.png);

「3. 背景平铺（repeat）」

background-repeat : repeat | no-repeat | repeat-x | repeat-y

| 参数 | 作用 |

| :-- | :-: |

| repeat | 背景图像在纵向和横向上平铺（默认的） |

| no-repeat | 背景图像不平铺 |

| repeat-x | 背景图像在横向上平铺 |

| repeat-y | 背景图像在纵向平铺 |

「4. 背景位置(position)」

background-position : length || length

background-position : position || position

| 参数 | 值 |

| :-- | :-: |

| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |

| position | top | center | bottom | left | center | right 方位名词 |

注意：

• 必须先指定background-image属性

• position 后面是x坐标和y坐标。可以使用方位名词或者 精确单位。

• 如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致

• 如果只指定了一个方位名词，另一个值默认居中对齐。

• 如果position 后面是精确坐标， 那么第一个，肯定是 x 第二个一定是y

• 如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中

• 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

背景简写：

• background：属性的值的书写顺序官方没有强制的标准。为了可读性，建议如下写：

• background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

/* 有背景图片背景颜色可以不用写*/

background: transparent url(image.jpg) repeat-y scroll center top ;

「5. 背景半透明(CSS3)」

background: rgba(0, 0, 0, 0.3);

background: rgba(0, 0, 0, .3);

• 等同于background-color: rgba(0, 0, 0, .3)

• 最后一个参数是alpha 透明度 取值范围 0~1之间

• 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);

• 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

• 低于IE 9的版本不支持

盒子半透明 opacity

• 设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度

opacity: .2;

「6. 背景总结」

| 属性 | 作用 | 值 |

| :-- | :-- | :-- |

| background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB代码 |

| background-image | 背景图片 | url(图片路径) |

| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |

| background-position | 背景位置 | length/position 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法 |

| background-attachment | 背景固定还是滚动 | scroll/fixed |

| 背景简写 | 更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序 |

| 背景透明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 后面必须是 4个值 |

---

CSS三大特性

---

「1. CSS 层叠性」

-概念：

• 所谓层叠性是指多种CSS样式的叠加

• 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

-原则：

• 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。

• 样式不冲突，不会层叠。

「2. CSS 继承性」

-概念：

• 子标签会继承父标签的某些样式，如文本颜色和字号。

• 想要设置一个可继承的属性，只需将它应用于父元素即可。

-注意：

• 恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。

• 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

「3. CSS 优先级(CSS特殊性)」

-概念：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，

• 选择器相同，则执行层叠性

• 选择器不同，就会出现优先级的问题。

-权重计算公式：

| 标签选择器 | 计算权重公式 |

| :-- | :-- |

| 继承或者 * | 0,0,0,0 |

| 每个元素（标签选择器） | 0,0,0,1 |

| 每个类，伪类 | 0,0,1,0 |

| 每个ID | 0,1,0,0 |

| 每个行内样式 style=“” | 1,0,0,0 |

| 每个!important 最重要的 | ∞ 无穷大 |

• 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

• 关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

• div { color: pink !important; }

-权重叠加：

div ul li ------> 0,0,0,3

.nav ul li ------> 0,0,1,2

a:hover -----—> 0,0,1,1

.nav a ------> 0,0,1,1

-继承的权重是0：

• 我们修改样式，一定要看该标签有没有被选中

• 如果选中了，那么以上面的公式来计权重。谁大听谁的。

• 如果没有选中，那么权重是0，因为继承的权重为0.

---

盒子模型

---

css学习三大重点： css 盒子模型 、 浮动 、 定位

网页布局的本质

• 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。

• 最后把网页元素比如文字图片等等，放入盒子里面。

1. 盒子模型(Box Model)

• 盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

• 盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。

• 盒子里面的文字和图片等元素是 内容区域

• 盒子的厚度 我们称为为盒子的边框

• 盒子内容与边框的距离是内边距

• 盒子与盒子之间的距离是外边距

W3c标准盒子模型

标准 w3c 盒子模型的范围包括 margin、border、padding、content

当设置为box-sizing: content-box;时，将采用标准模式解析计算，也是默认模式；

内盒尺寸计算(元素实际大小)

• 宽度：Element Height = content height + padding + border （Height为内容高度）

• 高度：Element Width = content width + padding + border （Width为内容宽度）

• 盒子的实际大小：内容的宽度和高度 + 内边距 + 边框

IE盒子模型

IE 盒子模型的 content 部分包含了 border 和 pading

当设置为box-sizing: border-box时，将采用怪异模式解析计算；

2. 盒子边框(border)

| 属性 | 作用 |

| :-- | :-: |

| border-width | 定义边框粗细，单位是px |

| border-style | 边框的样式 |

| border-color | 边框颜色 |

边框的样式：

• none：没有边框即忽略所有边框的宽度（默认值）

• solid：边框为单实线(最为常用的)

• dashed：边框为虚线

• dotted：边框为点线

边框综合设置

border : border-width || border-style || border-color

border: 1px solid red; 没有顺序要求

盒子边框写法总结表：

很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。

| 上边框 | 下边框 | 左边框 | 右边框 |

| :-- | :-- | :-- | :-- |

| border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |

| border-top-width:宽度; | border- bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |

| border-top-color:颜色; | border- bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |

| border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |

表格的细线边框：

• 通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，

• 但是两个单元格之间的边框会出现重叠，从而使边框变粗

• 通过css属性：table{ border-collapse:collapse; }

• • collapse 单词是合并的意思,border-collapse: collapse;表示相邻边框合并在一起。

2. 内边距(padding)

padding属性用于设置内边距。是指边框与内容之间的距离。

设置

| 属性 | 作用 |

| :-- | :-- |

| padding-left | 左内边距 |

| padding-right | 右内边距 |

| padding-top | 上内边距 |

| padding-bottom | 下内边距 |

padding简写

| 值的个数 | 表达意思 |

| :-- | :-- |

| 1个值 | padding：上下左右内边距; |

| 2个值 | padding: 上下内边距 左右内边距 ； |

| 3个值 | padding：上内边距 左右内边距 下内边距； |

| 4个值 | padding: 上内边距 右内边距 下内边距 左内边距 ； |

当我们给盒子指定padding值之后， 发生了2件事情：

1. 内容和边框 有了距离，添加了内边距。

2. 盒子会变大

解决措施： 通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小。

padding不影响盒子大小情况：