1.超文本，即有超链接的 特性
2.文本：字符串内容
3.标记：将文本体，按照不同的需求，做区分
所以 html我们要关注的是
1.html 是 网页的 结构，主要是结构(不能做太多的修饰工作，重点在结构)
2.html的主体就是 标签以及对应的标签体，这样就能将文本，提供不同的标签 结构化
3.标签中的属性，用来将 标签体中的内容做简单的渲染
但是，一般不用，html只做结构，表现由css来做
4.常用标签
5.实体用来，特殊字符的编写
6.meta标签，用来给浏览器和搜索引擎读的，不在页面中显示，放在<head》标签里面的，
《meta charset = “utf-8”》
《metat name = “keywords” content = “xxx”》这个是用来浏览器搜索时，会去各种部署的页面，去找有咩有keywords是 content的，有，那么浏览器搜索的时候就会搜索到
《meta name = “description” content = “xxx”》这个是用来，搜索引擎搜索到了，keywords的网页，那么下面的描述就是description的content
《meta name = “http-equiv” content = "3;url = "“xxx”》
这个标签表示这个网页进去后，过3秒会重定向到 xxx网页
7.html标签 只要注意它的 语义，即这个标签的作用，而不要管这个标签使用后，产生的效果(这个归css管，html标签不管显示什么效果都不要管，重点是这个标签的作用)
8.html标签分为，快标签(块元素)和行内标签(行内元素)，块标块元素独占一行(前后都会换行)，行内元素不会独占一行
行内元素和块元素的本质区别就是 行内元素不独占一行，不能设置宽度和高度，而块元素恰好相反，而且元素都会默认是行内元素 或者 块元素，但是通过css可以改变元素的这个属性
9.块元素(block element)
-在网页中一般通过块元素对页面进行布局
行内元素(inline elememt)
-行内元素主要来包裹文字
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
p元素中不能放任何的块元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除 head和body以外的子元素
修正时不会在源代码处修正，会在开发者f12,elements处修正(即源代码在内存中的存在)
10.关于块元素和行内元素有很多，但是大多块元素在显示效果上没有什么区别，只是在语义上进行了区分，同样行内元素也是如此，所以我们用的最多的 块元素 就是 div（没有任何语义就是一个块元素），用的最多的行内元素就是 span（没有任何语义就是一个行内元素）
当然我们说了，收钱区分时块元素还是行内元素，然后区分它的语义，有的是有语义的，有的是没有语义的(没有语义的就是仅仅 具备块元素/行内元素 换行与否的特性)，有语义的，可能在显示在和没有语义的没有任何区别，但是有些有语义的，在显示上有特别的区别，例如 ui ,li ,…这些块元素在显示上就是有区别的，但是总体来说他是个块元素
11.块元素：独占一行，但是我们可以用css将一列的 块元素，翻转过来，成为 一行的 块元素，但是这只是显示效果不一样，不代表，块元素不会独占一行
12.列表
在html中有三种列表(列表和列表项都是 块元素)
1.无序列表
<ul> 无序列表
<li>a</li> 列表项
<li>b</li> 列表项
</ul>
例子：
.a
.b
2.有序列表
<ol> 有序列表
<li>a</li> 列表项
<li>b</li> 列表项
</ol>
例子：
1.a
2.b
3.定义列表
<dl> 定义列表
<dt>结构</dt> 代表定义的内容
<dd>结构的解释</dd> 代表对定义的内容的解释
</dl>
例子：
结构
结构的解释
4.用的最多的是 ul 无序列表，其实无序列表和有序列表
为了保证在不同浏览器显示的效果一致，都不会用他们前面的 符号
所以无序列表和有序列表在经过处理后，效果一样
5.列表中可以嵌套列表，即块元素中可以嵌套块元素
13.超链接
1.超链接是一个行内元素，在a标签中可以嵌套除它自身外的任何元素
这和普通的行内元素不同
2.1 href既可以指定外部网站地址也可以指定内部网页的地址
2.2 内部网页的地址通常用相对地址 ../../
2.3 href还可以不用作跳转页面，而定位到当前页面的指定位置
1. <a href="#">回到顶部</a>
2. <a href="#元素的id属性值">回到具体元素id的位置，这个元素可以是任意带了id的标签</a>
3. 还有一种情况，就是超链接不定位到任何地方，和普通文本没有区别，用一个占位符
<a href="javascript:;">aaa</a>
3.target属性：_self,_blank
14.html标签的 id属性 和 class属性
1.所有 标签都有id属性，id属性代表了 元素的 唯一不重复，即 标签的 id，即标签的唯一身份
2.一个页面中，元素的 id 不能重复，若重复，只会认第一个id的标签
3.标签的id属性 非常重要，后面 只要是 找到某个标签，用某个标签… , 就是你想让这个标签 “存在”，就和我们java中的 对象一样，只有标签有 id属性，那么这个标签才是在这个页面有 身份的。
class属性
1.class属性可以重复
2.class属性 可以为 元素分组(跟id属性一样所有元素都有这个属性)
tittle属性
1.每个html元素都有这个属性
2.当鼠标放在这个元素上，就会显示这个标题
15.图片标签
1.img标签是一个 替换元素(行内元素和块元素特点都有，但是这里指的不是，独占一行的特点，而是其他特点)
2.img元素，默认是 具有行内元素 不换行的特点的
3.img元素只能 引入外部图片
4.alt属于对图片的描述，主要是给搜索引擎搜索用的，而不是在图片无法显示的时候，显示描述用的
5.width 和 height 一般只改一个，那么另一个就会等比例缩放，但是在pc端一般不用，避免失桢
6.在 pc端 避免修改图片大小
什么叫替换元素
一般就是 这个标签，是引入了其他外部资源，导致页面上显示的是外部资源，而不是这个标签本身的内容，这就叫替换元素
什么叫网页对搜索引擎的作用
通常我们的搜索引擎会去爬取 所有部署了的 网站，根据什么爬取的，就是根据网页的源代码中的一些信息爬取的，所以我们网页中写的东西除了大部分用于显示效果，还有考虑到 给搜索引擎来爬取的，这些我们 通常都是一些，不在页面显示的，用于给搜索引擎爬取的
16.图片的格式
1.jpg
-支持的颜色比较丰富，不支持透明效果，不支持动图
-一般用来显示照片
2.gif
-支持的颜色比较少，支持简单透明，支持动图
-颜色单一的图片，动图
3.png
-支持的颜色丰富，支持复杂透明，不支持动图
-颜色丰富，复杂透明图片（专为网页而生）
4.webp
-这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
-它具备其他图片格式的所有优点，而且文件还特别小
-但是只在谷歌兼容
5.base64
-将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片，即src = base64编码，
-一般都是一些需要和网页一起加载的图片才会使用base64
6.总结用哪种格式的图片
效果一样的用内存小的
效果不用的，用效果好的，都是得考虑内存大小，兼容性
17.内嵌框架 iframe
iframe src=“” frameborder=“0”></iframe
1.这个标签用的很少，以为 搜索引擎无法爬取到 内嵌框架里面的内容
2.frameborder = 0 或 1 代表有无边框
18.音视频标签
1.audio 标签用来向页面中引入一个外部的音屏文件的
音视频文件引入时，默认情况时不允许用户自己控制播放停止
2.属性
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
-如果设置了 autoplay 则音乐在打开页面时会自动播放
但是目前来说大部分浏览器都不会自动对音乐进行播放
loop 音乐是否循环播放
3.<audio src="" controls autoplay loop></audio>
除了通过 src来引入外部文件外，还可以通过 source来指定文件
<audio controls>
你的浏览器不支持不兼容
<source src="">
<source src="">
</audio>
这样使用的好处是，当这个浏览器是支持auto标签的时候，那么就会去找 source标签，并选择
能识别的 格式 的 音频显示，如果不支持，那么就会显示 你的浏览器不支持不兼容
这样可以提高兼容性
4.视频就是将 audio换成 video即可
css
-层叠样式表
-网页实际上是一个多层的结构，通过css可以分别为网页的每一个层来设置样式
而最终我们能看到的只是网页中元素的样式
-总之一句话，css用来设置网页中元素的样式
使用css来修改样式的几种方式
1.内联样式，行内样式
在标签内部用过 style标签属性来设置元素的样式
但是缺少复用性(不建议使用)
2.内部样式表
1.将样式编写到head中的style标签中，然后通过css选择器来选中元素
并为其设置各种样式，可以他是为多个标签设置样式，而且修改时只需修改一处
2.但是内部样式表只能对一个网页起作用
3.外部样式表(最佳)
1.编写一个css文件，里面编写各种 css元素选择器
2.网页在 head里面 通过 link标签 引入外部的css文件
3.好处，多个网页可以复用
4.好处，将样式编写到css文件里面，可以使用浏览器的缓存机制
1.针对内部样式表，在 head里面的 style标签内就不属于html了，所以里面不能写html代码，而只能写css代码，只能遵循css规范
2.简单来说，css和html是两种不同的语言(这里暂且叫他们语言)，具有不同的语法规则
2.css基本语法
1.注释 /**/ 而不是 <!---->
2.选择器，声明块(这是css的核心)
3.选择器：通过选择器可以选中页面中指定的元素
4.声明块：就是 一堆键值对，对应各种样式和对应的值
选择器语法的目的，就是提供我们更多的选择，去定位到某个或者某些我们想定位到的元素，可以宽泛，可以细致，这样才提供了我们 各种各样的选择器语法
3.常用选择器(注意 我们这里指的选择器都不包括{})
1.元素选择器
-作用根据标签名来选中指定的元素
-语法 标签名{}
2.id选择器
-作用：根据元素的id属性来选中指定的元素
-语法 #id值{}
3.class选择器(比id选择器用的多)
-作用：根据元素的class属性来选中指定的元素
-语法： .class属性{}
-注意：标签的class属性可以有多个，用 隔开
例如<p class = "a b c"></p>
-class是标签的一个属性，它和id类似，可以重复，可以给元素分组
4.通配选择器
-作用：选中页面的所有元素
-语法： *{}
4.复合选择器(符合选择器，任何地方都可以用，他不是一个单独的选择器)
1.交集选择器
作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器n{}
注意点：交集选择器中，如果有元素选择器，必须以元素选择器开头
2.并集选择器(选择器分组)
作用：选中 交集元素
语法：选择器1，选择器2，选择器n{}
3.交集和并集选择器可以组合使用
例如：选择器1选择器2,选择器3选择器3,
p#blue,p.k{}
5.关系选择器
1.子元素选择器
作用：选择指定父元素的指定子元素
语法：父元素 > 子元素
2.后代元素选择器
作用：选择指定元素的指定后代元素
语法：祖先 后代
3.选择下一个兄弟元素选择器(注意，必须这两个标签是紧贴的)
语法：前一个 + 后一个
p + span{}
例如：
<div>
<p>sss</p>
"中间不能有任何东西"
<span></span>
</div>
这样的情况才叫做 兄弟元素选择器
4.选择下边所有的兄弟元素选择器
语法：兄 ~ 弟
注意：这个就不用考虑紧贴了，只要是符合兄弟关系即可
6.属性选择器
1.作用：选择含有指定属性的元素
2.语法
1.[属性名] 选择含有指定属性的元素
2.[属性名=属性值] 选择含有指定属性和属性值的元素
3.[属性名^=属性值] 选择属性值以指定值开头的元素
4.[属性名$=属性值] 选择属性值以指定值结尾的元素
5.[属性名*=属性值] 选择属性值中含有某值的元素
7.伪类选择器
1.作用：选择 某个状态下的 元素/类，注意这里的元素和类不用管，在html中
也米有这个概念，html都是 元素(标签)，以及标签体，标签属性
所以这里说的 伪类你大致理解为 元素的状态 伪元素你理解为 元素的位置即可
2.伪类(不存在的类，特殊的类)
- 伪类用来描述一个元素的 特殊状态
比如：第一个元素,被点击的元素，鼠标移入的元素......
3.伪类选择器一般都用 :开头
(有一类是关于子元素的，虽然伪类选择器只是:...，但是涉及到子元素的
前面都是有子元素选择器的)
:first-chird 第一个子元素
:last-chird 最后一个子元素
:nth-chird(1....n) 选择第n个子元素
特殊值：
n 第n个 n的范围0到n
注意：这些排序，都是指的所有子元素中的第一个
例子：
<ul>
<span></span>
<li></li>
</ul>
ul>li:first-chird{}
这个表示，只有li是第一个子元素才能被选中，不能简单的理解成
li中的第一个子元素，这是需要注意的，记住也行
:first-of-type
:last-of-type
:nth-of-type
-这几个伪类选择器的功能和上述的类似，不同点是
他们是在 同类型元素中进行排序
例子：
<ul>
<span></span>
<li></li>
</ul>
ul>li:first-of-type{}
这个就可以选中 li的第一个子元素，注意区别于
:not（否定伪类选择器）
-将符合条件的元素去除(和上面的子元素无关了)
超链接的伪类选择器
1.:link 用来表示没访问过的链接
例子： a:link{}
2.:visited 用来表示访问过的链接,由于隐私问题，只能修改颜色
例子：a:visted{}
:link 和 :visited 这两个伪类选择器，只能作用在超链接上
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击
8：伪元素选择器
1.伪元素：表示页面中的一些特殊的并不真实的存在的元素(特殊的位置)
理解成 特殊的位置即可
伪元素使用 :: 开头
2.::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的行
::before 最开始元素的前端
::after 结尾元素的后端
-before和after 必须结合content属性使用
例子：
div::before{
content：'abc';
color: 'red'
}
9.样式的继承(这里不是选择器了，这里是声明块了，是样式了)
1.样式的继承，我们为一个元素设置的样式，同时也会应用到他的后代元素
2.继承是发生在祖先和后代之间的
3.并不是所有的样式都会被继承的，比如背景，布局相关的
4.具体看哪些样式可以被继承，那么百度样式的继承性即可
10.选择器的权重（针对样式）
1.样式的冲突
-当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置
不同的值时，此时就发生了样式的冲突
-发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
2.选择器的权重
内联样式 1000
id选择器 100
类和伪类选择器 10
元素选择器 1
通配选择器 0
继承的样式 没有优先级
3.比较优先级时，需要将所有的选择器进行相加计算，最后优先级越高，则
越优先显示（分组并集选择器是 单独计算的），
选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
如果优先级计算后相同，此时则优先使用靠下的样式
11.样式中的长度单位(有几个样式 都可以用这些单位，例如weight,font-size…) 11和12是单位
长度单位：(只需记住这些单位都是描述长度的单位)
像素
百分比
百分比是相对父元素属性的百分比
em
rem
12.颜色单位
1.直接用 颜色名
2.RGB值
-RGB通过三种颜色的不同浓度来调配出不同的颜色
-R red,G green,B blue
-每一种颜色的范围在 0-255(0% - 100%))
-语法：RGB(，，)
3.RGBA值
-多了一个表示透明度的 A
1表示完全不透明，0表示完全透明，.5表示半透明
4.十六进制的RGB值
-语法： #红色绿色蓝色
-颜色浓度通过 00-ff
-如果颜色的两位重复可以进行简写
#aabbcc --> #abc
5.HSL值 和 HSLA值（A一样代表透明的） 这一组和RGB那组选一种
H 色相（0-360）
S 饱和度（0-100%）
L 亮度 （0-100%）
A 透明度
13.下面就是声明块的内容了,即各种样式了(以布局为主)
14.文档流（normal flow）
-网页是一个多层结构，一层摞着一层
-通过css可以分别为每一层来设置样式
-作为用户来讲只能看到最顶上一层
-这些层中，最底下的一层称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列的
-对于我们来说元素只有两个状态
-在文档中
-不在文档中（脱离文档流）
-元素在文档流中有什么特点：
-块元素
-块元素会在页面中独占一行（自上向下垂直排列）
-默认宽度是父元素的全部（会把父元素撑满）
-默认高度是被内容撑开（子元素）
-行内元素
-行内元素不会独占页面的一行，只占自身的大小
-行内元素在页面中左向右水平排列，如果一行之中不能所有的行内元素
则元素会换到第二行继续至左向右排列（书写习惯）
-行内元素的默认宽度和高度都是被内容撑开
15.盒子模型
（布局，就是设置盒子的位置 和 大小）
（元素就是由一个个盒子组成，我们做布局，就是将盒子放在不同的位置）
1.盒子模型(元素的本质)
-css将页面中的所有元素都设置为了一个矩形的盒子
-将元素设置为矩形的盒子后，对页面的不加就变成将不同的盒子摆放到不同的位置
-说白了，布局，就是设置盒子的位置 和 大小
-每一个盒子都由以下几个部分组成
内容区（元素里面的 子元素 和 标签体）
内边距（内容区到边框之间的空隙）
边框（边框以外的就不属于盒子了）
外边距（两个盒子之间的距离）
2.内容区(content)
-元素中的所有子元素和文本都在内容区中排列
-内容区的大小由 width 和 height两个属性来设置
-内容区的大小会影响整个盒子的大小
3.边框(border)
-边框属于盒子的边缘，边框里面属于盒子内部，出了边框是盒子的外部
要设置边框至少需要设置3个样式(即三个都设置了边框显示才生效，三个缺一不可)
-边框的颜色 border-color
-边框的宽度 border-width
-边框的样式 border-style
-边框的大小会影响整个盒子的大小
-边框样式详解
1.border-width可以用来指定4个方向的边框的宽度
值的情况
4个值：上 下 左 右
3个值：上 左右 下
2个值：上下 左右
1个值：上下左右
2.除了border-width还有一组 border-xxx-width
xxx可以是 top right bottom left
用来单独指定某一个边的宽度
3.剩下2个border样式同理
4.border简写属性，通过该属性可以同时设置边框所有相关样式，并且没有顺序要求
（一般这个最常用）
border:width color style
5.除了border以外，还有四个 border-xxx
4.内边距(padding)
-和 边框一样设置即可
-注意：
-内边距会影响到盒子的大小
-背景颜色会延伸到内边距上
-盒子可见框大小，由内容区 内边距 边框共同决定，
不可见框就是外边距，虽然不属于盒子的大小，但是是盒子的实际占用空间
5.外边距（margin）
-外边距不会影响盒子可见框的大小，会影响盒子实际的占用空间
-盒子的实际占用空间，由外边距 + 盒子实际大小 组成
-但是外边距会影响盒子的位置
-一共由四个方向的外边距
margin-top
-上外边距，设置一个正值，元素会向下移动
margin-right(一般也不设置，由浏览器自动补全)
-默认情况下设置margin-right不会产生任何效果
margin-bottom
-下外边距，设置一个正值，其下边距的元素会向下移动
margin-left
-左外边距，设置一个正值，元素会向右移动
-margin可以设置负值，如果是负值，元素会向相反的方向移动
-元素在页面中是按照从左向右的顺序排列的，
所以默认情况下如果我们设置的 左 和 上 则会移动元素本身
而设置 下 和 右 边距 则会移动 其他元素
-margin的简写属性
margin 可以同时设置4个方向的外边距，用法和padding一样
-margin会影响到盒子的实际占用空间
6.水平方向布局
1.子元素在父元素的 内容区中存在
2.一个元素在其父元素中，水平布局必须满足以下等式
左外边距+左边框+左内边距+内容区+.....(宽度) = 其父元素内容区的宽度
3.以上等式必须满足，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
-调整情况：
-如果这7个值中没有为 auto 的情况，则浏览器会自动调整 margin-right值
以使等式满足
-这7个值中有三个值可以设置成 auto
width
margin-left
margin-right
-如果某个值为 auto，则会自动调整为 auto 的那个值以使等式成立
-如果将一个宽度和一个外边距设置成 auto,则宽度会调整到最大，设置为auto的外边距自动为0
-如果将三个值都设置为auto，则外边距都是0，宽度最大
-如果将两个外边距设置为auto，宽度固定值，则会将外边距设置外相同的值
所以我们经常利用这个特点来使一个元素在其父元素居中位置
示例：
width：xxxpx;
margin:0 auto;
7.垂直方向布局
1.默认情况下，父元素的高度被内容撑开
2.子元素是在父元素的内容区中排列的
如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用 overflow 属性来设置 父元素如何处理溢出的 子元素
可选值
visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出内容将会被裁剪
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条
8.垂直外边距的重叠
相邻的垂直方向外边距会发生重叠现象
-兄弟元素
-兄弟元素间得相邻垂直外边距会取两者之间得较大值（两者都是正值）
-特殊情况，
如果相邻得外边距 一正一负，则取两者的和
如果相邻的外边距都是负值，则取两者中绝对值较大的
-兄弟元素之间的外边距的重叠，对于开发是有力的，所以我们不需要继续处理
-父子元素
-父子元素之间相邻外边距，子元素的会传递给父元素(上外边距)
-父子外边距的折叠会影响到页面的布局，必须要进行处理
9.行内元素的盒子模型
-行内元素不支持设置宽度和高度
-行内元素可以设置padding，border，margin，但是垂直方向不会影响布局
10.display 用来设置元素显示的类型
可选值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置成行内块元素
行内块，既可以设置宽度高度，又不会独占一行
table 将元素设置成一个表格
none 元素不在页面中显示
11.visibility 用来设置元素的显示状态
可选值：
visible 默认值
hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置
12.浏览器的默认样式
-通常情况，浏览器都会为元素设置一些默认样式
-默认样式的存在会影响到页面的布局，
通常情况下编写网页时必须要去除浏览器的默认样式
-去除方式有三种(主要是 margin 和 padding)
1.style标签手动去除
2.重置样式表（专门用来对浏览器的样式进行重置的）
-reset.css 直接去除浏览器的默认样式(用的最多)
-normalize.css 对默认的样式进行了统一
13.盒子的大小
由 box-sizing来决定，用来设置盒子尺寸的计算方式(设置width和height的作用)
-content-box 默认值，宽度和高度用来设置内容区的大小
-border-box 宽度和高度用来设置整个盒子可见宽的大小
-width 和 height 指的是内容区 和 内边距 和 边框的总大小
14.元素盒子阴影
box-shadow 用来设置阴影效果，阴影不会影响页面布局
值：
-第一个:水平偏移量
-第二个：垂直偏移量
-第三个：阴影的模糊半径
-第四个：阴影的颜色
例子：
box-shadow: 0px 0px 50px rgba(0,0,0,.3)
15.元素的轮廓线
outline 用来设置元素的轮廓线，用法和border一摸一样
轮廓和边框的不同的点，就是轮廓不会影响到可见框的大小
16.圆角
border-radius:用来设置圆角 圆角设置的圆的半径大小
16.浮动(浮动的目的目前目前来讲的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局)
使用浮动可以让一个元素向其父元素的左侧或右侧移动
使用float属性来设置元素的浮动
可选值：
none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动
注意，元素设置浮动后，水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置
所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点：
1.浮动的元素会完全脱离文档流，不会再占用文档流中的位置
2.设置浮动以后元素会向父元素的左侧或右侧移动，
3.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6.浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
12.BFC 块级格式化环境
1.解决 高度塌陷问题
（在浮动布局中，父元素的高度默认是被子元素撑开的，我们一般
不会把父元素高度设定死，所以这就出现了问题，子元素浮动后
无法撑起父元素的高度，导致父元素的高度丢失
父元素高度丢失后，旗下的元素会自动上移，导致页面布局混乱）
2.BFC是一个CSS中的一个隐含的属性，可以为一个元素开启
-开启BFC该元素会变成一个独立的布局区域
-开启BFC后的特点：
1.开启BFC的元素不会被浮动元素覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
-可以通过一些特殊方式开启元素的BFC
1.设置元素的浮动(不推荐)
2.将元素设置为行内块元素(不推荐)
3.将元素的overflow设置为一个非visible的值
-常用方式 为元素设置 overflow:hidden 开启BFC
13.clear
如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过
clear属性来清除浮动元素对当前元素所产生的影响
clear:
-作用：清除浮动元素对当前元素所产生的影响
-可选值：
left 清除浮动元素对当前元素所产生的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧
-原理：
设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响
14.最终解决浮动带来的高度塌陷 和 外边距重叠的问题的方案
clearfix 这个样式类，可以同时解决高度塌陷和外边距重叠的问题，直接使用即可
.clearfix::before,.clearfix::after
{
content: '';
display: table;
clear: both;
}
17.定位(比盒子模型，浮动，能够更好的布局，并且不会影响其他元素的布局)
1.定位(position)
-定位是一种更高级的布局手段
-通过定位可以将元素摆放到页面的任意位置
-使用position属性来设置定位
可选值：
static 默认值，元素是静止的没有开启定位
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
-相对定位
- 当元素的position属性值设置为relative时则开启了元素的相对定位
- 相对定位的特点：
- 1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
- 2.相对定位是参照于元素在文档流中的位置进行定位的(即元素偏移前的位置)
- 3.相对定位会提升元素的层级(即覆盖的话，覆盖层级低的元素)
- 4.相对定位不会让元素脱离文档流
- 5.相对定位不会改变元素的性质，块还是块，行内还是行内
- 偏移量（offset）
- 当元素开启了定位以后，可以通过偏移量来设置元素的位置
top
- 定位元素和定位位置上边的距离
bottom
- 定位元素和定位位置下边的距离
- 定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下我们只会使用其中一个
- top值越大，定位元素越向下移动
- bottom值越大，定位元素越向上移动
left
- 定位元素和定位位置的左侧距离
right
- 定位元素和定位位置的右侧距离
- 定位元素水平方向的位置由left和right两个属性控制，通常只会使用一个
- left越大元素越靠右
- right越大元素越靠左
- 绝对定位(四种定位中用的最多)
- 当元素的position属性值设置为absolute时，则开启了元素的绝对定位
- 绝对定位的特点：
1.开启绝对得后，如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后，元素会从文档流中脱离
3.绝对定位会让一个元素提升一个层级
4.绝对定位会改变元素的性质，行内变成块，块的高度被内容撑开
5.绝对定位元素是相对于其包含块进行定位的
-包含块
- 正常情况下
包含块就是高于当前元素最近的祖先块元素
- 绝对定位的包含块：
包含块就是高于它最近开启了定位的祖先元素，
如果所有的祖先元素都没有开启定位则根元素就是他的包含快
水平布局
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=包含区的高度
- 当我们开启了绝对定位后：
水平方向得布局等式就需要添加 left 和 right 两个值
此时规则和之前一样只是多添加了两个值：
当发生过度约束：
如果9个值中没有 auto 则自动调整 right值以使等式成立
如果有auto,则自动调整auto得值以使成立
- 可设置auto得值
margin width left right
- 因为left 和 right的值默认是auto,所以如果不知道left和right
则等式不成立时，会自动调整这两个值
垂直方向布局的等式的也必须满足
top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度
-html（根元素，初始包含块）
- 固定定位
- 将元素的position属性设置为 fixed 则开启了 元素的固定定位
- 固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对得一样
唯一不同的是固定定位永远参照于浏览器的视口进行定位
固定得得元素不会随网页得滚动条滚动
- 粘滞定位
- 当元素得position属性设置为 sticky 时则开启了元素得粘滞定位
- 粘滞定位和相对定位得特点基本一致
不同得是粘滞得可以在元素到达某个位置时将其固定
- 元素的层级
对于开启了定位元素，可以通过z-index属性来指定元素的层级，z-index
需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示
如果元素的层级一样，则有限显示靠下的元素
祖先的元素的层级再高也不会盖住后代元素
18.字体和背景
1.字体相关的样式
color
font-size
和font-size相关的单位
em 相当于当前元素的一个font-size
rem相当于根元素的一个font-size
font-family 字体族(字体的格式)
可选值：
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
- 指定字体的类别，浏览器会自动使用该类别下的字体
- font-family 可以同时指定多个字体，多个字体间使用，隔开
字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推
2.@font-face{
/* 指定字体的名字 */
font-family:'myfont';
/* 服务器中字体的路径*/
src: url().....
}
-问题：
1.加载速度
2.版权
3.字体格式
3.图标字体（iconfont）
- 在网页中经常需要使用一些图标，可以通过图片来引入图标
但是图片大小本身比较大，而且非常的不灵活
- 所以在使用图标时，我们还可以将图标直接设置为字体，
然后通过font-face的形式来对字体进行引入
- 这样我们就可以通过使用字体的形式来使用图标
fontawesome 使用步骤
1. 下载 https://fontawesome.com
2. 解压
3. 将css和webfonts移动到项目中
4. 将all.css引入到网页中 用link标签，里面有 class = fas...的选择器
5. 使用图标字体
- 直接通过类名来使用图标字体
class="fas fa-bell"
class="fab fa-accessible-icon"
核心图标字体，就是line引入 css字体库，然后我们html的标签 引用这些个字体库里面的选择器即可
4.行高
- 行高指的是文字占有的实际高度
- 可以通过line-height来设置行高
行高可以直接指定一个大小(px em)
也可以直接为行高设置一个整数
如果是一个整数的话，行高将会是字体的指定的倍数
- 行高经常用来设置文字的行间距
字体框
- 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
行高会在字体框的上下平均分配
5.文本的样式
vertical-align 设置元素垂直对齐的方式
可选值：
baseline 默认值 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
white-space 设置网页如何处理空白
可选值：
normal 正常
nowrap 不换行
pre 保留空白
6.背景
- backgroud-color 设置背景颜色
- backgroud-image 设置背景图片
- 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片
- 如果背景的图片小于元素，则背景图片会自动在元素中平铺折叠
- 如果背景的图片大于元素，将会一个部分背景无法完全显示
- 如果背景图片和元素一样发，则会直接正常显示
- backgroud-repeat 用来设置背景的重复方式
可选值：
repeat 默认值，背景会沿着x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复
- backgroud-position 用来设置背景图片的位置
设置方式：
通过 top left bottom center 几个表示范围的
使用方位词必须要同时使用两个值
通过偏移量指定背景图片的位置：
水平方向的偏移量 垂直方向变量
19.html 表格
1.table中使用tr表示表格中的一行，有几个tr就有几行
2.在tr中使用td表示一个单元格，有几个td就有几个单元格
3.td中的 rowspan 纵向的合并单元格
4.td中的 colspan 横向的合并单元格
5.除了 table tr td标签外还有几个 不常用的标签
-thead,tbody,tfoot 可以代表头部，主题，脚部
这几个标签通常包住tr，好处就是 这几个标签使用后，就和 tr的顺序，没啥关系了
还有一个 th 可以代替 td 主要是 加粗
20.html表单
1.表单：
- 在现实生活中表单用于提交数据
-form的属性
action 请求地址
method 请求方式
hidden 隐藏域
(隐藏只是在网页页面上不显示输入框，但是虽然隐藏了，还是具有form传值功能。
一般用来传值，而不必让用户看到。)
-input的属性（用于传给服务器的值）
type （input框的类型）
- text 文本框
- submit 提交按钮
- passoword 密码框
- radio 单选框
- checkbox 多选框
- reset 重置框
- button 按钮框 没有作用，要结合js使用
name （input框 的 key）
value (input框 的 value，可以输入值的 input 可以不用显示指定value,因为输入的值默认就是value)
checked (对于多选单选等 可以设置默认选中)
autocomplete 自动补全
readonly 只读，数据会提交
disabled 禁用，数据不会提交
autofocus 自动获取焦点
hidden 隐藏域，页面不显示，但是数据会提交
- select 下拉列表
属性 name （key）
-option 下拉项 value（value）
- button和input的区别
没有区别，只是button是双标签，input是单标签，双标签可以有标签体
对于功能的设计来说，有更多的可能性