前端
前端
任何与用户直接打交道的操作界面都可以称之为前端
比如:电脑界面 手机界面 平板界面
什么是后端
后端类似于幕后操作者(都是代码)
不直接跟用户打交道
为什么学前端
要求看懂基本前端代码以及能够搭建一些简单的页面即可
先打基础 为后续可能扩展做准备
学习历程
HTML 网页的骨架 没有任何样式
CSS 给骨架添加各种样式 变得好看 美化HTML
JS 控制网页的动态效果
前端框架：BOOTSTRAP JQuery Vue
浏览器窗口输入网址 回车 发生了什么
1.浏览器朝服务端发送请求
2.服务端接收请求
3.服务端返回相应的相应(返回一个百度首页)
4.浏览器接收响应 根据特定的规则渲染页面展示给用户看
HTTP协议
超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式。。。
该协议可以不遵循 到那时你写的客户端就不能被浏览器正常访问 自己跟自己玩 用户想使用就下载你自己专门的APP即可
四大特性：
1.基于请求响应
2.基于tcp/ip作用于应用层之上的协议
3.无状态
不保存用户的信息
4.无/短链接
请求来一次响应一次 之后二者就没有任何链接和关系了
长链接：
双方建立连接之后默认不断开 websocket
#请求数据格式
请求首行(标识HTTP协议版本，当前请求方式)
请求头(一大堆k，v键值对)
\r \n #不能省略
请求体(并不是所有的请求方式都有,get没有post有,存放的是post请求提交的敏感数据：用户名 密码等)
#响应数据模式
响应首行(标识HTTP协议版本，响应状态码)
响应头(一大堆k，v键值对)
\r \n #不能省略
响应体(返回给浏览器展示给用户看的数据)
#响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息
1xx:服务端已经成功接收了你的数据正在处理，你可以继续提交额外的数据
2xx:服务端成功响应了你想要的数据(200 ok 请求成功)
3xx:重定向 访问一个需要登录之后才能看的页面 自动跳转到登录页面
4xx:请求错误 404：请求资源不存在 403：当前请求不合法或者不符合访问资源的条件
5xx:服务器内部错误(500 机房着火 出bug)，与客户端没关系
#请求方式
1.get请求
朝服务端要数据
eg：输入网址获取对应的内容
2.post请求
朝服务端提交数据
eg：用户登录 输入用户名和密码之后 提交到服务端后端做身份校验
#url：统一资源定位符(网址)
HTML
网页的骨架
HTML是一种标记语言，是一种用于创建网页的标记语言，它不是一种编程语言。
如果你想要让浏览器能够渲染出你写的页面 你就必须遵循HTML语法
我们浏览器看到的页面，内部其实都是HTML代码
网页文件的扩展名：.html或.htm
<h1>hello baby~</h1>
<a href='https://www.mzitu.com/'>AAA</a>
HTML就是书写网页的一套标准
<!--单行注释-->
<!--
多行注释1
多行注释2
多行注释3
-->
HTML文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>声明为HTML文档。
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。
包含了文档的元（meta）数据。head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
<title>、</title>定义了网页标题，在浏览器标题栏显示。
<body>、</body>之间的文本是可见的网页主体内容。body内的标签 写什么浏览器就渲染什么 用户就能看到什么。
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。
有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
文件的后缀名是给用户看的，只不过对应不同的文件后缀名又不用的软件来处理并添加很多功能
HTML文件是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代
标签的分类
1.双标签 <h1></h1>2.单标签( 自闭和 标签) <a href='https://www.mzitu.com/'></a>
几个常用属性
id：定义标签的唯一ID，HTML文档树中唯一class：为html元素定义一个或多个类名（classname）(CSS样式类名)style：规定元素的行内样式（CSS样式）
head内常用的标签
<title>Title</title>
定义网页标题为Title<style></style>
定义内部样式表<script></script>
定义JS代码或引入外部JS文件<link/>
引入外部样式表文件或网站图标 css文件<meta/>
定义网页原信息，告诉浏览器要干啥<style> h1{ color:greenyellow; }</style>
内部用来书写CSS代码
<script> alert(123)</script> 内部用来书写js代码<script scr='myjs.js'></script>
还可以引入外部js文件<link rel='stylesheet' href='mycss.css'>
引入外部css文件<meta >
告诉浏览器要干啥keywords 淘宝 商品 等等搜索关键字当你在用浏览器搜索的时候
只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户description网页的描述性信息简易操作：ol>li{$}*3
结果如下<ol> <li>1</li> <li>2</li> <li>3</li></ol>
body内常用标签
基本标签<h1>我是h1</h1>
一级标题
<h2>我是h1</h2>
<h3>我是h1</h3>
<h4>我是h1</h4>
<h5>我是h1</h5>
<h6>我是h1</h6>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<p>段落标签</p>
<br>换行 <hr>水平分割线标签的分类2
1.块儿级标签:独占一行 h1-h6 p div
2.行内标签：自身文本多大就占多大 i u s b span input
(1)行内标签可以修改长宽，行内标签不可以 修改了也不会变
(2)块级标签可以套所有的块级标签和行内标签，但是p标签不能嵌套块级元素和p标签，可以套行内标签
(3)行内标签可以嵌套行内标签，但是不能嵌套块级标签
特殊符号
空格>
大于号<
小于号&
&符号¥
¥©
©版权® ®
div标签和span标签
页面布局 先用div和span占位然后再去调整样式div
块级标签可以把它看成一块区域 先用div规定好区域
之后再在区域内填写东西span
行内标签普通文本先用span标签块级元素与行内元素的区别：所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。
如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。
img标签
图片标签<img src="" alt="" title="" height="" width="">alt:
当图片加载不出来的时候，输出alt后面的内容title:当鼠标悬浮到图片上后
自动展示的提示信息heightwidth高度和宽度 当只修改一个参数时 另一个参数会等比例缩放如果修改两个参数 并且不考虑参数的问题
图片可能会失真
CSS:层叠样式表，用来给网页骨架增加样式，使得网页变得更加好看
a标签
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
举例
http://www.sohu.com/stu/intro.html
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
<a href="" target="_self"></a>
href
绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）
放的是url，用户点击就会跳转到url页面
放其他标签的id值 点击即可跳转到对应的标签位置
锚点功能
点击一个文本标题 页面自动跳转到标题对应的内容区域
target
默认是target="_self" 当前页面跳转
"_blank"新建页面跳转
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>
列表标签
无序列表（较多）
<ul type=""> 没序号
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
有序列表（了解）
<ol type="1" start="5"> 序号从5开始
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
标题列表（了解）
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
</dl>
表格标签
属性:
border: 表格边框. <table border="1">
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行 <td rowspan="2">DBJ</td>
colspan: 单元格横跨多少列（即合并单元格） <td colspan="2">egon</td>
<table border="1" cellpadding="5" cellspacing="5">
<thead>
<tr> 一个tr就代表一行
<th>username</th> 加粗文本
<th>password</th>
<th>hobby</th>
</tr>
</thead> 表头（字段信息）
<tbody> 表单（数据信息）
<tr>
<td>jason</td> 正常文本
<td>123</td>
<td>read</td>
</tr>
<tr>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
</tr>
<tr>
<td>tank</td>
<td>123</td>
<td>tea</td>
</tr>
</tbody>
</table>
表单标签
表单属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。
能够获取前端用户数据（永不输入的、选择的等等）基于网络发送给后端服务器
form功能：
1.表单用于向服务器传输数据，从而实现用户与Web服务器的交互
2.表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
3.表单还可以包含textarea、select、fieldset和 label标签。
文本框 选择 表单分组 标签
表单工作原理：
表单一般用来收集用户的输入信息
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
<form action=""></form>
action：控制数据提交的后端路径
1.什么都不写 默认朝当前页面所在的url提交数据
2.写全路径 写哪里提交到哪里
3.只写路径后缀action='index'
自动识别出当前服务端的ip和port拼接到前面
host:port/index/
第一种 直接将input框卸载label内
<label for="d1">
username:<input type="text" id="d1">
</label>
第二种 通过id链接即可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
input 可以不跟 label 关联
label和input都是行内标签
input
<input> 元素会根据不同的 type 属性，变化为多种形态。
没有指定按钮的文本内容 不同的浏览器打开之后可能渲染的文本内容不一致
type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" />
radio 单选框 <input type="radio" />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置" />
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" />
属性说明:
name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
type="button", "reset", "submit"时，为按钮上显示的文本年内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用
redio：单选
默认选中要加checked="checked"
<input type="radio" name="gender" checked="checked">男
当标签的属性名和属性值一样的时候可以简写
<input type="radio" name="gender" checked>女
checkbox：多选
<input type="checkbox" checked>DBJ
<input type="checkbox" checked>JBD
file:获取文件 也可以一次性获取多个
<input type="file" multiple>
select标签
属性说明：
multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
<p>前女友:
<select name="" id="" multiple>
<option value="" selected>新垣结衣</option>
<option value="">斯佳丽</option>
<option value="">明老师</option>
</select>
</p>
label标签
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
textarea标签
属性说明：
name：名称
rows：行数
cols：列数
disabled：禁用
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
textarea标签 获取大纲文本
能够触发form表单提交数据的按钮有哪些
1.<input type="submit" value="注册">
2.<button>点我</button>
所有获取用户输入的标签 都应该有name属性
name就类似于字典的key
用户输入的数据就类似于字典的value
CSS
CSS:层叠样式表，用来给网页骨架增加样式，使得网页变得更加好看
css语法结构:
css的三种引入方式
1.styke标签直接书写
2.link标签引入外部css文件
3.行内式 （一般不用）
选择器{
属性名1：属性值1；
属性名2：属性值2；
属性名3：属性值3；
属性名4：属性值4；
属性名5：属性值5；
}
link
hover
active
visited
基本选择器
ID选择器
#i1 {
background-color: red;
}
类选择器
.c1 {
font-size: 14px;
}
p.c1 {
color: red;
}
注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
元素选择器
p {color: "red";}
通用选择器
* {
color: white;
}
组合选择器
后代选择器
/*li内部的a标签设置字体颜色*/
li a {
color: green;
}
儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}
毗邻选择器 （同级别紧挨着的下面第一个）
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
margin: 5px;
}
弟弟选择器（同级别下面所有的p标签）
/*i1后面所有的兄弟p标签*/
#i1~p {
border: 2px solid royalblue;
}
属性选择器
属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
分组和嵌套
分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
div, p {
color: red;
}
上面的代码为div标签和p标签统一设置字体为红色。
嵌套
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。
.c1 p {
color: red;
}
伪类选择器
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 鼠标移动到链接上 */ （必须记住）（鼠标悬浮态）
a:hover {
color: #FF00FF
}
/* 选定的链接 */ （激活态，点击不松开的状态）
a:active {
color: #0000FF
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/*input输入框获取焦点时样式*/（后面会用）
input:focus {
outline: none;
background-color: #eee;
}
伪元素选择器
first-letter
常用的给首字母设置特殊样式：
p:first-letter {
font-size: 48px;
color: red;
}
before
/*在每个<p>元素之前插入内容*/ 在文本开头 同css添加内容 是无法被选中的
p:before {
content:"*";
color:red;
}
after
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
before和after多用于清除浮动带来的影响：多用于处理父标签塌陷的影响。
选择器的优先级
选择器相同时，就近原则
选择器不同时 行内选择器>id>类>标签
精确度越高越有效
除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。
CSS属性相关
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。
字体属性
文字字体
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
大白话：修改字体样式 第一个不生效就后一个
字体大小
p {
font-size: 14px;
}
字重（粗细）
font-weight用来设置字体的字重（粗细）。
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
color:rgba(255,0,0,0.3)
文字属性
文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
值 描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐
文字装饰
text-decoration 属性用来给文字添加特殊效果。
值 描述
none 默认，定义标准的文本，没有任何样式。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。
常用的为去掉a标签默认的自划线：
a {
text-decoration: none;
}
首行缩进
将段落的第一行缩进 32像素：
p {
text-indent: 32px;
}
背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
background-attachment:fixed; 背景图片不动
简写
background:#336699 url('1.png') no-repeat left top;
边框
边框
border： 粗细 样式 颜色
设置单独一条边框
border-top
border-bottom
border-left
border-right
取消边框
border：none / 0
边框粗细
border-width
border-top -width
边框样式
border-style：{
solid 实线
deshed 虚线
dotted 点线
double 双线
}
border-top -style
边框颜色
border-color
border-top -color
边框变形
border-radius; 圆形
border-radius:200px;椭圆
border-radius:50%; 直接写50%即可长宽一样就是圆 不一样就是椭圆
display
dispaly：none; 隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上。位置也不在了 hidden:单纯的隐藏，留有位置。
dispaly: inline;将标签设置为行内标签的特点，无法修改长宽
display: block;将标签设置成块级标签的特点
display: inline-block让标签既可以在一行显示又可以设置长宽
CSS盒子模型
margin: 外边距，用于控制元素之间的距离; margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的
padding: 内边距，用于控制内容与边框之间的距离
Border(边框):围绕在内边距和内容外的边框
Content(内容):盒子的内容，显示文本和图像
margin外边距
1、 margin是设置盒子与盒子之间的位置关系
2、边框线以外的距离都可以设置margin
3、使用margin
单一方向margin
margin-left
margin-right
margin-top
margin-bottom
多个方向margin
1个值 4个方向
2个值 上下 左右
3个值 上 左右 下
4个值 上 右 下 左
margin-left:
正值 右移动
负值 左移动
margin-top
正值 下移动
负值 上移动
4、让块元素水平居中（内联元素不起作用）
margin：0 auto
内边距padding
1、控制盒子与内容之间的位置关系
2、边框线以内的距离都可以设置padding
3、内边框会撑大盒子，如果设置padding，让盒子不变形，加上多少padding，盒子的宽高就需要减去多少padding
4、padding的设置
单一方向padding
padding-left
padding-right
padding-top
padding-bottom
多个方向padding
1个值 4个方向
2个值 上下 左右
3个值 上 左右 下
4个值 上 右 下 左
5、padding不能设置负值
盒模型的计算
盒子的总高度=height+上下的padding+上下的border
盒子的总宽度=width+左右的padding+左右的border
浮动（float clear）
#d1{
height:200px;
width:200px;
background-color: red;
float:left;
}
float:left;向左浮动
浮动造成的影响：
会造成父标签塌陷的问题
clear：left 该标签的左边不能有浮动的元素
.clearfix:after{
content:'';
display:block;
clear:both;
}
只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
清除浮动的几种方法：
方法一：
给浮动的盒子的父盒子添加一个高度，因为浮动盒子不能撑开父盒子，那么我们给父盒子加上高度就从根本上解决了这一个问题，
缺点：图片浮动，给定图片盒子一个宽度，导致其高度是等比例缩放的，这一个高度值有很大的几率是很难计算出来的，这种情况就不能使用手动给定高度这一方法
方法二：
额外标签法，
在父盒子中，所有的浮动盒子之后添加一个额外的标签，
.clear { clear: both; } 缺点，一个页面可能有很多地方需要清除浮动，这样就需要使用很多无用的标签
方法三：
给浮动盒子的父盒子也使用浮动，这样浮动的盒子就能撑开其父盒子
缺点：虽然给父盒子使用浮动能够达到清除内部浮动元素的目的，但是整体浮动同样会影响到页面的布局
方法四：
使用CSS的overflow属性
给浮动盒子的父盒子添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
方法五：
使用CSS的:after伪元素
结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
.clearfix:after{
content: “”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
五星推荐使用
溢出
overflow溢出属性
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）
定位(relative、absolute、fixed)
静态
所有的标签默认都是静态的，无法改变位置
relative（相对定位） position:relative
相对于标签原来的位置做移动
absolute（绝对定位）
相对于已经定位过的父标签移动（如果没有父标签name就以body为参照）
没有父标签就参照body
fixed（固定定位）
相对于浏览器窗口固定在某个位置
验证浮动和定位是否脱离文档流
脱离文档流
浮动
绝对定位
固定定位
不脱离文档流
相对定位
z-index模态框
百度登录页面其实是三层结构
1.最底部是正常内容(z=0) 最远的
2.黑色的透明区(z=99) 中间层
3.白色的注册区域(z=100) 离用户最近
透明度opacity
rgba智能影响颜色
opacity用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
opacity:0.5;
z-index模态框
百度登录页面其实是三层结构 1.最底部是正常内容(z=0) 最远的 2.黑色的透明区(z=99) 中间层 3.白色的注册区域(z=100) 离用户最近
透明度opacity
rgba智能影响颜色opacity用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。opacity:0.5;
浙公网安备 33010602011771号