最后
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
这么说吧，CSS 里面的选择器的种类，非非非常繁琐！
选择器大概有几十种，快上百了！
本篇博文，只讲 最常用 And 最简单 的几个选择器。
复合选择器
复合选择器，其实就是把上面的基础选择器，进行了组合操作。
通过这个组合，来完成更方便选择元素的一个效果。
后代选择器 && 子选择器
后代选择器：可以通过多个选择器的组合，能够选中 某个元素里面的子元素，孙子元素(后代元素)。
子选择器：通过多个选择器的组合，能够选中某个元素里面的子元素.
并集选择器
并列的写多个选择器。
中间使用逗号来分割。
这里的并集选择器，里面可以写简单的选择器，也可以写复合的选择器。
另外，在上面的案例中，有的朋友可能会有疑问：
我们的并集选择器，明明是针对 ol 的 li 和 ul 的 li，进行设置样式。为什么连理 a标签的内容没有受到影响？
虽然我给理由的是这是两个 子选择器。
但是，真实情况是：有些情况会影响到 li 里面的元素，有些情况不会影响到 。
这都不一定。
这就是 CSS 比较讨厌的地方，它这里面是很多的特殊情况！
比如 把 a 标签 换成 无语义 span 标签。【不要问什么，这就是规定】
另外一方面，有些属性也能影响到 color（颜色），font（字体）…
这种会被子元素继承。
还有很多属性不会被子元素继承。
这一块，一旦展开，相当复杂。【博主把持不住，就不讲了】
不过，我可以提示你们，这个话题是有关 CSS ‘继承’特性。
而且只能硬背。
因为博主是后端的，所以前端不会太深入。
前端的朋友，你就要注意了！这是都是你要背的。（包括下面的内容）
而且 选择器，其实是有优先级（包含这 CSS 的一个“层叠性”）。。。【反正博主是知道有这回事，但不会】
伪类选择器
这个选择器，我就不展开介绍了。
伪类选择器，其实它是属于一些特殊场景的应用。
伪类选择器个数：选择器 + 冒号 + 不同元素的状态+{应用属性}。
比如：链接伪类选择器【不止这一种哦。】
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
link 和 visited 不常用。
hover 和 active 比较常用，我就演示这两个。
===================================================================
格式：font-family: “字体命名”
字体英文和中文都行。
需要注意的是：
设置字体的时候，需要保证，我们设置的字体，对方的机器上存在。
系统自己是默认带了一些字体的，还可能会有一些额外的第三方字体、
如果你想用这个第三方字体，就得确认对方的机器上有。
那么，问题来了：如何确认对方的机器有这个字体呢？
可以通过 HTML中 link 属性来从网络上加载字体文件。
另外，设置字体的时候，我们可以设置多个。
就是说，我们一次可以设置多个字体。
从左往右，如果第一个字体不存在，就使用第二个字体样式，以此类推、
如果第一个字体存在，就使用第一个字体样式。
如果都没有，系统就使用自己默认的字体样式。
格式： font-size: 大小值+单位 px
通过 font-size，就可以去调整 每一个标签里面的字是大，还是小。
格式：font-weight: 值
值：数字范围是100-900，而且只能填 100，200，300，这样的整数。
值，还有一种取值方式，使用单词。
格式：font-style: 样式
它的功能是：使文字倾斜。
实际上，其实更多的是用来 取消文字倾斜。
通过把 样式设置为 normal。
===================================================================
其实我们已经用过，就是color属性。
另外，color的取值方式有很多种，其中第一种就是直接使用单词。
但是，这种方式能够表示的颜色种类比较有限。
我们的颜色，绝不止 红橙黄绿青蓝紫，这几种基础颜色。
这些颜色，还可以详细划分。
color的第二种取值方式：使用 RGB 的方式来表示。
这是我们计算机里表示颜色的一种典型方式。
其实计算机表示颜色的方法有很多种。
其中 RGB 是最常用的方法。
RGB：
R：red
G：green
B：blue’
RGB，被叫做 色光三原色。
使用不同比例的三原色混合，就会构造成各种各样不同的颜色。
在 CSS 里面，给这三个分量分别都使用一个字节来表示。
取值范围 0 - 255，
取0，这三个分量几乎没有。
去255，这个分量全部拉满。
我们通过给 这三个分量 进行不同比例的调配，达成一个不同颜色的效果。
有的人可能会有疑问：你确定这是三原色吗？我们小学美术课，学的三原色是红黄蓝诶。
这里大家要明白：每个创景中的三原色，大部分是不相同的。
美术的三原色，是颜料的三原色。
而我们刚才讲的是：色光三原色。
区别就在于，你把颜料的三原色拉满就是黑色。
把色光三原色拉满，就是 白色。
如果是在分不清某个颜色，你们可以使用取色器。
qq截图，就带有这种功能。
你们可以去唱，当时点击按钮之后，你的鼠标箭头放在哪里，它就显示该区域的 三原色的三个分量是多少。
第三种取色方式
还是使用 rgb，但是 使用的是 16进制的风格；来表示的。
取值范围 00 - ff
另外，这种十六进制的写法，可能会有缩写。
比如：
颜色分量：XXYYZZZ >>XYZ【注意，只有这种叠词形式，才能缩写】
4、 color： rbga(red值，green值，blue值，alpha值)
alpha - 透明度
文本对齐(text-aliign: 对齐位置)，一共有三种风格：靠左，靠右，居中。
分别对应 text-aliign: left;，text-aliign: center;，text-aliign: right;
在 HTML 标签中，能够设置下划线和删除线。
这里也可以通过 CSS 来实现。
在 HTML格式化标签中，其中 del / s 标签 是表示删除线。
ins / u 标签，表示下划线
在实际情况中，遇到要使用 下划线和删除，并不会去使用 HTML 中的标签。更多的是使用 CSS 的 文本装饰 来实现的。
因为像这种下划线和删除线，就是作为一种样式来看待的。
所以，样式基于CSS 来实现更合理。
格式：text-decoration: [值];
常用取值:
underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线. [不常用]
line-through 删除线 [不常用
文本装饰这一块，最常见的用法不是说给元素加上下划线/删除线。
而是把已有的 下划线 / 删除线 给去掉。
典型的就是针对 a 标签，都是希望它没有下划线的。
下面，我们再来演示一下其他的文本装饰属性。
这个其实在 HTML中的p标签讲过了。
text-indent: [值];
单位可以使用 px 或者 em.
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
小拓展：
CSS 中表示尺寸的单位：
1、px【最常用的一个单位：像素】
2、em
em，是一个相对的单位，相当于当前元素的 文字大小。
像 p 标签里面的文字，默认大小是 16px。
1 em => 16px，2 em => 32 px；0.5 em => 8 px
所以，我们就可以通过 em 这种单位，我们就能很好的控制 缩进 几个字。
em 为单位是非常有用的。
有的情况下，页面允许用户来修改字体的大小。
比如：看小说
字太小，看的累。字太大看的更累。
所以，这种情况，一般就允许用户自定义文字的大小。
我们就不应该因为用户修改了字体的大小，而引起 排版，缩进，出现混乱的情况。
因此，我们就会广泛的使用 em 作为单位。
不管用户怎么去设置字体大小，em 始终都是当前一个文字的大小。
这样就会有一个良好的表现。
另外 ，em单位，不光可以用在 text-indent 里面，其它的元素，但凡是设置尺寸，都可以使用 em。
而且，text-indent 还可以取一个负数的值。【反向缩进】
很明显的一个效果，字符都缩进到屏幕外面了。
行高 == 字体大小 + 行间距。
行间距，大家应该都不陌生。
像我们去使用 word 之类，去排版。都会涉及到设置行高。
所以，CSS 里面呢也能设置 行高 和 行间距，但是它不是直接通过 行间距，这个属性来设置的；而是通过 行高，这个属性来设置的。
字体大小 和 行高 能设置，那不就是间接的设置了行间距嘛。
【行高 - 字体大小 == 行间距】
下面我们来通过实例，来看看设置行高的效果。
又或者说：设置行高的意义是什么？
===================================================================
背景颜色
格式：background-color: 【指定颜色】
它的具体用法和 color 几乎是一样的。
1、指定颜色，可以使用英文单词
2、RGB
3、#十六进制数字
4、RGBA
5、transparent：背景透明（应用了父元素的背景，）
就是说，符元素的背景是什么，目前的你背景就是什么。
背景图片
格式：background-image
背景平铺
像平铺这种效果，很少会有人喜欢。
那么，我们该如何取消背景平铺？
就可以通过 设置背景图片的平铺效果（background-repeat）。
背景位置
当我们将平铺效果取消后，页面效果如下所示。
所以，我们就可以通过 background-position 来设置背景图的位置。
背景尺寸
虽然，我们通过 background-position：center; 将其背景图片居中。
但是，显示的效果，依旧不理想。
我们想要达到的效果，是以一张背景图片将“整个页面（整个div框）”铺满（拉伸的效果）。
这时候，我们就可以使用 background-size 来设置背景图片的大小。
background 这一系列属性，对于图片的处理能力，其实是要比 image 来的更厉害。
因此，在实际开发中，也经常会使用 background 来代替 img 标签。
【在上述案例情况中，div 就代替了 img标签，利用 CSS 属性，来实现同样的功能，而且功能更丰富】
===================================================================
在上面的例子中，显示的图片都是 中规中矩的正方形。
四个边角都是很尖锐，这点是不符合现代的设计风格的。
现在我们设计的这些界面，都要求柔和一些，带点圆角的效果。
比如：
在我们的手机 APP上的 logo，一般都是圆角的。【有些手机上，图标甚至是圆的】
CSS 中通过 border-radius: length; 来设置圆角的效果。
length 是内切圆的半径. 数值越大, 弧线越强烈
简单来说，length越大，想保证圆与直角两边相交，圆心就得离直角越远。
那么，弧长也会增加，也就意味着弧度也会增加。
弧长公式：
l = n(圆心角)× π(圆周率)× r(半径)/180=α(圆心角弧度数)× r(半径)
如果我们想要得到一个圆形，也可以通过同样的属性来设置。
首先，我们要先有一个正方形，基于正方形来延伸出圆形。
要想一个正方形变成圆形，只需要边角弧度足够大就行了。
当 border-radius: length；中的length为20px时，很显然离圆形还有很大的差距。
下面，为了方便，我就直接使用 开发者工具，去调整。
呈现最终的一个结果。
我们发现：当我们将length调整到正方形边长的一半时（超过一半，再增加就没有效果了），我们就可以得到一个圆。
也就是说，当 length 为 width / height 元素的一半时，我们就能通过一个正方形获得一个圆形。
另外，除了写具体数字之后，还可以写作50%（这里的50%，就是以宽度为基准），效果是一样的。
圆角矩形类似 胶囊形状。
border-radius，不仅可以针对四个角，同时进行设置、
而且，border-radius 是一个复合写法. 实际上可以针对四个角分别设置.
这也就是 border-radius 的展开写法。
====================================================================================
有两种方式可以打开 Chrome 调试工具
直接按 F12 键
鼠标右键页面 => 检查元素
elements(元素) 查看标签结构
console(控制台) 查看控制台
source(源代码) 查看源码+断点调试
network(网络) 查看前后端交互过程
application(应用程序) 查看浏览器提供的一些扩展功能(本地存储等)
Performance(性能), Memory(内存), Security(安全), Lighthouse(性能测评) 暂时不使用, 先不深究。
【随便打开一个网站，打开开发者工具】
ctrl + 滚轮进行缩放, ctrl + 0 恢复原始大小.
使用 左上角 箭头选中元素
右侧可以查看当前元素的属性, 包括引入的类.
右侧可以修改选中元素的 css 属性. 例如颜色, 可以点击颜色图标, 弹出颜色选择器, 修改颜色.
例如:
字体大小, 可以使用方向键来微调数值.
此处的修改不会影响代码, 刷新就还原了~
如果 CSS 样式写错了, 也会在这里有提示. (黄色感叹号)
其中我们还可以通过 元素标签页，来观察 CSS 每个属性对于页面显示的影响。
【拿刚才的例子来说】
其实，越复杂的程序，呈现出的效果越明显。
自己可以去找一个网页进行样式操作，反正刷新网页之后，改动就会全部消失，
举个例子：我想要 B 站 显示连接都显示下划线。
我们在打开一些别人设计好的网站，你一开打开开发者工具，随便选择一个元素，从这元素的属性，往上翻，就能看到上面其实有很多样式对该元素进行了设置【叠加】。
在我们去理解别人的样式是怎么产生效果的时候，就要注意，这里的每一层叠加都可能会带来效果。
======================================================================
在 CSS 中, HTML 的标签的显示模式有很多.
1、块级元素（独占一行，可以设置宽度和高度）
【div，h1-h6，p，ul，li，table】
2、行内元素（不独占一行，不能设置宽度和高度）
【span，a，em，i…】
3、行内块元素（相当于是一个杂交种：不独占一行，但是能设置高度和宽度）
【input，img…】
以上都是标签的默认的显示模式，也就是说可以通过 CSS 的 display 属性 来修改元素的显示模式 。
比如：
一个元素本来是块级元素， 通过display，把它改成行内元素。
同样，一个元素本来是行内元素， 通过display，把它改成块级元素。
最常见的用法，就是把行内元素给改成块级元素。
display，还有一个特殊的选项：none。
效果：元素不显示，隐藏元素。
===================================================================
盒子模型，其实主要是决定 元素和元素之间的一个对峙关系。
盒子模型，大概描述的是：一个 HTML 的元素，其实是一个矩形。
而且，这个矩形，不是光指矩形就完了，还有这个矩形是由以下几个部分构成的。
这就像盖院子。
你得有一堵墙（边框），来划分自己的土地。
同时呢，这个地方还有其他人，他们的房子就与我们的房子相邻。
但是不会紧贴着，总会留一条缝，或者留一条同道，以供路人行走。
【巷子】
这房子与房子之间的距离，就是我们的外边距。
房子里肯定是有家具（内容）的，家具离 墙额距离就是内边距。
因此，我们就可以通过 CSS 的属性来设置当前的这几个方面的尺寸。
1、外边距 margin
2、内边距 padding
3、边框 border
我们先来看看边框，因为它是最直观的
我给你们一个网站CSS 教程.
这里面有很多对 学习CSS 有帮助的知识。
接着，我们再来看看 内边距（padding）。
padding ： 表示 边框 与 内容之间的距离。
最后，我们再看 看 外边距（margin）
外边距，描述的是 元素 与 元素之间距离。
最后，我们补充 外边距（margin）的一个小细节：
基于 margin 可以实现 一个 元素的水平居中，
注意是 元素的居中，不是文本内容居中！
前面说到
文本的水平居中：text-align: center;
文本的垂直居中：line-height：文本的高度
元素的水平居中，就可以使用 margin。【前提是：块级元素】
其实上面讲得盒子模型中的这些属性，都是针对 块级元素的。
元素的垂直居中，我只能说 margin 不太行。
具体怎么做，后面再说。
===================================================================
弹性布局，主要是安排页面上的元素的 位置 / 排序方式。
前面介绍的属性，大部分都是针对这一个元素本身来设置的。
但是这里还有些元素，是影响到元素和元素之间的。
其中盒子模型中的外边距，就是一部分但是还不够。
&ensp：
弹性布局，就是进一步强化这一点。
默认的网页布局，是从上到下的。（尤其是块级元素独占一行）
实际中的网页不仅仅需要从上到下，也需要从左到右。
所以，我们就可以借助弹性布局，既能完成 水平方向的布局，又能完成垂直方向的布局。
先来看水平方向的布局
再来看垂直方向的布局
flex 布局中的最常见的三种操作：
1、设置为弹性布局 – display: flex 来实现
2、设置水平方向的排序 – justify-content: flex-start/center/flex-end
3、设置垂直方向的排序 – align-items: flex-start/center/flex-end
垂直方向的排序：在flex布局里，一般是一行一行的排序，不太涉及 多行的情况
基于上述内容，就可以实现一些主流的页面布局效果了
===========================================================================
一个页面最典型的布局。
其实很多的页面都是从这个模板延伸出来的。
无非就是“缺胳膊少腿”。【缺 左 / 右 边栏，或者缺页脚】，或者“四肢健全”。
下面我们就来基于 弹性布局，来实现出这样的一个页面布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于弹性布局: 实现典型的页面结构</title>
</head>
<body>
<style>
*{
/* 外边距设置为 0 */
margin: 0;
/* 内边距设置为 0 */
padding: 0;
/* 盒子模型，保证不影响页面排版 */
box-sizing: border-box;
}
.navigation{
/* 宽度设置页面的宽度 */
width: 100%;
/* 高度一般为50px */
height: 50px;
/* 当行背景，取自本题图片城市 */
background-image: url(城市.jpg);
/* 字体颜色 白色 */
color: white;
/* 文本居中 */
text-align: center;
/* 文本垂直居中 */
line-height: 50px;
/* 字体大小：20像素 */
font-size: 20px;
/* 字体样式：楷体 */
font-family: "楷体";
### 更多面试题
**《350页前端校招面试题精编解析大全》**内容大纲主要包括 **HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等**
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于弹性布局: 实现典型的页面结构</title>
</head>
<body>
<style>
*{
/* 外边距设置为 0 */
margin: 0;
/* 内边距设置为 0 */
padding: 0;
/* 盒子模型，保证不影响页面排版 */
box-sizing: border-box;
}
.navigation{
/* 宽度设置页面的宽度 */
width: 100%;
/* 高度一般为50px */
height: 50px;
/* 当行背景，取自本题图片城市 */
background-image: url(城市.jpg);
/* 字体颜色 白色 */
color: white;
/* 文本居中 */
text-align: center;
/* 文本垂直居中 */
line-height: 50px;
/* 字体大小：20像素 */
font-size: 20px;
/* 字体样式：楷体 */
font-family: "楷体";
### 更多面试题
**《350页前端校招面试题精编解析大全》**内容大纲主要包括 **HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等**
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
[外链图片转存中...(img-47rMPGAp-1715673861526)]
扫一扫
5466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
