- 1前端开发中经常使用到的颜色：_前端颜色
- 2网上怎么赚钱？看懂这些你就不愁赚不到钱！
- 3react18-webchat：基于react+arco+zustand仿微信客户端聊天实例_仿微信聊天窗口 react
- 4AIGC行业现状
- 5自然语言处理（二十六）：fastText的使用_fasttext怎么用
- 6Python操作redis用法详解_python redis hscan_iter(1)，2024年最新那些被大厂优化的程序员们
- 7Android project not found. Are you sure this is a React Native project?_error android project not found. are you sure this
- 8Nvidia Jetson AGX Orin 初体验
- 9服务器RAID配置及功能介绍_服务器阵列csdn
- 10flink入门_Flink入门实战（1）
初学者最系统的前端学习之路_前端系统学习
赞
踩
前端系统的学习
网页=HTML（结构）+CSS（表现）+JavaScript（行为）
HTML
1.我们的软件是包含了客户端和服务器端的，现在我们要学习的就是客户端的知识，客户端又包含了C/S和B/S两种架构，前者是一种程序的页面，例如我们的QQ在下载之后的聊天界面就是一种C/S的客户端，后者是一种网站的页面
2.电脑的重命名快捷键是F2，还有在桌面上进行分屏操作是需要拖动处理的，我们将页面缩放之后，将页面拖动到桌面的左中位置的时候可以将页面在桌面的左二分之一进行显示
3.前端页面的实现需要用到三种语言，分别是HTML，CSS，JavaScript，这三种语言在编写前端页面的时候就像是我们在剖析人的结构时对应的骨架，皮肤，灵魂这三样东西的作用一样，骨架负责整个网页的结构，皮肤负责整个骨架的样式，而灵魂负责让整个网页能够动起来，对应我们在浏览网页时具有跳转的功能，这样方便理解
4.HTML（超文本标记语言），纯文字的属于纯文本，就像我们电脑中的记事本编辑的文件，word是一种副文本，因为他可以插入语音，视频，图片等，超文本就是具有丰富功能的文本，标记语言是一套标签标记，也就是HTML利用的是一系列的标签来对网页进行实现
5.我们在使用HTML对网页进行描述之后，需要浏览器进行渲染才能真正的显示出来，目前比较科学的浏览器是谷歌
边学习边更新，不足之处欢迎指正！！！！
6.HTML的格式，首先是告诉浏览器我们用的HTML的版本，声明的代码是<!doctype html>
然后是,将网页的代码写到其中，再在里面加上
7.这里我们详细记录编码，字符集的知识点，首先是进制问题，我们日常生活中使用的是十进制，但是在计算机内部，所有的数据都是以二进制进行存储的，所以我们在电脑上显示的汉字，图片，视频等信息都是需要以二进制的方式存储到计算及内部的，这就需要利用到编码技术了，编码就是将我们的汉字转化为0和1组合的形式来表示，例如我们的名字，举例的话就是“乔巴”，这两个汉字就是以1和0的方式的组合存到计算机的存储区域的，将我们所需要的各种信息利用编码的机制转化为二进制的组合存储到计算机内部之后，我们 在调用数据的时候同样需要把二进制的组合转化为我们日常生活的可以看懂的数据，所以现在我们就需要解码，将一些二进制组合翻译成日常生活中的数据，这种编码解码的过程就像我们看到的一些谍战剧里的破译电报的情况，谍战剧里将情报进行加密的过程就是编码，然后再将加密内容进行破译的过程就是解码。
8.在了解了编码和解码的知识点之后，我们要思考，在对众多数据进行编码和解码的时候，他们之间的一一对应的关系是确定的嘛？字符集的存在就是这种以一一对应的关系的集合，例如英文字母a，转化为二进制的话是110，那么这种规范就是一种字符集，我们现在存在着大量的字符集，首先是ASCII字符集，这是美国发明的，因为它占用了7位的0和1bit，正好7位的组合对应了他们所使用的英文字母，但是世界上包含了大量的不同语言，所以我们发明了一个可以包含世界上所有国家语言的字符集，也就是UTF-8，这种字符集被称为万国码，见名知意它所具有的功能是很全面的，我们目前最常使用的就是它
9.一个完整的HTMl文件的框架
<!--用来声明html的版本，来告诉浏览器 -->
<!doctype html>
<!--这是一个根标签 -->
<html>
<!--这是网页的首部，一般是浏览器为了方便搜索数据会根据网页的首部来进行大概的解析，这里的内容不会直接显示到网页里面 -->
<head>
<!--meta是一个元标签，本身就存在的，而且后面的charset是设置字符集的，这里设置了万国码utf-8，这里的设置是根据编辑器右下角的字符集决定的 -->
<meta charset="utf-8">
<title>加油！</title>
</head>
<body></body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
10.实体：ctrl+/是注释的快捷键，我们在html里面，如果是多个空格或者是<和>这样的一些特殊的符号，我们在写到body里面的时候，浏览器是没法正常的识别的，所以为了使用这些特殊的字符，我们需要实体的存在，例如空格实体是： 小于号就是：<大于号就是：>
11.meta标签的使用方法，meta里的数据都是一些元数据，它不是给用户看的，更多的是让浏览器方便赛选，主要是是charset，用来设置字符集的，然后是name(指定的元数据的名字)和content（指定的元数据的具体内容）和http-equiv=“refresh”
<!--浏览器通过关键字里的内容，来查看网页，例如淘宝这个关键字，浏览器就可以找到相应的网页 -->
<meta name = "keywords" content = "网购,淘宝,数据">
<!--浏览器搜索完了数据之后，数据的描述信息会显示到网页 -->
<meta name = "description" content = "淘宝是一家很大的网购平台">
<!--这里的属性是会让网页在3秒之后跳转到指定的也就是百度界面 -->
<meta http-equiv ="refresh" content="3;url=https://www.baidu.com">
<!--我们的title标签里的内容会作为搜索结果的链接内容进行显示 -->
- 1
- 2
- 3
- 4
- 5
- 6
- 7
12.标签类型，目前所学的标签分为两大类，分别是块元素和行内元素，我们的h1~h6和p标签都是块元素（blcok element），这里补充一个知识点就是标签和元素是同样的意思，然后像em 和 q标签都是行内元素（inline element），由于我们的html是结构，所以我们要关注的是各个标签的功能而不是所展现的样式
13.块元素和行内元素的特点：例如是h1标签，它就属于一种块元素，它内部可以装入任何元素，也就是任何块元素的内部都可以装入行内元素或者是块元素，但是p标签是一个例外，在他的内部是不能装入块元素的。再来记录一下行内标签，行内标签内部就不能放入块元素，只能放入行内元素。前面需要补充的一个知识点，就是我们的各种元素需要写到根标签html里面。其实在我们的html里还有很多其他的语法，我们在编写的时候一定要遵循语法编写，但是出于好奇我尝试了将一些元素写到根标签之外，但是还是能在网页中显示，这是为什么呢？因为我们浏览器具有一定的包容性，也就是在我们出现了一些语法错误的时候它能自动将我们的代码修正到正确的位置中在内存中存储，我们想要查看内存中的代码块的话，可以点击F12，然后查看element可以查看到内存中的代码
14.各种语义标签：
header头部标签
main主题标签，一般一个网页里面只有一个
footer尾部标签
nav表示页面的导航
aside是和主题相关的其他内容，侧边栏
article是独立的文章
section表示独立的区块，上面的标签都不能使用的时候可以考虑使用这个标签
div没有任何语义，是一个区块，我们会大量的使用
span也没有语义，不过是一个行内元素，主要用来选中文字
15.列表：列表分为有序，无序，定义列表，有序是ol+li，无序是ul+li，定义列表是dl+dt（表示定义的内容）+dd（表示对定义的内容进行详细的说明），而且三种列表之间是可以相互嵌套的，我们经常使用的是ul无序列表
16.在VSC中alt+shift+↑箭头是选中此行往上复制，相反+↓箭头是往下复制。F2是重命名的快捷键
17.超链接：超链接的标签是a，而且它是一个行内标签，在其内部可以存放除了其自身之外的所有标签。
作用：超链接的作用就是跳转，我们日常生活中会经常用到，就是在点击了页面上的一个区域之后页面就会自动的跳转到其他的页面，还有一个功能就是点击跳转之后可以跳转到当前页面的其他地方
属性：href=""里面填写的是想要跳转的网页的地址，一共有两种，一种是向外部网络跳转，另一种是向服务器内部跳转
18.相对路径：在使用超链接像服务器内的网页进行跳转的时候要使用到相对路径的知识，相对路径的作用是对自身文件的位置而言其他文件的路径就是相对路径，其中./代表的是当前文件所处的文件夹的名字，而且在使用的时候可以省略不写，…/代表的是当前文件夹的上一级文件夹，/的意思是向下级走
19.target：在超链接a标签里包含了一个target属性，这个属性的作用是在点击超链接之后是否创建一个新的页面，其中_self,是在当前页面打开超链接，而_blank是重新创建一个新的页面打开超链接，这两种的区别很明显各有千秋，根据实际情况进行使用
20.href：超链接里的href属性是一个特殊的属性，前面提到过他可以到一个新的页面，还可以跳转到我们当前页面的其他位置，例如在href="#"这个就是跳转到页面的顶部，除此之外还可以跳转到我们页面的所有位置，这里就要用到标签里的另一个属性，那就是id，下面再详细的介绍id属性的特点
21.id：我们html的id属性是每一个标签都可以具备的，而且他们的值要求是不能一样的，就像我们的人的身份证一样，不同的id代表了不同的人，其中id在命名的时候我们要以字母开头，不能以数字开头，而且是区分大小写的，因为id具有这样的特点，所以我们可以利用这一特点来使用超链接跳转到我们想要跳转的位置href=“#bottom”，再点击具有这个属性的超链接的时候我们就会跳转到id为bottom 的标签位置
22.img：图片标签，它的功能是在页面上引入图片，它可以引入服务器自身的图片，也可以引入其他服务器的图片，而且图片标签属于替换元素，具有块元素和行内元素两者的特点
属性：src指定图片的路径，路径的指定规则和超链接一样
alt 用于对图片的描述，这样可以方便浏览器进行检索，浏览器会根据img标签内的alt进行检索
23.图片的格式：
jpeg（jpg）支持的颜色比较丰富，不支持透明，一般用来显示照片，
gif支持颜色比较少，支持简单的透明，支持动图，一般用来显示图片，动图，
png支持颜色丰富，支持复杂透明，不支持动图，专为网页而生，
webp这是一种谷歌新推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件还特别的小，缺点就是兼容性不好，
base64是将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式引入图片时图片可以和浏览器一起加载
这几种图片格式的使用条件是，在显示效果相同的条件下我们选择较小的格式，效果不一样的时候，用效果较好的
24.iframe标签，这是一种内联框架，用来在页面里引入其他页面并显示
属性src指定其他网页的路径
属性frameborder指定内联框架的边框，0时是没有边框，1代表有边框
25.音视频标签audio和video标签，用来在网页中引入一个音频文件，而且音频在引入后默认是不允许用户自己控制播放暂停的
属性：
controls在页面上显示出音频播放的界面
autoplay音频在网页打开的时候是否自动播放，但是目前大多数浏览器即使我们加了这个 属性也不能自动播放，因为防止降低用户体验
loop音乐在播放完毕之后是否循环
我们在编写这两个标签的时候有两种方式
一，<audio src="./sorce/audio.mp3" controls></audio>
二，<audio controls>
<source src="./sorce/audio.mp3" >
<source src="./sorce/audio.ogg" >
<embed src="./sorce/audio.ogg" type="audio/mp3" width="300px" height="300px">
</audio>
- 1
- 2
- 3
- 4
- 5
- 6
之所以会出现这两种的书写方式是因为我们市面上存在众多的浏览器，不同的浏览器，不同的版本的功能可能不尽相同，这样可以提高程序的兼容性
CSS
1.css的作用就是对网页中的标签进行修饰，体现出不同的样式，css的修饰方式分为三种：内联样式，内部样式，外部样式。
第一种内联样式：这种时候直接在标签内部进行修饰，缺点是标签数目多时不利于修改
<p style="color:red;font-size:50px;">这是内联样式</p>
- 1
第二种内部样式：这种是在标签的外部，文件的内部，在head里修饰，但是不能被其他的文件使用
<head>
style
p{
color:red;
font-size:green;
}
</style>
</head>
<body>
<p>这是内部样式表</p>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
第三种：外部样式表：这种样式最常用，可以直接在head元素里直接使用link标签进行引用，这样可以多文件引用同一个css文件，方便浏览器加载，节约时间
创建一个css结尾的文件，写入样式
p{
color:red;
font-size:50px;
}
然后可以在一个html结尾的文件引入这个外部样式
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>这是外部样式</p>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
2.CSS的语法，首先是它和HTML是两种语言，所以他们的语法也是不一样的，例如注释就是不同的形式，HTML里的注释是这样的<!-- -->,在我们的CSS里的注释就是这样的/* */,我们要注意在使用时的区别
<head>
<style>
p{
color:red;
font-size:50px;
}
</style>
</head>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
其中p就是选择器，也就是选中想要修饰的元素
中括号里的是声明块，这里面包含了各种声明，而声明的作用就是对标签的各种修饰的样式
3.常用的选择器有四种，分别是元素选择器，id选择器，类选择器，通用选择器
元素选择器：根据元素名字直接选择例如p{}
id选择器：根据元素的id进行选择例如#button{}
类选择器：根据元素的属性class="xx"进行选择例如.xx{}
通用选择器：使用关键字*可以选择所有的元素进行样式修饰例如*{}
上述的id和类选择器有一点需要注意，就是元素的id属性值必须是唯一的，但是class属性值是可以相同的，而且一个class属性可以有多个不同的值，它们之间要用空格隔开
4.复合选择器：复合选择器有四种，一种是交集选择器，一种是并集选择器，一种是关系选择器，一种是属性选择器
交集选择器，是选中两个或多个元素的属性的交集例如p.name{}它的意思就是选中class属性值为name 的p元素
并集选择器，是选中所有的元素例如p，.name，#button{}它的意思就是选中p元素和class属性值为name的和id值为button的这三个元素
关系选择器，这种选择器在使用之前要先了解元素之间的关系，各元素之间可能存在以下几点关系
父亲：直接继承
儿子：直接继承
祖先：间接继承或者是直接继承
后代：间接继承或者是直接继承
兄弟：有共同的父亲
在了解了各元素之间的关系之后，我们可以把关系选择器分为以下几种
子元素选择器：选中指定元素的指定子元素，语法是：父亲>儿子，而且这种关系可以往下递进
后代选择器：选中指定元素的所有子元素，语法是：父亲 儿子
兄弟选择器：选中指定元素的紧挨着的兄弟元素，语法是：哥哥+弟弟
多个兄弟选择器：选中指定元素的紧挨着的所有弟弟选择器，语法是：哥哥~弟弟
5.属性选择器是选择指定的属性进行修饰
例如p[title]意思是带有title属性的p元素将会被修饰
p[title=“abc”]意思是带有title属性，且属性值为abc的p标签
p[title^=“abc”]意思是带有属性值开头是abc的p标签
p[title$=“abc”]意思是带有属性值结尾是abc的p标签
p[title*=“a”]意思是title属性值中带有a字符的p标签
6.伪类选择器
伪类（不存在的类，特殊的类），用来描述一个元素的特殊状态，比如是，第一个元素，被点击的元素，鼠标点击的元素等等，而且伪类一般情况下都是：开头
下面举例一些常用的伪类
：first-child 第一个子元素
：last-child 最后一个子元素
：nth-child（）选中第n个子元素
其中（）内部可以是
n：表示选种第n个元素，n的范围是从o到正无穷的
2n或者是even表示选种偶数位的子元素
2n+1或者是odd 表示选种奇数位的子元素
以上这些伪类都是根据所有的子元素进行排序
下面 再举例一些在相似类中进行选择的伪类选择器
：first-of-type相同元素中的第一个
：last-of-type相同元素中的最后一个
：nth-of-type（）相同元素中的某一个
再举例一个特殊的伪类
：not（）否定伪类，将符合条件的选择器去除
7.和a标签相关的伪类选择器
a：link用来选择未访问过的链接
a：visited用来选择已经访问过的链接，但是这个伪类中只能对颜色进行修改，目的是为了保护用户的隐私，一般我们不使用
a：hover用来选择鼠标移入到相应位置的元素
a：active用来选择鼠标点击时相应位置的元素
其中link和visited都是a标签特有的伪类选择器，hover和active这两个是适用于所有标签的
8.伪元素选择器
伪元素就是选中页面中的某一个部分作为一个元素进行修饰，所以称为“伪”元素，伪元素都是：：开头的
下面举例一些伪元素
：：first-letter表示选中第一个字母作为新的元素进行修饰
：：first-line表示选种第一行个数据作为新的元素进行修饰
：：selection表示鼠标选种的部分作为新的元素进行修饰
：：before表示元素开始前的区域作为新的元素进行修饰
：：after表示元素结束后的区域作为 新的元素进行修饰
而且before和after这两个伪元素都要结合content属性来使用
例如
div：：before{
content：‘abc’；
color：red；
}
- 1
- 2
- 3
- 4
这就是在div标签内的文本前加上abc并且设置为红色
9.继承
继承是html所本来就具有的机制，这种机制可以让父亲标签的属性继承到后代标签里，这样可以方便进行统一，但是并不是所有的属性都可以被继承的，例如我们的背景属性就不能被继承
10.选择器的优先级
在理解选择器的优先级之前我们了解样式的冲突的概念
当我们通过不同的选择器选中了同一个元素的同时，并且为这个元素的同一个属性设置了不同的属性值的时候就会发生冲突，这个时候就要考虑选择器的优先级问题了
下面是各种样式的优先级
内联样式：1，0,0，0
id选择器：0,1，0,0
类和伪类选择器：0,0，1,0
元素选择器：0,0，0,1
通配选择器：0,0，0,0
继承选择器：优先级最低
在选择器的优先级进行比较的时候可以将选择器的权重进行相加进行比较
而且我们可以在某一个样式的后面加上important，此时该样式就会获得最高的优先级，甚至超过内联样式，但是这种操作要慎重使用
11.像素，百分比，em，rem
像素：我们的电脑屏幕所显示的画面就是由一定数量的像素点加上亮度组合所显示出来的效果，而且在一定面积 大小的屏幕下像素越小，屏幕显示效果就会越清晰
百分比：这个百分比是相对于父元素的百分比
em：em是一个单位，它的大小是相对元素的字体大小计算的，1em=1font-size，而普通元素的默认字体大小是16px，所以10em=160px
rem：rem是一个相对于根元素（html）的字体的大小计的，1rem=1font-size
12.颜色单位
颜色单位有以下几种形式
第一种：直接用颜色名字来表示例如，yellow，green
第二种RGB：它是通过三种颜色的不同浓度调配出来的颜色，其中R（red）G（green）B（blue）每一种颜色的范围是从0~255（0%到100%），语法是RGB（红色浓度，绿色浓度，蓝色浓度）
第三种RGBA:这种是在第二种的基础上加上了一项透明度，需要四个值其中1表示完全不透明，0表示完全透明，.5表示半透明
第四种是十六进制的RGB：颜色浓度是从两位的十六进制00~ff，语法，#红色绿色蓝色，如果每两位是相同的数字时可以进行简写例如：#ccddff–>#cdf
layout(布局)
1.文档流
网页其实是一个多层的结构，就像我们过生日时用到的蛋糕一样，CSS可以分别为每一层来设置样式，而作为用户的我们只能看到最上面的那一层，在网页的众多层中最底层的就是文档流，就像蛋糕中的面包层一样处于最下层，我们所创建的元素默认都是在文档流中进行排列的
我们所知道的元素主要有两种状态：在文档流中，和不在文档流中的
在文档流中的元素以下两种特点：
块元素
每一个块元素子在页面中自上向下独占一行
默认宽度是父元素的全部
默认高度是被内容撑开
行内元素
行内元素不会独占页面一行，只占自身的大小自左向右排列
默认宽度和默认高度都是被内容撑开的
2.盒子模型
CSS将页面中的所有元素都看成一个个的盒子，页面的布局就是由一个个的盒子构成的，没一个盒子会包含以下属性
内容区（content）
内边距（padding）
边框（border）
外边距（margin）
3.边框（border）
边框会有三个属性值，width，color，style，而且这三个属性值要同时赋值
border-width：默认值是3px，它可以用来指定四个方向的边框宽度有以下情况
四个值：上右下左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
border-top-width用来单独指定上边框的宽度，这个操作可以同步到其他边框
border-color：它用来指定边框的颜色，性质和width一样
border-style：它有以下五种样式
solid 表示实线
dotted 表示点状虚线
dashed 表示虚线
double 表示双线
border-style的值默认是none 表示没有边框
border在简写属性时，可以将三个属性值同时赋值，而且针对三个属性值没有顺序要求
4.内边距（padding）
内容区和边框之间的距离称为内边距，一共有上下左右四个方向的内边距，内边距的设置会影响到盒子的大小，内容区的背景颜色会延伸到内边距上，一个盒子的可见框的大小，是由内容区+内边距+边框组成的，所以计算盒子的大小时需要加上这三个因素
5.外边距（margin）
外边距不会影响到盒子的可见框大小，但是它是用来调整盒子在页面中的布局的
margin-top
margin-left
这两个是通过移动盒子自身来挪动的
margin-top
margin-right
这两个是通过挪动相邻元素来布局的
6.页面中盒子的水平布局规定
我们的父元素中的子元素，在水平布局中必须满足下面的等式
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父亲盒子内容区的宽度
这个等式在页面中，父子盒子之间必须遵循这个条件，但是实际情况中的父子盒子之间如果没有遵循这个条件，就会产生过度约束的情况，面对过度约束的情况，等式会自动调整，以下是调整的情况
第一种：七个值中没有设置auto，这个时候浏览器会自动调整margin-right的值以求满足等式
第二种：这七个值中有三个值可以设置为auto
width
margin-left
margin-right
如果某个值为auto，则会自动调整设为auto的值以求满足等式
（1）：如果三个值都设置为auto 的话，我们会将width设置为最大，外边距的值设置为0以求满足等式
（2）：如果将两个外边距设置为auto，width为固定值，那么将会把外边距设置为平分相等的值，我们常用这个性质将子元素在父元素中水平居中，例如margin 50px，auto
（3）：如果是将宽度和一个外边距设置为auto 的话，我们会将width设置为最大，外边距设置为0以求满足等式
7.盒子模型的垂直方向的布局
子元素在父元素的内容区里，当我们的子元素的内容超过了父元素的内容区的时候，我们就要使用下面这个属性
overflow，这个属性用来让父元素处理溢出的子元素
有以下四种属性值
visible，这是一个默认值，子元素会在父元素上溢出进行显示
hiddeen，溢出的内容会被父元素隐藏
scroll，生成两个滚动条，通过滚动条来查看完成的内容
auto，根据需要生成滚动条，如果水平方向没有溢出，那么就不生成水平方向的滚动条了
8.垂直方向外边距的重叠
在垂直方向相邻的两个元素的外边距会发生重叠的现象，如果相邻元素是兄弟元素或者是父子元素的情况还不是一样的
兄弟元素：
1，两元素的外边距都是正值，则会取两者之间的较大者
2，两元素的外边距一正一负，则会取两者之和
3，两元素的外边距都是负值，则会取其中绝对值较大的
但是兄弟元素之前的外边距的重叠是有利的，所以在开发中不需要处理
父子元素：
父子元素间相邻的外边距，子元素的会传递给父元素（上外边距）
9.行内元素的盒子模型规则
行内元素不支持设置width和height
行内元素可以设置padding但是垂直方向的padding不会影响页面的布局
行内元素可以设置border，同样垂直方向是没用的
行内元素可以设置margin，垂直反向也是没用的
10.元素类型的转换
display用来转换元素的类型
属性值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素，也就是可以设置width和height但又不会独占一行
table 将元素设置为一个表格
none 将元素在页面中隐藏
11.元素在页面中的显示状态
visibility这个属性来决定元素的显示状态
属性值：
visible 这个是默认值，元素在页面中正常显示
hidden 在页面中隐藏，但是依然在页面中存在并占据位置
12.页面的默认样式
在我们的游览其中会默认给页面中的元素设置样式，这种样式会影响到我们编排的样式，所以在写前端页面的时候，我们需要将浏览器设置的默认样式进行格式化
13.重置样式表
专门用来重置浏览器的默认样式，有以下两个css文件可以进行重置，reset.css直接去除浏览器的默认样式和normalize.css对默认样式进行了统一，我们在写前端时，可以在head中使用link来链接这两个中的其中一个文件来达到目的
14.盒子的大小
在前面的学习中，我们知道盒子的可见框大小是由内容区，内边距和边框三个的和来决定的，但是box-sizing属性可以改变这种计算公式
box-sizing：content-box，这是默认值，就是三个属性的和
box-sizing：border-box，是将盒子的width和height来直接表示盒子的大小
15.盒子的轮廓和圆角
box-show属性用来设置元素的阴影效果，阴影不会影响页面的整体布局，它会有四个值，每个值的含义如下
第一个值：表示水平偏移量，正值表示向右移动，负值表示向左移动
第二个值：表示垂直偏移量，正值表示向下移动，负值表示向上移动
第三个值：表示引用的模糊半径，半径越大，模糊的程度越大，而且扩散到的越厉害
第四个值：表示阴影的颜色
16.轮廓线
outline用来设置元素的轮廓线，用法和border一样，但是不同的是它不会改变盒子可见框的大小
17.盒子的圆角
border-radius，这是用来设置盒子圆角的属性，圆角设置的半径大小，这个属性可以设置四个角的圆角值
border-radius：20px；表示设置四个角的半径为20px的圆角
18.浮动的特点
浮动的作用是将子元素在父元素中水平布局
属性名：float
属性值：none，默认值，元素不能浮动
left，元素靠左浮动
right，元素靠右浮动
浮动的特点：
1.元素设置浮动之后就不用必须遵循，子元素的七个宽度属性值之后等于父元素的容器值
2.浮动元素在设置之后会脱离文档流，不在占据文档流的位置
3.浮动元素默认不从父元素中移出
4.浮动元素在向左右移动时不会超过它前边的其他浮动元素
5.如果浮动元素的上面的元素不是浮动元素，那么则无法向上移动
6.浮动元素会和它上边的兄弟元素保持一致的高度，不会超过它
19.脱离文档流的特点
块元素：
1，块元素不在独占页面的一行
2，脱离文档流之后，块元素的width和height默认都被其元素中的内容撑开
行内元素：
行内元素脱离文档流之后会变成块元素，特点和块元素一样
总之，在脱离文档流之后就不在区分块元素和行内元素了
20.高度塌陷的问题
在一般的布局中，父元素的宽默认是页面的宽度，高度是可以默认被子元素撑开的，但是如果子元素设置了float，那么子元素就脱离了文档流，就无法撑开在文档流中的父元素的高度了，这就是高度塌陷
21.BFC：块级格式化环境
BFC是一个CSS中的一个隐藏属性，可以为元素开启它，开启之后的元素就会成为一个独立的布局区域。
BFC的特点：
1，开启BFC的元素不会被浮动元素所覆盖
2，开启BFC的元素的子元素和父元素外边距就不会再重叠，避免了在调整padding时父子同时移动的情况
3，开启BFC的元素可以包含浮动的子元素，这样可以解决塌陷文字
开启BFC的方式：
BFC是一个CSS中的隐藏属性，不能像一般属性一样直接声明开启，它的开启方式有多种，我们简单介绍以下三种：
1，float（不推荐）
2，将元素设置为行内块元素 display：inline-block（不推荐）
3，将元素的overflow设置为非visible的值，例如voerflow：hidden（这种方式的弊端最小）
22.clear的作用
用于清除浮动元素对当前元素所产生的影响
可选值：
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧中最大影响的那侧
原理：设置清除浮动之后，浏览器会自动为元素添加一个上外边距来使其位置不受其他元素的影响
23.clearfix的作用
这个属性可以同时解决高度塌陷的问题和外边距重叠的问题
代码如下
.clearfix::before,
.clearfix::after{
content:'';
display:table;
clear:both;
}
- 1
- 2
- 3
- 4
- 5
- 6
24.定位
定位是一种更加高级的将盒子进行布局的手段
通过定位可以将元素摆放到页面的任意位置
使用position属性来设置定位
可选值：
static 默认值，元素是精致的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘带定位
25.相对定位
当元素的position属性值设置为relative时开启了相对定位
相对定位的特点：
1，元素开启相对定位之后，如果不设置偏移量的话盒子的位置不会有任何的变化
2，相对定位是参照于元素在文档流中的位置进行定位的
3，相对定位会提升元素的层级
4，相对定位不会改变元素自身的根本属性，块就是块，行内就是行内
偏移量（offset）
当元素开启了定位以后，可以通过偏移量开设置元素的位置
可选值：
top，bottom
left，right
26.绝对定位
当元素的position设置为absolute时，就会开启元素的绝对定位
绝对定位的特点：
1，开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2，开启绝对定位后，元素会从文档流中脱离
3，绝对定位会改变元素的性质，行内会变成块，块的高度被内容撑开
4，绝对定位会使得元素提升一个层级
5，绝对定位是相对于其包含块进行定位的
包含块：
正常情况下，包含块就是离当前元素最近的祖先块元素，就是离当前元素最近的父元素
绝对定位的包含块:
包含块就是离它最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位则根元素就是它的包含块
27.固定定位
将元素的position属性值设置为fixed则开启了元素的固定定位
固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
唯一不同的是固定定位永远参照于浏览器的视口进行定位，固定定位的元素不会随着 网页的滚动条滚动，是固定在视图中的某一位置的
28.粘滞定位
当position属性的属性值设置为sticky时开启了元素的粘滞定位，粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以让元素在视图中的某一位置固定下来，不随滚动条的移动而移动
29.绝对定位的布局
当我们开启了绝对定位之后，水平布局就要从原来的七个值相加变成九个值相加，多出的两个值时left和right，也就是子元素的这九个值的和要等于父元素的width
垂直方向布局也要满足上述条件
30.元素的层级
对于开启了定位的元素，可以通过z-index属性来指定元素的层级高低
z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示
如果两个元素的层级一样时，则会优先显示元素代码靠下的元素
祖先元素的层级再高也不会盖住后代元素
31.字体相关的样式
color用来设置字体的颜色
font-size用来设置字体的大小，单位是px
em相当于当前元素的一个font-size
rem相当于根元素的一个font-size
font-family用来设置字体的样式
可选值
serif：衬线字体
sans-serif：非衬线字体
monospace：等宽字体
font-family可以同时指定多个字体，多个字体间使用，隔开，字体生效时优先使用第一个，第一不能使用再使用第二个，依次类推
32.图标字体（iconfont）
在网页中会有一些小图标，这些图标可以通过引用图片的方式进行引用，但是这样的话会造成空间的浪费，而且在使用的时候也不方便
所以我们在使用图标的时候，还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入
这样的话我们就可以对图标通过使用对字体的修饰形式进行修饰了
