2024年【前端三件套——CSS进阶】你真的熟练运用CSS了吗(1)，Web前端校招面试经验汇总

最后

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

给大家分享一些关于HTML的面试题。

p .color{

color:red;

}

*   子代选择器  

    选择器之间用`>`隔开

    

    **作用：** 由嵌套关系，在根据选择器1找到的子代中，找到满足选择器2的标签，设置样式  

    注意点：  

    子代只包括儿子！！！

    

p>.color{

color:red;

}

[]( )1.2 并集选择器

----------------------------------------------------------------------------



选择器之间用`,`隔开



**作用：** 找到选择器1选中的标签和选择器2选中的标签，均设置样式  

注意点：



1.  并集选择器中的选择器可以是基础选择器，也可以是**复合选择器**

2.  代码规范——并集选择器中的每组选择器通常一行写一个，提高代码的可读性

div,

p .color

p{

font-size : 16px;

}

[]( )1.3 交集选择器

----------------------------------------------------------------------------



选择器与选择器之间紧挨着



**作用：** 选中页面中同时满足所有选择器的标签，设置样式



选择器语法：

p.box{

font-style:italic;

}

注意点：  

交集选择器中如果有标签选择器，标签选择器必须写在最前面



[]( )1.4 hover伪类选择器

---------------------------------------------------------------------------------



**作用：** 当鼠标放在元素上时，显示hover伪类设置的样式



**语法：** `选择器:hover{css}`

p:hover{

color:red;

background-color:#f5f5f5;

}

[]( )2\. 背景相关属性

=============================================================================



[]( )2.1 背景颜色

---------------------------------------------------------------------------



**属性名：** `background-color`(可以用emmet语法，输入bgc+Tab)



**属性值：**  

颜色取值：关键字、rgb表示法、rgba表示法、十六进制…



*   关键字就是：red\\blue这些

*   rgb是通过三个数字表示一个颜色`rgb(0,0,0)`

*   rgba除了上面三个数字外，还有第四个数字表示透明程度，取值在0到1之间`rgba(0,0,0,0)`

*   十六进制一般就为#开头加十六进制的数字`#f5f5f5`  

    这些ui设计师会给我们提供好，不需做过多了解如何配色，开发中十六进制和rgba用得比较多



注意点：  

一般在布局中会习惯先给盒子设置背景颜色，便于操作调试



[]( )2.2 背景图片

---------------------------------------------------------------------------



**属性名：** `background-image`(可以用emmet语法，输入bgi+Tab)



**语法：**

background-image: url(“图片路径”)

注意点：



*   url的引号可以省略

*   背景图片是默认在水平和垂直方向平铺，直到盒子能接纳的最大尺寸，盒子是不会被背景图片撑大的



[]( )2.3 背景平铺属性

-----------------------------------------------------------------------------



**属性名：** `background-repeat`(可以用emmet语法，输入bgr+Tab)



**属性值：**



| 取值 | 效果 |

| --- | --- |

| repeat | （默认值）水平垂直方向都平铺 |

| no-repeat | 不平铺 |

| repeat-x | 水平平铺 |

| repeat-y | 垂直平铺 |



默认值效果：  

![在这里插入图片描述](https://img-blog.csdnimg.cn/0cc8d48302444836b07d01e36f92c1a7.png)



[]( )2.4 背景位置

---------------------------------------------------------------------------



**属性名：** `background-position`(可以用emmet语法，输入bgp+Tab)



**属性值：**  

语法格式——  

`background-positon: 水平方向位置 垂直方向位置`  

(最后两项值用空格隔开)



属性值写法(两种)：



1.  方位名词



| . | 左/上 | 中 | 右/下 |

| --- | --- | --- | --- |

| 水平方向 | left | center | right |

| 垂直方向 | top | center | bottom |



一共可以表示九个位置

background-position:center center;

![在这里插入图片描述](https://img-blog.csdnimg.cn/2529deeae2454bbc8f9a967a47247053.png)  

2\. 数字+px（**坐标格式**）  

`原点0.0在左上角，x轴方向水平向右，y轴方向是竖直向下！`



想要把图片放到哪，就把对应想要的位置的左上角坐标填上去就行



注意点：  

上述两种取值可以混用，注意不可颠倒



[]( )2.5 背景相关属性连写

-------------------------------------------------------------------------------



与上期所提的`font`属性一样，背景属性`background`



各属性值之间用空格隔开



**书写顺序：** （推荐，各属性值的顺序是可以调换的）  

`background: color image repeat position`

background: red url(“图片路径”) no-repeat 0 0;

**省略：**  

与font只能省略前俩个style和weight不同，background可以按照需求省略,如只有颜色需求：

 background: blue;

特殊情况：在PC端，若盒子大小与背景图片大小一样，此时可以直接写background：url();



注意点：  

在background连写中，属性名`position`的水平值和垂直值，只有均用方位名词时，可以调换位置  

但建议，直接用默认值进行开发，以免引起不必要的麻烦



> 小tip:  

> 当用div标签 + 背景图片时，**需要设置div的宽高**，因为背景图片是不可以撑开div的



[]( )3\. 元素显示模式

=============================================================================



[]( )3.1 块级元素

---------------------------------------------------------------------------



**显示特点：**



*   独占一行

*   宽度默认是父元素的宽度，高度默认由内容撑开

*   可以设置宽度和高度



**代表标签：**  

`div` 、`p` 、`h系列`、`ul`、`li`、`form`、`dt`…



[]( )3.2 行内元素

---------------------------------------------------------------------------



**显示特点：**



*   一行可以显示多个

*   宽高都默认由内容撑开

*   不可以设置宽高



**代表标签：**  

`a`、`span`、`strong`、`ins`、`em`、`del`…



[]( )3.3 行内块元素

----------------------------------------------------------------------------



**显示特点：**



*   一行可以显示多个

*   可以设置宽高



**代表标签：**  

`input`、`textarea`、`button`、`select`…  



### 最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/54a6b04f29167333b139d2753f60db9f.png)



----------------------------------------



**显示特点：**



*   一行可以显示多个

*   可以设置宽高



**代表标签：**  

`input`、`textarea`、`button`、`select`…  



### 最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/54a6b04f29167333b139d2753f60db9f.png)