想不想自己动手写一个这样的静态页面呢？
米哈游静态页面：GitHub - xhnssgusni/firstProject
王者荣耀静态页面：GitHub - xhnssgusni/pcDemo: 模拟王者荣耀静态页面
想的话，那就和我一起开始学习吧！
下面内容比较全面，但是不一定每一个都要掌握，掌握常见的知识点就行啦！
对简单html结构的解释说明：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置编码格式，常见的UTF8和GBK
如果你希望支持多种语言和字符集，特别是包含非拉丁字母的字符，UTF-8 是更通用和推荐的编码方案。但如果你的应用场景主要涉及中文字符，GBK 编码可能会略微节省一些存储空间。-->
<meta charset="UTF-8" />
<!-- 这句话表示是同IE最高渲染版本，可以解决一些兼容性问题 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 理想视口设置，在移动端中会使用 -->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,user-scalable=0"
/>
<!-- 网页的标题 -->
<title>Document</title>
</head>
<!-- 内容区部分 -->
<body></body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- 需要来告诉浏览器，网页所采用的编码字符集
meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介
meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个/
-->
<meta charset="utf-8" />
<title>网页的标题</title>
</head>
<body>
<h1>张三，20</h1>
</body>
</html>
h1 ~ h6，标题标签，重要性依次降低。在搜索引擎中，h1的重要性仅次于title，搜索引擎检索完title，会立即查看h1中的内容，h1标签非常重要，它会影响到页面在搜索引擎中的排名，页面只能写一个h1。
一般页面中标题标签只使用h1 h2 h3,h3以后的基本不使用
p，段落标签，使用p标签来表示一个段落
p标签中的文字，默认会独占一行，并且段与段之间会有一个间距，块级元素
br，在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签。
在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析。
扩展：设置css样式来拉开元素之间距离，或者使用 （不建议）
hr标签也是一个自结束标签，可以在页面中生成一条水平线
在HTML中，一些如< >这种特殊字符是不能直接使用，
需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）
浏览器解析到实体时，会自动将实体转换为其对应的字符
实体的语法：
&实体的名字;
< <
> >
空格
版权符号 ©
H4中的center标签用于内容居中显示，相当于text-align:center的效果块元素和内联元素
div就是一个块元素，独占一整行。
p h1 h2 h3 ...
div元素主要用来对页面进行布局的
span是一个内联元素（行内元素），只占自身大小的元素，不会占用一行
常见的内联元素：a img iframe span
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，
一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
a元素可以包含任意元素，除了他本身
p元素不可以包含任何块元素常用的选择器
元素选择器（如div）、
id选择器（如#id）、
类选择器（如.class）、
并集选择器（如p div）、
通配选择器（如*）、
交集选择器（如div.test）
其他选择器：
后代元素选择器、
子元素选择器
元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素 使用meta标签还可以用来设置网页的关键字
<meta name="keywords" content="HTML5,JavaScript,前端,Java" />
还可以用来指定网页的描述
搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名
<meta name="description" content="发布h5、js等前端相关的信息" />
使用meta可以用来做请求的重定向
<meta http-equiv="refresh" content="秒数;url=目标路径" />
如<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />1.HTML中不区分大小写,但是我们一般都使用小写
2.HTML中的注释不能嵌套
3.HTML标签必须结构完整，要么成对出现，要么自结束标签
浏览器尽最大的努力正确的解析页面，你所有的不符合语法规范的内容，
浏览器都会为你自动修正，但是有些情况会修正错误
4.HTML标签可以嵌套，但是不能交叉嵌套
5.HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)
使用内联框架可以引入一个外部的页面
使用iframe来创建一个内联框架
属性：
src ：指向一个外部页面的路径，可以使用相对路径
width：
height：
name ：可以为内联框架指定一个name属性
在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索使用超链接可以让我们从一个页面跳转到另一个页面
使用a标签来创建一个超链接
属性：
href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址
a标签中的target属性可以用来指定打开链接的位置
可选值：
_self，表示在当前窗口中打开（默认值）
_blank，在新的窗口中打开链接
可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
center标签中的内容，会默认在页面中居中显示
我们可以将要居中的元素，全都放到center中
center标签已经被H5废弃内部样式
简单理解就是和html结构写在同一个文件中，并且使用style标签包裹，这样写简单方便
<style type="text/css">
p{
color:red;
font-size:40px;
}
</style>
外部样式
通过外部自建一个.css文件，并且使用link标签引入的资源，这样可以在多个页面中引入
可以利用浏览器的缓存加快用户访问的速度提高了用户体验，所以在开发中我们最推荐使用的方式就是外部的
<link rel="stylesheet" type="text/css" href="style.css" />
内联样式
直接写在标签元素身上，写的方便发但是维护难。
内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用的
<p style="color:red;font-size:40px;">锄禾日当午，汗滴禾下土</p>
<p style="color:red;font-size:40px;">谁知盘中餐，粒粒皆辛苦</p>当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
:link
- 表示普通的链接（没访问过的链接）
:visited
- 表示访问过的链接
浏览器是通过历史记录来判断一个链接是否访问过,
由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
:hover伪类表示鼠标移入的状态
:active表示的是超链接被点击的状态
:hover和:active也可以为其他元素设置
IE6中，不支持对超链接以外的元素设置:hover和:active
可以使用::selection为类
注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection使用伪元素来表示元素中的一些特殊的位置
:before表示元素最前边的部分
一般before都需要结合content这个样式一起使用，
后面使用 ::before（css3）和:before（css2） 都可以
.box:before {
content: "";
display: block;
width: 20px;
height: 20px;
background-color: red;
}
通过content可以向before或after的位置添加一些内容
:after表示元素的最后边的部分,这里一样可以使用:after和::after
.box:after {
content: "";
display: block;
width: 20px;
height: 20px;
background-color: red;
}属性选择器
- 作用：可以根据元素中的属性或属性值来选取指定元素，固有属性、自定义属性都可以
- 语法：
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值以包含指定内容的元素
.box[class="box"] {
width: 100px;
height: 100px;
background-color: red;
}
.box[class*="box"] {
width: 100px;
height: 100px;
background-color: red;
}
.box[class^="box"] {
width: 100px;
height: 100px;
background-color: red;
}
.box[class&="box"] {
width: 100px;
height: 100px;
background-color: red;
}
title属性，这个属性可以给任何标签指定
当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示
<div class="box" data-index="info" title="这是一个人">张三</div>子元素选择器
:first-child 可以选中第一个子元素
:last-child 可以选中最后一个子元素
:nth-child 可以选中任意位置的子元素
该选择器后边可以指定一个参数，指定要选中第几个子元素
even 表示偶数位置的子元素
odd 表示奇数位置的子元素
:first-of-type
:last-of-type
:nth-of-type
和:first-child这些非常的类似，
只不过child，是在所有的子元素中排列
而type，是在当前类型的子元素中排列
ul > li:nth-child(1) { background-color: pink;}
ul > li:first-child { background-color: pink;}
ul > li:last-child { background-color: pink;}
ul > li:nth-child(odd) { background-color: pink;}
ul > li:nth-child(even) { background-color: pink;}
ul > li:first-of-type { background-color: pink;}
ul > li:last-of-type { background-color: pink;}
ul > li:nth-of-type(1) { background-color: pink;}后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个
span + p{ background-color: yellow;}
选中后边的所有兄弟元素
语法：前一个 ~ 后边所有
span ~ p{ background-color: yellow;}否定伪类：
作用：可以从已选中的元素中剔除出某些元素
语法：:not(选择器)
p:not(.hello){ background-color: yellow;}在CSS中，祖先元素上的样式，也会被他的后代元素所继承,利用继承，
可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承 边框相关的样式 定位相关的有时设置的样式一多，出现样式不显示的问题，这是因为样式权重（优先级）的问题。
优先级的规则
内联样式 ， 优先级 1000
id选择器，优先级 100
类和伪类， 优先级 10
元素选择器，优先级 1
通配* ， 优先级 0
继承的样式，没有优先级
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，
但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，
则使用靠后的样式。
并集选择器的优先级是单独计算
div , p , #p1 , .hello{}
可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级，
将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important涉及到a的伪类一共有四个：
:link :visited :hover :active
而这四个选择器的优先级是一样的，编写样式时按照这个顺序来，防止样式覆盖
a:link{ color: yellowgreen;}
a:visited{ color: red;}
a:hover{ color: orange;}
a:active{ color: cornflowerblue;}em和strong
- 这两个标签都表示一个强调的内容，
em主要表示语气上的强调,em在浏览器中默认使用斜体显示
strong表示强调的内容，比em更强烈，默认使用粗体显示
<p>今天天气<em>真不错</em>！</p><!-- 相当于设置font-style:italic -->
<p><strong>注意：如果你不认真上课，你就找不到好工作！</strong></p>
<!-- 相当于设置font-weight:bold -->
i标签中的内容会以斜体显示
b标签中的内容会以加粗显示
h5规范中规定，对于不需要着重的内容而是单纯的加粗或者是斜体，就可以使用b和i标签
<p>
<i>我是i标签中的内容</i>
<b>我是b标签中的内容</b>
</p>
small标签中的内容会比他的父元素中的文字要小一些
在h5中使用small标签来表示一些细则一类的内容
比如：合同中小字，网站的版权声明都可以放到small
<p>我是p标签中的内容<small>我是small标签中的内容</small></p>
网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容，比如：书名 歌名 话剧名 电影名
<p><cite>《论语》</cite>是最喜欢的一般的书</p>
q标签表示一个短的引用（行内引用）
q标签引用的内容，浏览器会默认加上引号
blockquote标签表示一个长引用（块级引用）
<p>子曰:<q>学而时习之不亦说乎！</q></p>
<div>
子曰:<blockquote>有朋自远方来，乐呵乐呵！</blockquote>
</div>
使用sup标签来设置一个上标
<p>2<sup>2</sup></p>
<p>赵薇<sup><a href="#">[1]</a></sup></p>
sub标签用来表示一个下标
<p>H<sub>2</sub>O</p>
使用del标签来表示一个删除的内容
del标签中的内容，会自动添加删除线
<p>
<del>17.75</del> <br />
15.54 <br />
</p>
ins表示一个插入的内容
ins中的的内容，会自动添加下划线
<p>我们的老师真<ins>好啊</ins>！</p>
需要页面中直接编写一些代码
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格
code专门用来表示代码
我们一般结合使用pre和code来表示一段代码
<pre>
<code>
window.onload = function(){
alert("Hello World");
};
</code>
</pre>列表就相当于去超市购物时的那个购物清单，
在HTML也可以创建列表，在网页中一共有三种列表：
1.无序列表
2.有序列表
3.定义列表
无序列表
- 使用ul标签来创建一个无序列表
- 使用li在ul中创建一个一个的列表项，
一个li就是一个列表项
通过type属性可以修改无序列表的项目符号
可选值：
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆
注意：默认的项目符号我们一般都不使用！！
如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
ul和li都是块元素
有序列表和无序列表类似，只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
type属性，可以指定序号的类型
可选值：1，默认值，使用阿拉伯数字
a/A 采用小写或大写字母作为序号
i/I 采用小写或大写的罗马数字作为序号
ol也是块元素
列表之间都是可以互相嵌套，可以在无序列表中放个有序列表
也可以在有序列表中放一个无序列表定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表
dl中有两个子标签
dt ： 被定义的内容
dd ： 对定义内容的描述
同样dl和ul和ol之间都可以互相嵌套颜色单位：
1、直接使用单词形式 color:red
2、使用RGB值来表示不同的颜色，RGB值指的是通过Red Green Blue三元色，
不同数值对应不同的颜色，都是0-255，（0，0，0）表示全黑，（255，255，255）表示全白
3、使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，
只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
每组表示一个颜色
第一组表示红色的浓度，范围00-ff
第二组表示绿色的浓度，范围是00-ff
第三组表示蓝色的浓度，范围00-ff
语法：#红色绿色蓝色
十六进制：
0 1 2 3 4 5 6 7 8 9 a b c d e f
00 - ff
00表示没有，相当于rgb中的0
ff表示最大，相当于rgb中255
红色：
#ff0000
像这种两位两位重复的颜色，可以简写
比如：#ff0000 可以写成 #f00
#abc #aabbcc color：设置字体颜色
font-size：设置文字的大小,浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小，
在页面中，每个文字都是处在一个看不见的框中的
我们设置的font-size实际上是设置格的高度，并不是字体的大小
一般情况下文字都要比这个格要小一些，也有时会比格大，
根据字体的不同，显示效果也不能
font-family：指定文字的字体
在网页中将字体分成5大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）
可以将字体设置为这些大的分类,当设置为大的分类以后，
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体font-style可以用来设置文字的斜体
- 可选值：
normal，默认值，文字正常显示
italic 文字会以斜体显示
oblique 文字会以倾斜的效果显示
- 大部分浏览器都不会对倾斜和斜体做区分，
也就是说我们设置italic和oblique它们的效果往往是一样的
- 一般我们只会使用italic
font-weight可以用来设置文本的加粗效果：
可选值：
normal，默认值，文字正常显示
bold，文字加粗显示
该样式也可以指定100-900之间的9个值，
但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果
也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的
font-variant可以用来设置小型大写字母
可选值：
normal，默认值，文字正常显示
small-caps 文本以小型大写字母显示
小型大写字母：
将所有的字母都以大写形式显示，但是小写字母的大写，
要比大写字母的大小小一些。
在CSS中还为我们提供了一个样式叫font，
使用该样式可以同时设置字体相关的所有样式,
可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，
如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式
大小必须是倒数第二个样式
实际上使用简写属性也会有一个比较好的性能在CSS并没有为我们提供一个直接设置行间距的方式，
我们只能通过设置行高来间接的设置行间距，行高越大行间距越大
使用line-height来设置行高
行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，
网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示
行间距 = 行高 - 字体大小
通过设置line-height可以间接的设置行高，
可以接收的值：
1.直接就收一个大小
2.可以指定一个百分数，则会相对于字体去计算行高
3.可以直接传一个数值，则行高会设置字体大小相应的倍数
对于单行文本来说，可以将行高设置为和父元素的高度一致，
这样可以是单行文本在父元素中垂直居中
在font中也可以指定行高
在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值text-transform可以用来设置文本的大小写
可选值：
none 默认值，该怎么显示就怎么显示，不做任何处理
capitalize 单词的首字母大写，通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写
text-decoration可以用来设置文本的修饰
可选值：
none：默认值，不添加任何修饰，正常显示
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline
如果需要去除超链接的下划线则需要将该样式设置为none
letter-spacing可以指定字符间距
letter-spacing: 10px;
word-spacing可以设置单词之间的距离，实际上就是设置词与词之间空格的大小
text-align用于设置文本的对齐方式
可选值：
left 默认值，文本靠左对齐
right ， 文本靠右对齐
center ， 文本居中对齐
justify ， 两端对齐
- 通过调整文本之间的空格的大小，来达到一个两端对齐的目的
text-indent用来设置首行缩进
当给它指定一个正值时，会自动向右侧缩进指定的像素
如果为它指定一个负值，则会向左移动指定的像素,
通过这种方式可以将一些不想显示的文字隐藏起来
这个值一般都会使用em作为单位使用width来设置盒子内容区的宽度，使用height来设置盒子内容区的高度
width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，
盒子可见框的大小由内容区，内边距和边框共同决定
为元素设置边框
要为一个元素设置边框必须指定三个样式
border-width:边框的宽度
border-color:边框颜色
border-style:边框的样式
使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值，则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的
如果指定三个值，则三个值会分别设置给 上 左右 下
如果指定两个值，则两个值会分别设置给 上下 左右
如果指定一个值，则四边全都是该值
除了border-width，CSS中还提供了四个border-xxx-width，xxx的值可能是top right bottom left
专门用来设置指定边的宽度
border-width:10px ;表示四条边都是10px
border-width:10px 20px 30px 40px ;对应边的宽度
设置边框的颜色
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
border-xxx-color
border-color: red;
border-color: red yellow orange blue;
设置边框的样式
可选值：
none，默认值，没有边框
solid 实线
dotted 点状边框
dashed 虚线
double 双线
style也可以分别指定四个边的边框样式，规则和width一致，
同时它也提供border-xxx-style四个样式，来分别设置四个边
border-style: double;
border-style: solid dotted dashed double; 内边距（padding），指的是盒子的内容区与盒子边框之间的距离
一共有四个方向的内边距，可以通过：padding-top、padding-right、padding-bottom、padding-left
来设置四个方向的内边距，内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
盒子的大小由内容区、内边距和边框共同决定。
盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
可见宽的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width外边距指的是当前盒子与其他盒子之间的距离，不会影响可见框的大小，而是会影响到盒子的位置。
盒子有四个方向的外边距：margin-top、margin-right、margin-bottom、margin-left
由于页面中的元素都是靠左靠上摆放的，所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
而如果是设置右和下外边距会改变其他盒子的位置。
外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动。
margin还可以设置为auto，auto一般只设置给水平方向的margin
如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
垂直方向外边距如果设置为auto，则外边距默认就是0
如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，
就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中
外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一样垂直外边距的重叠
- 在网页中相邻的垂直方向的外边距会发生外边距的重叠
所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
.first {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 100px;
}
.second {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 100px;
}
<div class="first"></div>
<div class="second"></div>浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，
所以为很多的元素都设置了一些默认的margin和padding，
而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
清除浏览器的默认样式
*{
表示将所有元素的内外边距都清零，防止影响设置
margin: 0;
padding: 0;
}内联元素不能设置width和height
设置水平内边距,内联元素可以设置水平方向的内边距
padding-left: 100px ;
padding-right: 100px ;
垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局
padding-top: 50px;
padding-bottom: 50px;
内联元素可以设置边框 border: 1px blue solid;
内联元素支持水平方向的外边距
margin-left:100px ;
margin-right: 100px;
内联元素不支持垂直外边距
margin-top: 200px;
margin-bottom: 200px;
右边的元素设置一个左外边距，水平方向的相邻外边距不会重叠，而是求和将一个内联元素变成块元素，通过display样式可以修改元素的类型
可选值：
inline：可以将一个元素作为内联元素显示
block: 可以将一个元素设置块元素显示
inline-block：将一个元素转换为行内块元素
- 可以使一个元素既有行内元素的特点又有块元素的特点，既可以设置宽高，又不会独占一行
none: 不显示元素，并且元素不会在页面中继续占有位置
display: none;
使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
visibility
- 可以用来设置元素的隐藏和显示的状态
- 可选值：
visible 默认值，元素默认会在页面显示
hidden 元素会隐藏不显示
使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，
超出父元素的内容，我们称为溢出的内容
父元素默认是将溢出内容，在父元素外边显示，
通过overflow可以设置父元素如何处理溢出内容：
可选值：
- visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
- hidden, 溢出的内容，会被修剪，不会显示
- scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容
- 该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
- auto，会根据需求自动添加滚动条，
需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加文档流
文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列。
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，
如果希望块元素在页面中水平排列，可以使块元素脱离文档流，使用float来使元素浮动，从而脱离文档流
可选值：
none，默认值，元素默认在文档流中排列
left，元素会立即脱离文档流，向页面的左侧浮动
right，元素会立即脱离文档流，向页面的右侧浮动
当为一个元素设置浮动以后（float属性是一个非none的值），
元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框或者其他的浮动元素
如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，
所以我们可以通过浮动来设置文字环绕图片的效果
其实一开始的浮动目的是用来让文字围绕图片显示的
在文档流中，子元素的宽度默认占父元素的全部。当元素设置浮动以后，会完全脱离文档流。块元素脱离文档流以后，高度和宽度都被内容撑开。
内联元素脱离文档流以后会变成块元素高度塌陷：
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。
所以在开发中一定要避免出现高度塌陷的问题,我们可以将父元素的高度写死，以避免塌陷的问题出现，
但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。
根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context
简称BFC，该属性可以设置打开或者关闭，默认是关闭的。
当开启元素的BFC以后，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC
1.设置元素浮动
- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位
3.设置元素为inline-block
- 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
4.将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。
但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。
在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，
该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题
开启方式很多，我们直接使用一种副作用最小的：
直接将元素的zoom设置为1即可
zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
zoom这个样式，只在IE中支持，其他浏览器都不支持清除浮动：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix{
zoom:1;
}
或者是
.clear{
clear:both;
}
定位：- 定位指的就是将指定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素 - 通过position属性来设置元素的定位
-可选值：
static：默认值，元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
当元素的position属性设置为relative时，则开启了元素的相对定位
1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
2.相对定位是相对于元素在文档流中原来的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质，块还是块，内联还是内联
当开启了元素的定位（position属性值是一个非static的值）时，
可以通过left right top bottom四个属性来设置元素的偏移量
left：元素相对于其定位位置的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上边的偏移量
bottom：元素相对于其定位位置下边的偏移量
通常偏移量只需要使用两个就可以对一个元素进行定位，
一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
当position属性值设置为absolute时，则开启了元素的绝对定位
绝对定位：
1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质，内联元素变成块元素，块元素的宽度和高度默认都被内容撑开
当元素的position属性设置fixed时，则开启了元素的固定定位
固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
不同的是：
固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
IE6不支持固定定位
如果定位元素的层级是一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
层级越高，越优先显示
对于没有开启定位的元素不能使用z-index
设置元素的透明背景
opacity可以用来设置元素背景的透明，
它需要一个0-1之间的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
opacity属性在IE8及以下的浏览器中不支持
IE8及以下的浏览器需要使用如下属性代替
alpha(opacity=透明度)
透明度，需要一个0-100之间的值
0 表示完全透明
100 表示完全不透明
50 半透明
这种方式支持IE6，但是这种效果在IE Tester中无法测试使用background-image来设置背景图片
- 语法：background-image:url(相对路径);
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，
这样背景颜色将会作为背景图片的底色
一般情况下设置背景图片时都会同时指定一个背景颜色
background-repeat用于设置背景图片的重复方式
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat ，背景图片不会重复，有多大就显示多大
repeat-x， 背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复
.box1 {
width: 990px;
height: 32px;
background-color: #bfa;
margin: 50px auto;
/* 设置为背景图片 */
background-image: url(img/bg.gif);
/* 设置水平方向重复 */
background-repeat: repeat-x;
}背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的位置
可选值：
该属性可以使用 top right left bottom center中的两个值
来指定一个背景图片的位置
top left 左上
bottom right 右下
如果只给出一个值，则第二个值默认是center
也可以直接指定两个偏移量，
第一个值是水平偏移量
- 如果指定的是一个正值，则图片会向右移动指定的像素
- 如果指定的是一个负值，则图片会向左移动指定的像素
第二个是垂直偏移量
- 如果指定的是一个正值，则图片会向下移动指定的像素
- 如果指定的是一个负值，则图片会向上移动指定的像素
background-attachment用来设置背景图片是否随页面一起滚动
可选值：
scroll，默认值，背景图片随着窗口滚动
fixed，背景图片会固定在某一位置，不随页面滚动
不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
当背景图片的background-attachment设置为fixed时，
背景图片的定位永远相对于浏览器的窗口/*设置一个背景颜色*/
/*background-color: #bfa;*/
/*设置一个背景图片*/
/*background-image: url(img/3.png);*/
/*设置背景不重复*/
/*background-repeat: no-repeat;*/
/*设置背景图片的位置*/
/*background-position: center center;*/
/*设置背景图片不随滚动条滚动*/
/*background-attachment: fixed;*/
background
- 通过该属性可以同时设置所有背景相关的样式
- 没有顺序的要求，谁在前睡在后都行
也没有数量的要求，不写的样式就使用默认值
background: #bfa url(img/3.png) center center no-repeat fixed;表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，
表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单
在网页中也可以来创建出不同的表格。
在HTML中，使用table标签来创建一个表格
在table标签中使用tr来表示表格中的一行，有几行就有几个tr
在tr中需要使用td来创建一个单元格，有几个单元格就有几个td
rowspan用来设置纵向的合并单元格
colspan横向的合并单元格
设置表格的宽度
table和td边框之间默认有一个距离
通过border-spacing属性可以设置这个距离
border-collapse可以用来设置表格的边框合并
如果设置了边框合并，则border-spacing自动失效
可以使用th标签来表示表头中的内容，
它的用法和td一样，不同的是它会有一些默认效果
有一些情况下表格是非常的长的，
这时就需要将表格分为三个部分，表头，表格的主体，表格底部
在HTML中为我们提供了三个标签：
thead 表头、tbody 表格主体、tfoot 表格底部
这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，
都需要直接写到table中，tr需要写在这些标签当中
thead中的内容，永远会显示在表格的头部
tfoot中的内容，永远都会显示表格的底部
tbody中的内容，永远都会显示表格的中间
如果表格中没有写tbody，浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr表单的作用就是用来将用户信息提交给服务器的
比如：百度的搜索框 注册 登录这些操作都需要填写表单
使用form标签创建一个表单
form标签中必须指定一个action属性，该属性指向的是一个服务器的地址
当我们提交表单时将会提交到action属性对应的地址
使用form创建的仅仅是一个空白的表单，
我们还需要向form中添加不同的表单项
在表单中可以使用fieldset来为表单项进行分组，
可以将表单项中的同一组放到一个fieldset中
在fieldset可以使用legend子标签，来指定组名
使用input来创建一个文本框，它的type属性是text
如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性，name表示提交内容的名字
用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器，url地址?查询字符串
格式：
属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示
在html中还为我们提供了一个标签，专门用来选中表单中的提示文字的
label标签
该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
密码框 - 使用input创建一个密码框，它的type属性值是password
单选按钮 - 使用input来创建一个单选按钮，它的type属性使用radio
- 单选按钮通过name属性进行分组，name属性相同是一组按钮
- 像这种需要用户选择但是不需要用户直接填写内容的表单项，
还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
如果希望在单选按钮或者是多选框中指定默认选中的选项，
则可以在希望选中的项中添加checked="checked"属性
多选框 - 使用input创建一个多选框，它的type属性使用checkbox
在select中可以使用optgroup对选项进行分组，同一个optgroup中的选项是一组
可以通过label属性来指定分组的名字。在下拉列表中使用option标签来创建一个一个列表项
使用textarea创建一个文本域
提交按钮可以将表单中的信息提交给服务器
使用input创建一个提交按钮,它的type属性值是submit
在提交按钮中可以通过value属性来指定按钮上的文字
<input type="reset" />可以创建一个重置按钮，点击重置按钮以后表单中内容将会恢复为默认值
使用input type=button可以用来创建一个单纯的按钮，这个按钮没有任何功能，只能被点击
除了使用input，也可以使用button标签来创建按钮
这种方式和使用input类似，只不过由于它是成对出现的标签，使用起来更加的灵活继续学习前往CSDN
784
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
