html css面试考点

html css 面试考点

1、行内元素、行内块元素、块级元素的区别
块级元素:独占一行
可以嵌套块级 行内 行内块级
可以设置宽高
宽度默认是 100%
行内块级:可以设置宽高 margin 都可以设置
不会独占一行
行内元素:不独占区域
仅靠内容撑开
不可以设置高度或是宽度
但是水平方向上的 padding 和 margin 可以设置 垂直方向上的无效
默认的宽度就是它内容的宽度 只能容纳纯文本或是其他行内元素
2、div 垂直居中的几种方式
1 (不确定当前 div 的高宽)给当前元素的父元素添加相对定位 然后在当前元素设置

1
2
3
4
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)

2 (确定当前 div 的宽度) margin 值为当前 div 宽度宽度一半的负值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.father{
position:relative;


}
.son{
position:absolute;


top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}

一二种方法实质上是一种原理,先将小 div 的左上角垂直居中 再将小 div 的中心点垂直居中
3 (绝对定位方法)绝对定位下,top left right buttom 都设置为 0 margin 设置为 auto

1
2
3
4
5
6
7
8
9
10
11
12
13
.father{
postion:relative;
wifth:100px;

}
.son{
position:absolute;
margin:auto;
top:0;
bottom:0;
right:0;
left:0
}

4 (flex 布局法) 当前 div 的父级添加 flex css 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.father{
postion:relative;
with:100px;

-webkit-display:flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
}
.son{


}

5 (table-cell 法

1
2
3
4
5
6
7
8
9
10
11
.father{


display:table-cell;
vertical-align:center;
}
.son{


display:inline-block;
}

6 (绝对定位)calc 函数动态计算实现水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.father{
position:relative;
width:80vw;
height:80vh;
}
.son{
position:absolute;
width:30vw;
height:30vh;
left: -moz-calc((80vw - 30vw)/2);
top: -moz-calc((80vh - 30vh)/2);
left: -webkit-calc((80vw - 30vw)/2);
top: -webkit-calc((80vh - 30vh)/2);
left: calc((80vw - 30vw)/2);
top: calc((80vh - 30vh)/2);//兼容性写法?
}

3、css 新特性、transform 的值有哪些?animation 用法
css 新特性:transform transtiton animation
transform(变形):scale 放大缩小
translate 平移
rotate 按照一定角度旋转(deg)
matrx 允许用户以像素精度来控制变形效果,看这个解释感觉很抽象,其实就有点像我们在三维空间,通过坐标来定位图形一样,不过这个是一个二维图形,不是三维
transform-origin 修改变形原点(transform-origin:0px 0px)可以用百分比,百分比是参照元素的宽高
transform3d(x,y,z) 从 xyz 轴移动元素
transition(渐变)
<font style="color:#c1788b;">transition:property(需要过度的属性) during(过渡效果是持续时间) timing-function(过渡时速度变化) delay(过渡效果开始前的延迟时间 可选)</font>
animation(动画) 就是是元素从一种样式逐渐转化成另一种样式的过程
`animation:name keeping-time animate-function delay times iteration final

`
name:动画的名字 css3 中采用“关键帧 keyframe”来定义动画。

1
2
3
4
5
6
7
8
@-webkit-keyframes name{
0%{
状态一
}
100%{
状态二
}
}

keeping-time 持续时间 必须带上事件单位。
animate-function 运动方式的贝塞尔曲线,可取的值有 ease ease-in ease-out linear ease-in-out cubic-bezier(num1,num2,num3)。
delay 延迟时间 就算是 0 也必须加上单位。
times 动画执行次数 无单位 indeinite 为无限循环。
interation 如果动画循环播放,循环方式有 alternate(奇数向前播放,偶数向后播放)normal(每次都向前播放)。
final 动画最后时的状态 可以是 backward(回到初始状态) forwards(停在最终状态) none both
在使用的时候要加上前缀(浏览器内核)
4、Css 选择器的优先级顺序
类型选择器
类选择器
id 选择器
5、Cookie、sessionStorage 和 localStorage 的区别
Cookie 由服务器生成的,可以设置失效时间
由浏览器生成的,默认是一次回话的事件
存放 4k 左右的数据
每次都会携带在 http 中,如果存放过多的数据会带来性能问题
需要程序员自己封装,原生的 cookie 接口不友好
localStorage 除非被清除,否则永久保存
sessionStorage 仅在当前会话下有效,关闭页面或浏览器后被清除
localStorage 和 sessionStorage 相同点 一般为 5MB 仅在浏览器中保存,不参与和服务器的通信;原生接口可以接受,也可以自己封装
6、Http 常见状态码
1xx information 接收的请求正在处理
2xx succeess 请求正常处理完毕(三种)
200 OK 客户端的请求被正常处理并返回
204 no center 表示客户端发送的请求得到了成功处理 但是没有资源可以返回
206 Patial Content 表示客户端进行了范围请求 并且服务器成功执行了这部分的 GET 请求,响应报文中包含由 Content-Range 指定范围的实体内容
3xx redirection 重定向(5 种)
301 永久重定向 表示要请求的资源被永久分配到了新的 url 之后应使用新的 url
302 临时性重定向 表示资源被临时分配到了新的 url 本次访问暂时使用新的 url
303 表示应使用 GET 方法获取资源
304 表示客户端发送附带条件的请求时,服务器端允许访问资源,但是请求为满足条件是返回状态码
307 临时重定向,和 303 含义相同 会驯兽浏览器标准,不会从 post 编程 get
4xx client error 客户端请求出错 服务器无法处理请求(4 种)
400 请求报文中存在语法错误
401 未经许可 需要通过 http 认证
403 服务器拒绝这次访问
404 服务器上无法找到请求的资源/服务器拒绝请求但是不想给拒绝原因
5xx server error 服务器请求出错
500 表示服务器在执行请求时发生了错误
503 服务器超负荷或是在维护
7、http 与 https 的区别
1 https 需要到 CA(证书颁发机构)申请证书,一般免费证书比较少,因而需要一定费用
2 http 是超文本传输协议,信息是明文传输,https 是 SSL 加密传输协议加密后传输
3 连接方式不同,端口不同,http 是 80,https 是 443
4 http 的连接很简单,是无状态的,https 协议室友 SSL+http 协议构建的可进行加密传输、身份认证的网络协议,比 http 安全
(无状态的意思是它的数据包的发送、传输和接收都是相互独立的。无连接的意思是双方都不能长久的维持对方的任何信息)
8、IE 盒模型和标准盒模型的区别
ie 盒模型由 margin border padding content 构成
标准盒模型只有内容部分 是独立的

(标准盒模型和怪异盒模型的区别:
1 宽:怪异盒模型:width+左右外边距
标准盒模型:width+左右外边距+左右边框+左右外边距
2 设置宽高:标准盒模型:内容的宽高
怪异盒模型: 边框的宽高

8、 如何理解 BFC? 触发条件?
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有 Block-level box(块)参与, 它规定了内部的 Block-level Box 如何布局,并且与这个区域外部毫不相干。

规则:
1 内部的 box 会在垂直方向,一个接一个的放置
2 box 的垂直方向的距离由 margin 决定,属于同一个 BFC 的 margin 会发生重叠
3 每个元素的 margin box 的左边,与包含 border box 的左边相接触(每个元素的 margin box 的左边都和父元素的 border box 左边相接触)
4 BFC 的区域不会与 float box 重叠
5 BFC 就是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素
6 计算 BFC 的高度是,浮动元素也参与计算

触发条件:
1 根元素
2 float 属性不是 none
3 position 的属性为 absolute 或是 fixed
4 display 属性为 inline-block table-cell table-caption flex inline-flex
5 overflow 部位 visible
9、position 的值有哪些? 区别是什么?
absolute 绝对定位,脱离文档流,依据最近的已经定位(绝对 相对 固定)的元素通过 top left bottom right 定位,当父级的 position 为 static 时,absolute 元素将依据,可以通过 z-index 进行层级分级
relative 相对定位,不脱离文档流,可以通过 top left right bottom 定位 body 根元素定位,可以通过 z-index 进行层级分级
static :自动定位,就是元素在页面普通文档流中由 HTML 自动定位,普通文档中的元素也称为流动元素,不能用 z-index 进行分层
fixed :固定定位,与父元素无关,直接根据浏览器窗口定位,不随滚动条拖动页面而滚动
10、什么时候用到弹性布局,flex 属性的作用?
什么时候用弹性布局:
1 等分页面
2 居中(justify-content:space-around)
3 按比例分割页面
flex 属性的作用:
1 容器属性:flex-direction flex-flow flex-wrap justify-content align-items align-content
2 项目的属性:order flex-grow flex-shrink flex-basis flex align-self
(其中项目属性的 flex 是 flex-grow flex-shrink flex-basis 的简写)
注意: 设置 display:flex 布局以后,子元素的 float clear 和 vertical-align 属性将失效
flex-direction:主轴方向,项目排列方向 row(从左到右) row-reverse(从右到左)column(从上到下)column-reverse(从下到上)
flex-wrap:是否换行,nowrap:不换行 wrap 换行 wrap-reverse 向上换行
flex-flow:flex-direction 和 flex-wrap 属性的简写形式,默认值为 row nowrap
justify-content:项目在主轴上的对齐方式
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐,项目之间的间隔都相等
space-around 每个项目两侧的间隔相等(项目之间的间隔比边框的间隔大一倍)

11、Get、post 的区别
相同点: GET POST 是 http 协议中的两种发送请求的方式,http 的底层是 TCP/IP,所以 GET 和 POST 的底层也是 TCP/IP,即她们的本质上就是 TCP 链接
不同点:1 get 方法传输过程中的数据放在 url 后,用?隔开,post 数据放在 html 包的 request body 中
2 get 提交数据有大小限制,post 没有
3 get 比 post 更加不安全,但是 post 也可以通过 f12 查看,所以差别不大
4 get 发一次包,将 http header 和 data 一起发过去,服务器响应 200
post 发两次包,先发送 header,服务器响应 100,在发送 data,服务器响应 200 ok(返回数据)
在网络上良好的情况下,发一次或是两次包的时间可以基本无视,网络差的时候两次包的 TCP 在验证数据包的完整性上,有很大的优点(不是所有浏览器都会在 post 中发送两次包)
12、什么是精灵图?优点?(这个通常是场景提问:比如问,某个网站很多图片,是引入了很多张图片吗?或者问性能优化可以回答精灵图)
把一个网页的多个图标/图片放在一张图上,再通过 background-image background-repeat background-position 来进行背景定位
优点:解决设计师图片命名问题 更换风格方便
13、从输入 url 到页面加载完成的过程?
1 在浏览器中输入 url
2 浏览器先查看浏览器缓存-系统缓存-路由缓存,如果缓存中有,会直接在屏幕中显示,若果没有,就执行下面操作:
3 在发送 http 请求前,需要通过域名解析获取相应的 IP 地址
4 浏览器向服务器发起 tcp 连接,建立三次握手
5 握手成功后,浏览器向服务器发送 http 请求,请求数据包
6 服务器处理收到的请求,将数据返回至浏览器
7 浏览器收到 http 响应
8 读取页面内容,浏览器渲染,解析 html 源码
9 生成 Dom 树,解析 css 样式,js 交互
10 客户端和服务器交互
11 ajax 查询
14、网络七层协议(OSI)分别是哪 7 层,tcp/udp、http 分别属于哪个层?
应用层
TELNET,HTTP,FTP,NFS,SMTP
表示层
加密 ASCII 等
会话层
RPC SQL 等
传输层
TCP UDP
网络层
IP IPX
数据链路层
ATM FDDI
物理层
Rj45 802.3 等

!%5Bb550089ed07318fb3a08ca7b1bbe47b8.png%5D(en-resource%3A%2F%2Fdatabase%2F2810%3A0)%0A%0A1%E3%80%81%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%E3%80%81%E8%A1%8C%E5%86%85%E5%9D%97%E5%85%83%E7%B4%A0%E3%80%81%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%E7%9A%84%E5%8C%BA%E5%88%AB%0A%C2%A0%C2%A0%20%C2%A0%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%EF%BC%9A%E7%8B%AC%E5%8D%A0%E4%B8%80%E8%A1%8C%C2%A0%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%20%C2%A0%C2%A0%20%C2%A0%E5%8F%AF%E4%BB%A5%E5%B5%8C%E5%A5%97%E5%9D%97%E7%BA%A7%20%E8%A1%8C%E5%86%85%20%E8%A1%8C%E5%86%85%E5%9D%97%E7%BA%A7%C2%A0%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%20%E5%8F%AF%E4%BB%A5%E8%AE%BE%E7%BD%AE%E5%AE%BD%E9%AB%98%C2%A0%0A%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%C2%A0%20%E5%AE%BD%E5%BA%A6%E9%BB%98%E8%AE%A4%E6%98%AF100%25%0A%C2%A0%C2%A0%20%C2%A0%E8%A1%8C%E5%86%85%E5%9D%97%E7%BA%A7%EF%BC%9A%E5%8F%AF%E4%BB%A5%E8%AE%BE%E7%BD%AE%E5%AE%BD%E9%AB%98%20margin%E9%83%BD%E5%8F%AF%E4%BB%A5%E8%AE%BE%E7%BD%AE%C2%A0%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%20%C2%A0%20%C2%A0%C2%A0%E4%B8%8D%E4%BC%9A%E7%8B%AC%E5%8D%A0%E4%B8%80%E8%A1%8C%0A%C2%A0%C2%A0%20%C2%A0%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%EF%BC%9A%E4%B8%8D%E7%8B%AC%E5%8D%A0%E5%8C%BA%E5%9F%9F%C2%A0%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%20%E4%BB%85%E9%9D%A0%E5%86%85%E5%AE%B9%E6%92%91%E5%BC%80%C2%A0%0A%C2%A0%20%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%E4%B8%8D%E5%8F%AF%E4%BB%A5%E8%AE%BE%E7%BD%AE%E9%AB%98%E5%BA%A6%E6%88%96%E6%98%AF%E5%AE%BD%E5%BA%A6%C2%A0%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%20%E4%BD%86%E6%98%AF%E6%B0%B4%E5%B9%B3%E6%96%B9%E5%90%91%E4%B8%8A%E7%9A%84padding%E5%92%8Cmargin%E5%8F%AF%E4%BB%A5%E8%AE%BE%E7%BD%AE%C2%A0%E5%9E%82%E7%9B%B4%E6%96%B9%E5%90%91%E4%B8%8A%E7%9A%84%E6%97%A0%E6%95%88%C2%A0%0A%C2%A0%C2%A0%20%C2%A0%C2%A0%C2%A0%20%C2%A0%C2%A0%20%E9%BB%98%E8%AE%A4%E7%9A%84%E5%AE%BD%E5%BA%A6%E5%B0%B1%E6%98%AF%E5%AE%83%E5%86%85%E5%AE%B9%E7%9A%84%E5%AE%BD%E5%BA%A6%C2%A0%E5%8F%AA%E8%83%BD%E5%AE%B9%E7%BA%B3%E7%BA%AF%E6%96%87%E6%9C%AC%E6%88%96%E6%98%AF%E5%85%B6%E4%BB%96%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%0A2%E3%80%81div%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F%0A%20%20%20%201%C2%A0%EF%BC%88%E4%B8%8D%E7%A1%AE%E5%AE%9A%E5%BD%93%E5%89%8Ddiv%E7%9A%84%E9%AB%98%E5%AE%BD%EF%BC%89%E7%BB%99%E5%BD%93%E5%89%8D%E5%85%83%E7%B4%A0%E7%9A%84%E7%88%B6%E5%85%83%E7%B4%A0%E6%B7%BB%E5%8A%A0%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D%C2%A0%E7%84%B6%E5%90%8E%E5%9C%A8%E5%BD%93%E5%89%8D%E5%85%83%E7%B4%A0%E8%AE%BE%E7%BD%AE%C2%A0%20%0A%60%60%60%0A%20%20%20%20position%3Aabsolute%3B%0A%20%20%20%20left%3A50%25%3B%0A%20%20%20%20top%3A50%25%3B%0A%20%20%20%20transform%3Atranslate(-50%25%EF%BC%8C-50%25)%0A%60%60%60%0A2%20(%E7%A1%AE%E5%AE%9A%E5%BD%93%E5%89%8Ddiv%E7%9A%84%E5%AE%BD%E5%BA%A6)%20margin%E5%80%BC%E4%B8%BA%E5%BD%93%E5%89%8Ddiv%E5%AE%BD%E5%BA%A6%E5%AE%BD%E5%BA%A6%E4%B8%80%E5%8D%8A%E7%9A%84%E8%B4%9F%E5%80%BC%0A%60%60%60%0A%20.father%7B%0A%20%20%20%20position%3Arelative%3B%0A%20%20%20%20width%3A500px%3B%0A%20%20%20%20height%3A500px%3B%0A%20%20%20%20%7D%0A%20%20%20%20.son%7B%0A%20%20%20%20position%3Aabsolute%3B%0A%20%20%20%20width%3A200px%3B%0A%20%20%20%20height%3A20px%3B%0A%20%20%20%20top%3A50%25%3B%0A%20%20%20%20left%3A50%25%3B%0A%20%20%20%20margin-left%3A-100px%3B%0A%20%20%20%20margin-top%3A-100px%3B%0A%20%20%20%20%7D%0A%60%60%60%0A**%E4%B8%80%E4%BA%8C%E7%A7%8D%E6%96%B9%E6%B3%95%E5%AE%9E%E8%B4%A8%E4%B8%8A%E6%98%AF%E4%B8%80%E7%A7%8D%E5%8E%9F%E7%90%86%EF%BC%8C%E5%85%88%E5%B0%86%E5%B0%8Fdiv%E7%9A%84%E5%B7%A6%E4%B8%8A%E8%A7%92%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%20%E5%86%8D%E5%B0%86%E5%B0%8Fdiv%E7%9A%84%E4%B8%AD%E5%BF%83%E7%82%B9%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD**%0A%20%20%20%203%20%EF%BC%88%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E6%96%B9%E6%B3%95%EF%BC%89**%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E4%B8%8B%EF%BC%8Ctop%20left%20right%20buttom%E9%83%BD%E8%AE%BE%E7%BD%AE%E4%B8%BA0%20margin%E8%AE%BE%E7%BD%AE%E4%B8%BAauto**%0A%20%20%20%20%0A%0A%60%60%60%0A%20.father%7B%0A%20%20%20%20postion%3Arelative%3B%0A%20%20%20%20wifth%3A100px%3B%0A%20%20%20%20height%3A100px%3B%0A%20%20%20%20%7D%0A%20%20%20%20.son%7B%0A%20%20%20%20position%3Aabsolute%3B%0A%20%20%20%20margin%3Aauto%3B%0A%20%20%20%20top%3A0%3B%0A%20%20%20%20bottom%3A0%3B%0A%20%20%20%20right%3A0%3B%0A%20%20%20%20left%3A0%0A%20%20%20%20%7D%0A%60%60%60%0A4%20**(flex%E5%B8%83%E5%B1%80%E6%B3%95)%20%E5%BD%93%E5%89%8Ddiv%E7%9A%84%E7%88%B6%E7%BA%A7%E6%B7%BB%E5%8A%A0flex%20css%E6%A0%B7%E5%BC%8F**%0A%60%60%60%0A%20%20%20%20.father%7B%0A%20%20%20%20postion%3Arelative%3B%0A%20%20%20%20with%3A100px%3B%0A%20%20%20%20height%3A100px%3B%0A%20%20%20%20-webkit-display%3Aflex%3B%0A%20%20%20%20display%3Aflex%3B%0A%20%20%20%20-webkit-align-items%3Acenter%3B%0A%20%20%20%20align-items%3Acenter%3B%0A%20%20%20%20-webkit-justify-content%3Acenter%3B%0A%20%20%20%20justify-content%3Acenter%3B%0A%20%20%20%20%7D%0A%20%20%20%20.son%7B%0A%20%20%20%20width%3A30px%3B%0A%20%20%20%20height%3A30px%3B%0A%20%20%20%20%7D%0A%60%60%60%0A5%20%EF%BC%88table-cell%E6%B3%95%EF%BC%89%0A%60%60%60%0A%20.father%7B%0A%20%20%20%20%20%20%20%20width%3A500px%3B%0A%20%20%20%20%20%20%20%20height%3A500px%3B%0A%20%20%20%20%20%20%20%20display%3Atable-cell%3B%0A%20%20%20%20%20%20%20%20vertical-align%3Acenter%3B%0A%20%20%20%20%7D%0A%20%20%20%20.son%7B%0A%20%20%20%20%20%20%20%20width%3A200px%3B%0A%20%20%20%20%20%20%20%20height%3A200px%3B%0A%20%20%20%20%20%20%20%20display%3Ainline-block%3B%0A%20%20%20%20%7D%0A%60%60%60%0A6%20**%EF%BC%88%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%EF%BC%89calc%E5%87%BD%E6%95%B0%E5%8A%A8%E6%80%81%E8%AE%A1%E7%AE%97%E5%AE%9E%E7%8E%B0%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD**%0A%20%20%0A%60%60%60%0A%20%20.father%7B%0A%20%20%20%20position%3Arelative%3B%0A%20%20%20%20width%3A80vw%3B%0A%20%20%20%20height%3A80vh%3B%0A%20%20%20%20%7D%0A%20%20%20%20.son%7B%0A%20%20%20%20position%3Aabsolute%3B%0A%20%20%20%20width%3A30vw%3B%0A%20%20%20%20height%3A30vh%3B%0A%20%20%20%20left%3A%20-moz-calc((80vw%20-%2030vw)%2F2)%3B%0A%20%20%20%20top%3A%20-moz-calc((80vh%20-%2030vh)%2F2)%3B%0A%20%20%20%20left%3A%20-webkit-calc((80vw%20-%2030vw)%2F2)%3B%0A%20%20%20%20top%3A%20-webkit-calc((80vh%20-%2030vh)%2F2)%3B%0A%20%20%20%20left%3A%20calc((80vw%20-%2030vw)%2F2)%3B%0A%20%20%20%20top%3A%20calc((80vh%20-%2030vh)%2F2)%3B%2F%2F%E5%85%BC%E5%AE%B9%E6%80%A7%E5%86%99%E6%B3%95%EF%BC%9F%0A%20%20%20%20%7D%0A%60%60%60%0A3%E3%80%81css%E6%96%B0%E7%89%B9%E6%80%A7%E3%80%81transform%E7%9A%84%E5%80%BC%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9Fanimation%E7%94%A8%E6%B3%95%0Acss%E6%96%B0%E7%89%B9%E6%80%A7%EF%BC%9Atransform%20transtiton%20animation%0Atransform%EF%BC%88%E5%8F%98%E5%BD%A2%EF%BC%89%EF%BC%9Ascale%E6%94%BE%E5%A4%A7%E7%BC%A9%E5%B0%8F%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20translate%20%E5%B9%B3%E7%A7%BB%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20rotate%20%E6%8C%89%E7%85%A7%E4%B8%80%E5%AE%9A%E8%A7%92%E5%BA%A6%E6%97%8B%E8%BD%AC%EF%BC%88deg%EF%BC%89%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20matrx%20%E5%85%81%E8%AE%B8%E7%94%A8%E6%88%B7%E4%BB%A5%E5%83%8F%E7%B4%A0%E7%B2%BE%E5%BA%A6%E6%9D%A5%E6%8E%A7%E5%88%B6%E5%8F%98%E5%BD%A2%E6%95%88%E6%9E%9C%EF%BC%8C%E7%9C%8B%E8%BF%99%E4%B8%AA%E8%A7%A3%E9%87%8A%E6%84%9F%E8%A7%89%E5%BE%88%E6%8A%BD%E8%B1%A1%EF%BC%8C%E5%85%B6%E5%AE%9E%E5%B0%B1%E6%9C%89%E7%82%B9%E5%83%8F%E6%88%91%E4%BB%AC%E5%9C%A8%E4%B8%89%E7%BB%B4%E7%A9%BA%E9%97%B4%EF%BC%8C%E9%80%9A%E8%BF%87%E5%9D%90%E6%A0%87%E6%9D%A5%E5%AE%9A%E4%BD%8D%E5%9B%BE%E5%BD%A2%E4%B8%80%E6%A0%B7%EF%BC%8C%E4%B8%8D%E8%BF%87%E8%BF%99%E4%B8%AA%E6%98%AF%E4%B8%80%E4%B8%AA%E4%BA%8C%E7%BB%B4%E5%9B%BE%E5%BD%A2%EF%BC%8C%E4%B8%8D%E6%98%AF%E4%B8%89%E7%BB%B4%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform-origin%20%E4%BF%AE%E6%94%B9%E5%8F%98%E5%BD%A2%E5%8E%9F%E7%82%B9%EF%BC%88transform-origin%3A0px%200px%EF%BC%89%E5%8F%AF%E4%BB%A5%E7%94%A8%E7%99%BE%E5%88%86%E6%AF%94%EF%BC%8C%E7%99%BE%E5%88%86%E6%AF%94%E6%98%AF%E5%8F%82%E7%85%A7%E5%85%83%E7%B4%A0%E7%9A%84%E5%AE%BD%E9%AB%98%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transform3d(x%2Cy%2Cz)%20%E4%BB%8Exyz%E8%BD%B4%E7%A7%BB%E5%8A%A8%E5%85%83%E7%B4%A0%0Atransition(%E6%B8%90%E5%8F%98)%20%0A%60%0Atransition%3Aproperty(%E9%9C%80%E8%A6%81%E8%BF%87%E5%BA%A6%E7%9A%84%E5%B1%9E%E6%80%A7)%20during(%E8%BF%87%E6%B8%A1%E6%95%88%E6%9E%9C%E6%98%AF%E6%8C%81%E7%BB%AD%E6%97%B6%E9%97%B4)%20timing-function(%E8%BF%87%E6%B8%A1%E6%97%B6%E9%80%9F%E5%BA%A6%E5%8F%98%E5%8C%96)%20delay(%E8%BF%87%E6%B8%A1%E6%95%88%E6%9E%9C%E5%BC%80%E5%A7%8B%E5%89%8D%E7%9A%84%E5%BB%B6%E8%BF%9F%E6%97%B6%E9%97%B4%20%E5%8F%AF%E9%80%89)%20%0A%60%0Aanimation(%E5%8A%A8%E7%94%BB)%20%E5%B0%B1%E6%98%AF%E6%98%AF%E5%85%83%E7%B4%A0%E4%BB%8E%E4%B8%80%E7%A7%8D%E6%A0%B7%E5%BC%8F%E9%80%90%E6%B8%90%E8%BD%AC%E5%8C%96%E6%88%90%E5%8F%A6%E4%B8%80%E7%A7%8D%E6%A0%B7%E5%BC%8F%E7%9A%84%E8%BF%87%E7%A8%8B%0A%60animation%3Aname%20keeping-time%20animate-function%20delay%20times%20iteration%20final%0A%0A%60%0Aname%3A%E5%8A%A8%E7%94%BB%E7%9A%84%E5%90%8D%E5%AD%97%20css3%E4%B8%AD%E9%87%87%E7%94%A8%E2%80%9C%E5%85%B3%E9%94%AE%E5%B8%A7%20keyframe%E2%80%9D%E6%9D%A5%E5%AE%9A%E4%B9%89%E5%8A%A8%E7%94%BB%E3%80%82%0A%0A%60%60%60%0A%40-webkit-keyframes%20name%7B%0A0%25%7B%0A%E7%8A%B6%E6%80%81%E4%B8%80%0A%7D%0A100%25%7B%0A%E7%8A%B6%E6%80%81%E4%BA%8C%0A%7D%0A%7D%0A%0A%60%60%60%0Akeeping-time%20%E6%8C%81%E7%BB%AD%E6%97%B6%E9%97%B4%20%E5%BF%85%E9%A1%BB%E5%B8%A6%E4%B8%8A%E4%BA%8B%E4%BB%B6%E5%8D%95%E4%BD%8D%E3%80%82%0Aanimate-function%20%E8%BF%90%E5%8A%A8%E6%96%B9%E5%BC%8F%E7%9A%84%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF%EF%BC%8C%E5%8F%AF%E5%8F%96%E7%9A%84%E5%80%BC%E6%9C%89ease%20ease-in%20ease-out%20linear%20ease-in-out%20cubic-bezier(num1%2Cnum2%2Cnum3)%E3%80%82%0Adelay%20%E5%BB%B6%E8%BF%9F%E6%97%B6%E9%97%B4%20%E5%B0%B1%E7%AE%97%E6%98%AF0%E4%B9%9F%E5%BF%85%E9%A1%BB%E5%8A%A0%E4%B8%8A%E5%8D%95%E4%BD%8D%E3%80%82%0Atimes%20%E5%8A%A8%E7%94%BB%E6%89%A7%E8%A1%8C%E6%AC%A1%E6%95%B0%20%E6%97%A0%E5%8D%95%E4%BD%8D%20indeinite%E4%B8%BA%E6%97%A0%E9%99%90%E5%BE%AA%E7%8E%AF%E3%80%82%0Ainteration%20%E5%A6%82%E6%9E%9C%E5%8A%A8%E7%94%BB%E5%BE%AA%E7%8E%AF%E6%92%AD%E6%94%BE%EF%BC%8C%E5%BE%AA%E7%8E%AF%E6%96%B9%E5%BC%8F%E6%9C%89alternate(%E5%A5%87%E6%95%B0%E5%90%91%E5%89%8D%E6%92%AD%E6%94%BE%EF%BC%8C%E5%81%B6%E6%95%B0%E5%90%91%E5%90%8E%E6%92%AD%E6%94%BE)normal(%E6%AF%8F%E6%AC%A1%E9%83%BD%E5%90%91%E5%89%8D%E6%92%AD%E6%94%BE)%E3%80%82%0Afinal%E5%8A%A8%E7%94%BB%E6%9C%80%E5%90%8E%E6%97%B6%E7%9A%84%E7%8A%B6%E6%80%81%20%E5%8F%AF%E4%BB%A5%E6%98%AFbackward(%E5%9B%9E%E5%88%B0%E5%88%9D%E5%A7%8B%E7%8A%B6%E6%80%81)%20forwards(%E5%81%9C%E5%9C%A8%E6%9C%80%E7%BB%88%E7%8A%B6%E6%80%81)%20none%20both%0A**%E5%9C%A8%E4%BD%BF%E7%94%A8%E7%9A%84%E6%97%B6%E5%80%99%E8%A6%81%E5%8A%A0%E4%B8%8A%E5%89%8D%E7%BC%80%EF%BC%88%E6%B5%8F%E8%A7%88%E5%99%A8%E5%86%85%E6%A0%B8%EF%BC%89**%0A4%E3%80%81Css%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7%E9%A1%BA%E5%BA%8F%0A%20%20%20%20%E7%B1%BB%E5%9E%8B%E9%80%89%E6%8B%A9%E5%99%A8%0A%20%20%20%20%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8%0A%20%20%20%20id%E9%80%89%E6%8B%A9%E5%99%A8%0A%205%E3%80%81Cookie%E3%80%81sessionStorage%E5%92%8ClocalStorage%E7%9A%84%E5%8C%BA%E5%88%AB%0A%20%20%20%20Cookie%20%E7%94%B1%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%94%9F%E6%88%90%E7%9A%84%EF%BC%8C%E5%8F%AF%E4%BB%A5%E8%AE%BE%E7%BD%AE%E5%A4%B1%E6%95%88%E6%97%B6%E9%97%B4%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%E7%94%B1%E6%B5%8F%E8%A7%88%E5%99%A8%E7%94%9F%E6%88%90%E7%9A%84%EF%BC%8C%E9%BB%98%E8%AE%A4%E6%98%AF%E4%B8%80%E6%AC%A1%E5%9B%9E%E8%AF%9D%E7%9A%84%E4%BA%8B%E4%BB%B6%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%E5%AD%98%E6%94%BE4k%E5%B7%A6%E5%8F%B3%E7%9A%84%E6%95%B0%E6%8D%AE%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%E6%AF%8F%E6%AC%A1%E9%83%BD%E4%BC%9A%E6%90%BA%E5%B8%A6%E5%9C%A8http%E4%B8%AD%EF%BC%8C%E5%A6%82%E6%9E%9C%E5%AD%98%E6%94%BE%E8%BF%87%E5%A4%9A%E7%9A%84%E6%95%B0%E6%8D%AE%E4%BC%9A%E5%B8%A6%E6%9D%A5%E6%80%A7%E8%83%BD%E9%97%AE%E9%A2%98%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%E9%9C%80%E8%A6%81%E7%A8%8B%E5%BA%8F%E5%91%98%E8%87%AA%E5%B7%B1%E5%B0%81%E8%A3%85%EF%BC%8C%E5%8E%9F%E7%94%9F%E7%9A%84cookie%E6%8E%A5%E5%8F%A3%E4%B8%8D%E5%8F%8B%E5%A5%BD%0A%20%20%20%20localStorage%20%E9%99%A4%E9%9D%9E%E8%A2%AB%E6%B8%85%E9%99%A4%EF%BC%8C%E5%90%A6%E5%88%99%E6%B0%B8%E4%B9%85%E4%BF%9D%E5%AD%98%0A%20%20%20%20sessionStorage%20%E4%BB%85%E5%9C%A8%E5%BD%93%E5%89%8D%E4%BC%9A%E8%AF%9D%E4%B8%8B%E6%9C%89%E6%95%88%EF%BC%8C%E5%85%B3%E9%97%AD%E9%A1%B5%E9%9D%A2%E6%88%96%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%8E%E8%A2%AB%E6%B8%85%E9%99%A4%0A%20%20%20%20localStorage%E5%92%8CsessionStorage%E7%9B%B8%E5%90%8C%E7%82%B9%20%E4%B8%80%E8%88%AC%E4%B8%BA5MB%20%E4%BB%85%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E4%BF%9D%E5%AD%98%EF%BC%8C%E4%B8%8D%E5%8F%82%E4%B8%8E%E5%92%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E9%80%9A%E4%BF%A1%EF%BC%9B%E5%8E%9F%E7%94%9F%E6%8E%A5%E5%8F%A3%E5%8F%AF%E4%BB%A5%E6%8E%A5%E5%8F%97%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E8%87%AA%E5%B7%B1%E5%B0%81%E8%A3%85%0A6%E3%80%81Http%E5%B8%B8%E8%A7%81%E7%8A%B6%E6%80%81%E7%A0%81%0A%201xx%20information%20%E6%8E%A5%E6%94%B6%E7%9A%84%E8%AF%B7%E6%B1%82%E6%AD%A3%E5%9C%A8%E5%A4%84%E7%90%86%0A2xx%20succeess%20%E8%AF%B7%E6%B1%82%E6%AD%A3%E5%B8%B8%E5%A4%84%E7%90%86%E5%AE%8C%E6%AF%95%EF%BC%88%E4%B8%89%E7%A7%8D%EF%BC%89%0A%20%20%20%20200%20OK%20%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%9A%84%E8%AF%B7%E6%B1%82%E8%A2%AB%E6%AD%A3%E5%B8%B8%E5%A4%84%E7%90%86%E5%B9%B6%E8%BF%94%E5%9B%9E%0A%20%20%20%20204%20no%20center%20%E8%A1%A8%E7%A4%BA%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%8F%91%E9%80%81%E7%9A%84%E8%AF%B7%E6%B1%82%E5%BE%97%E5%88%B0%E4%BA%86%E6%88%90%E5%8A%9F%E5%A4%84%E7%90%86%20%E4%BD%86%E6%98%AF%E6%B2%A1%E6%9C%89%E8%B5%84%E6%BA%90%E5%8F%AF%E4%BB%A5%E8%BF%94%E5%9B%9E%0A%20%20%20%20206%20Patial%20Content%20%E8%A1%A8%E7%A4%BA%E5%AE%A2%E6%88%B7%E7%AB%AF%E8%BF%9B%E8%A1%8C%E4%BA%86%E8%8C%83%E5%9B%B4%E8%AF%B7%E6%B1%82%20%E5%B9%B6%E4%B8%94%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%88%90%E5%8A%9F%E6%89%A7%E8%A1%8C%E4%BA%86%E8%BF%99%E9%83%A8%E5%88%86%E7%9A%84GET%E8%AF%B7%E6%B1%82%EF%BC%8C%E5%93%8D%E5%BA%94%E6%8A%A5%E6%96%87%E4%B8%AD%E5%8C%85%E5%90%AB%E7%94%B1Content-Range%E6%8C%87%E5%AE%9A%E8%8C%83%E5%9B%B4%E7%9A%84%E5%AE%9E%E4%BD%93%E5%86%85%E5%AE%B9%0A3xx%20redirection%20%E9%87%8D%E5%AE%9A%E5%90%91(5%E7%A7%8D)%0A%20%20%20%20301%20%E6%B0%B8%E4%B9%85%E9%87%8D%E5%AE%9A%E5%90%91%20%E8%A1%A8%E7%A4%BA%E8%A6%81%E8%AF%B7%E6%B1%82%E7%9A%84%E8%B5%84%E6%BA%90%E8%A2%AB%E6%B0%B8%E4%B9%85%E5%88%86%E9%85%8D%E5%88%B0%E4%BA%86%E6%96%B0%E7%9A%84url%20%E4%B9%8B%E5%90%8E%E5%BA%94%E4%BD%BF%E7%94%A8%E6%96%B0%E7%9A%84url%0A%20%20%20%20302%20%E4%B8%B4%E6%97%B6%E6%80%A7%E9%87%8D%E5%AE%9A%E5%90%91%20%E8%A1%A8%E7%A4%BA%E8%B5%84%E6%BA%90%E8%A2%AB%E4%B8%B4%E6%97%B6%E5%88%86%E9%85%8D%E5%88%B0%E4%BA%86%E6%96%B0%E7%9A%84url%20%E6%9C%AC%E6%AC%A1%E8%AE%BF%E9%97%AE%E6%9A%82%E6%97%B6%E4%BD%BF%E7%94%A8%E6%96%B0%E7%9A%84url%0A%20%20%20%20303%20%E8%A1%A8%E7%A4%BA%E5%BA%94%E4%BD%BF%E7%94%A8GET%E6%96%B9%E6%B3%95%E8%8E%B7%E5%8F%96%E8%B5%84%E6%BA%90%0A%20%20%20%20304%20%E8%A1%A8%E7%A4%BA%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%8F%91%E9%80%81%E9%99%84%E5%B8%A6%E6%9D%A1%E4%BB%B6%E7%9A%84%E8%AF%B7%E6%B1%82%E6%97%B6%EF%BC%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%AB%AF%E5%85%81%E8%AE%B8%E8%AE%BF%E9%97%AE%E8%B5%84%E6%BA%90%EF%BC%8C%E4%BD%86%E6%98%AF%E8%AF%B7%E6%B1%82%E4%B8%BA%E6%BB%A1%E8%B6%B3%E6%9D%A1%E4%BB%B6%E6%98%AF%E8%BF%94%E5%9B%9E%E7%8A%B6%E6%80%81%E7%A0%81%0A%20%20%20%20307%20%E4%B8%B4%E6%97%B6%E9%87%8D%E5%AE%9A%E5%90%91%EF%BC%8C%E5%92%8C303%E5%90%AB%E4%B9%89%E7%9B%B8%E5%90%8C%20%E4%BC%9A%E9%A9%AF%E5%85%BD%E6%B5%8F%E8%A7%88%E5%99%A8%E6%A0%87%E5%87%86%EF%BC%8C%E4%B8%8D%E4%BC%9A%E4%BB%8Epost%E7%BC%96%E7%A8%8Bget%0A4xx%20client%20error%20%E5%AE%A2%E6%88%B7%E7%AB%AF%E8%AF%B7%E6%B1%82%E5%87%BA%E9%94%99%20%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%97%A0%E6%B3%95%E5%A4%84%E7%90%86%E8%AF%B7%E6%B1%82%EF%BC%884%E7%A7%8D%EF%BC%89%0A%20%20%20%20400%20%E8%AF%B7%E6%B1%82%E6%8A%A5%E6%96%87%E4%B8%AD%E5%AD%98%E5%9C%A8%E8%AF%AD%E6%B3%95%E9%94%99%E8%AF%AF%0A%20%20%20%20401%20%E6%9C%AA%E7%BB%8F%E8%AE%B8%E5%8F%AF%20%E9%9C%80%E8%A6%81%E9%80%9A%E8%BF%87http%E8%AE%A4%E8%AF%81%0A%20%20%20%20403%20%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%8B%92%E7%BB%9D%E8%BF%99%E6%AC%A1%E8%AE%BF%E9%97%AE%0A%20%20%20%20404%20%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%8A%E6%97%A0%E6%B3%95%E6%89%BE%E5%88%B0%E8%AF%B7%E6%B1%82%E7%9A%84%E8%B5%84%E6%BA%90%2F%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%8B%92%E7%BB%9D%E8%AF%B7%E6%B1%82%E4%BD%86%E6%98%AF%E4%B8%8D%E6%83%B3%E7%BB%99%E6%8B%92%E7%BB%9D%E5%8E%9F%E5%9B%A0%0A5xx%20server%20error%20%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AF%B7%E6%B1%82%E5%87%BA%E9%94%99%0A%20%20%20%20500%20%E8%A1%A8%E7%A4%BA%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%9C%A8%E6%89%A7%E8%A1%8C%E8%AF%B7%E6%B1%82%E6%97%B6%E5%8F%91%E7%94%9F%E4%BA%86%E9%94%99%E8%AF%AF%0A%20%20%20%20503%20%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%B6%85%E8%B4%9F%E8%8D%B7%E6%88%96%E6%98%AF%E5%9C%A8%E7%BB%B4%E6%8A%A4%0A7%E3%80%81http%E4%B8%8Ehttps%E7%9A%84%E5%8C%BA%E5%88%AB%0A%20%20%20%201%20https%E9%9C%80%E8%A6%81%E5%88%B0CA(%E8%AF%81%E4%B9%A6%E9%A2%81%E5%8F%91%E6%9C%BA%E6%9E%84)%E7%94%B3%E8%AF%B7%E8%AF%81%E4%B9%A6%EF%BC%8C%E4%B8%80%E8%88%AC%E5%85%8D%E8%B4%B9%E8%AF%81%E4%B9%A6%E6%AF%94%E8%BE%83%E5%B0%91%EF%BC%8C%E5%9B%A0%E8%80%8C%E9%9C%80%E8%A6%81%E4%B8%80%E5%AE%9A%E8%B4%B9%E7%94%A8%0A%20%20%20%202%20http%E6%98%AF%E8%B6%85%E6%96%87%E6%9C%AC%E4%BC%A0%E8%BE%93%E5%8D%8F%E8%AE%AE%EF%BC%8C%E4%BF%A1%E6%81%AF%E6%98%AF%E6%98%8E%E6%96%87%E4%BC%A0%E8%BE%93%EF%BC%8Chttps%E6%98%AFSSL%E5%8A%A0%E5%AF%86%E4%BC%A0%E8%BE%93%E5%8D%8F%E8%AE%AE%E5%8A%A0%E5%AF%86%E5%90%8E%E4%BC%A0%E8%BE%93%0A%20%20%20%203%20%E8%BF%9E%E6%8E%A5%E6%96%B9%E5%BC%8F%E4%B8%8D%E5%90%8C%EF%BC%8C%E7%AB%AF%E5%8F%A3%E4%B8%8D%E5%90%8C%EF%BC%8Chttp%E6%98%AF80%EF%BC%8Chttps%E6%98%AF443%0A%20%20%20%204%20http%E7%9A%84%E8%BF%9E%E6%8E%A5%E5%BE%88%E7%AE%80%E5%8D%95%EF%BC%8C%E6%98%AF%E6%97%A0%E7%8A%B6%E6%80%81%E7%9A%84%EF%BC%8Chttps%E5%8D%8F%E8%AE%AE%E5%AE%A4%E5%8F%8BSSL%2Bhttp%E5%8D%8F%E8%AE%AE%E6%9E%84%E5%BB%BA%E7%9A%84%E5%8F%AF%E8%BF%9B%E8%A1%8C%E5%8A%A0%E5%AF%86%E4%BC%A0%E8%BE%93%E3%80%81%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81%E7%9A%84%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE%EF%BC%8C%E6%AF%94http%E5%AE%89%E5%85%A8%0A%20%20%20%20%EF%BC%88%E6%97%A0%E7%8A%B6%E6%80%81%E7%9A%84%E6%84%8F%E6%80%9D%E6%98%AF%E5%AE%83%E7%9A%84%E6%95%B0%E6%8D%AE%E5%8C%85%E7%9A%84%E5%8F%91%E9%80%81%E3%80%81%E4%BC%A0%E8%BE%93%E5%92%8C%E6%8E%A5%E6%94%B6%E9%83%BD%E6%98%AF%E7%9B%B8%E4%BA%92%E7%8B%AC%E7%AB%8B%E7%9A%84%E3%80%82%E6%97%A0%E8%BF%9E%E6%8E%A5%E7%9A%84%E6%84%8F%E6%80%9D%E6%98%AF%E5%8F%8C%E6%96%B9%E9%83%BD%E4%B8%8D%E8%83%BD%E9%95%BF%E4%B9%85%E7%9A%84%E7%BB%B4%E6%8C%81%E5%AF%B9%E6%96%B9%E7%9A%84%E4%BB%BB%E4%BD%95%E4%BF%A1%E6%81%AF%EF%BC%89%0A%208%E3%80%81IE%E7%9B%92%E6%A8%A1%E5%9E%8B%E5%92%8C%E6%A0%87%E5%87%86%E7%9B%92%E6%A8%A1%E5%9E%8B%E7%9A%84%E5%8C%BA%E5%88%AB%0A%20%20%20%20ie%E7%9B%92%E6%A8%A1%E5%9E%8B%E7%94%B1margin%20border%20padding%20content%20%E6%9E%84%E6%88%90%0A%20%20%20%20%E6%A0%87%E5%87%86%E7%9B%92%E6%A8%A1%E5%9E%8B%E5%8F%AA%E6%9C%89%E5%86%85%E5%AE%B9%E9%83%A8%E5%88%86%20%E6%98%AF%E7%8B%AC%E7%AB%8B%E7%9A%84%0A%20%20%20%20%0A%EF%BC%88%E6%A0%87%E5%87%86%E7%9B%92%E6%A8%A1%E5%9E%8B%E5%92%8C%E6%80%AA%E5%BC%82%E7%9B%92%E6%A8%A1%E5%9E%8B%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9A%0A%20%20%20%201%20%E5%AE%BD%EF%BC%9A%E6%80%AA%E5%BC%82%E7%9B%92%E6%A8%A1%E5%9E%8B%EF%BC%9Awidth%2B%E5%B7%A6%E5%8F%B3%E5%A4%96%E8%BE%B9%E8%B7%9D%0A%20%20%20%20%20%20%20%20%20%20%20%20%E6%A0%87%E5%87%86%E7%9B%92%E6%A8%A1%E5%9E%8B%EF%BC%9Awidth%2B%E5%B7%A6%E5%8F%B3%E5%A4%96%E8%BE%B9%E8%B7%9D%2B%E5%B7%A6%E5%8F%B3%E8%BE%B9%E6%A1%86%2B%E5%B7%A6%E5%8F%B3%E5%A4%96%E8%BE%B9%E8%B7%9D%0A%20%20%20%202%20%E8%AE%BE%E7%BD%AE%E5%AE%BD%E9%AB%98%EF%BC%9A%E6%A0%87%E5%87%86%E7%9B%92%E6%A8%A1%E5%9E%8B%EF%BC%9A%E5%86%85%E5%AE%B9%E7%9A%84%E5%AE%BD%E9%AB%98%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%E6%80%AA%E5%BC%82%E7%9B%92%E6%A8%A1%E5%9E%8B%EF%BC%9A%20%E8%BE%B9%E6%A1%86%E7%9A%84%E5%AE%BD%E9%AB%98%0A%EF%BC%89%0A%20%0A8%E3%80%81%20%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3BFC%3F%20%E8%A7%A6%E5%8F%91%E6%9D%A1%E4%BB%B6%3F%0A%20%20%20%20BFC(Block%20formatting%20context)%E7%9B%B4%E8%AF%91%E4%B8%BA%E2%80%9C%E5%9D%97%E7%BA%A7%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%B8%8A%E4%B8%8B%E6%96%87%E2%80%9D%E3%80%82%E5%AE%83%E6%98%AF%E4%B8%80%E4%B8%AA%E7%8B%AC%E7%AB%8B%E7%9A%84%E6%B8%B2%E6%9F%93%E5%8C%BA%E5%9F%9F%EF%BC%8C%E5%8F%AA%E6%9C%89Block-level%20box%EF%BC%88%E5%9D%97%EF%BC%89%E5%8F%82%E4%B8%8E%EF%BC%8C%20%E5%AE%83%E8%A7%84%E5%AE%9A%E4%BA%86%E5%86%85%E9%83%A8%E7%9A%84Block-level%20Box%E5%A6%82%E4%BD%95%E5%B8%83%E5%B1%80%EF%BC%8C%E5%B9%B6%E4%B8%94%E4%B8%8E%E8%BF%99%E4%B8%AA%E5%8C%BA%E5%9F%9F%E5%A4%96%E9%83%A8%E6%AF%AB%E4%B8%8D%E7%9B%B8%E5%B9%B2%E3%80%82%0A%EF%BC%88%0A%E8%A7%84%E5%88%99%EF%BC%9A%0A%20%20%20%201%20%E5%86%85%E9%83%A8%E7%9A%84box%E4%BC%9A%E5%9C%A8%E5%9E%82%E7%9B%B4%E6%96%B9%E5%90%91%EF%BC%8C%E4%B8%80%E4%B8%AA%E6%8E%A5%E4%B8%80%E4%B8%AA%E7%9A%84%E6%94%BE%E7%BD%AE%0A%20%20%20%202%20box%E7%9A%84%E5%9E%82%E7%9B%B4%E6%96%B9%E5%90%91%E7%9A%84%E8%B7%9D%E7%A6%BB%E7%94%B1margin%E5%86%B3%E5%AE%9A%EF%BC%8C%E5%B1%9E%E4%BA%8E%E5%90%8C%E4%B8%80%E4%B8%AABFC%E7%9A%84margin%E4%BC%9A%E5%8F%91%E7%94%9F%E9%87%8D%E5%8F%A0%0A%20%20%20%203%20%E6%AF%8F%E4%B8%AA%E5%85%83%E7%B4%A0%E7%9A%84margin%20box%E7%9A%84%E5%B7%A6%E8%BE%B9%EF%BC%8C%E4%B8%8E%E5%8C%85%E5%90%ABborder%20box%E7%9A%84%E5%B7%A6%E8%BE%B9%E7%9B%B8%E6%8E%A5%E8%A7%A6%EF%BC%88%E6%AF%8F%E4%B8%AA%E5%85%83%E7%B4%A0%E7%9A%84margin%20box%E7%9A%84%E5%B7%A6%E8%BE%B9%E9%83%BD%E5%92%8C%E7%88%B6%E5%85%83%E7%B4%A0%E7%9A%84border%20box%E5%B7%A6%E8%BE%B9%E7%9B%B8%E6%8E%A5%E8%A7%A6%EF%BC%89%0A%20%20%20%204%20BFC%E7%9A%84%E5%8C%BA%E5%9F%9F%E4%B8%8D%E4%BC%9A%E4%B8%8Efloat%20box%E9%87%8D%E5%8F%A0%0A%20%20%20%205%20BFC%E5%B0%B1%E6%98%AF%E9%A1%B5%E9%9D%A2%E4%B8%8A%E4%B8%80%E4%B8%AA%E9%9A%94%E7%A6%BB%E7%9A%84%E7%8B%AC%E7%AB%8B%E5%AE%B9%E5%99%A8%EF%BC%8C%E5%AE%B9%E5%99%A8%E9%87%8C%E9%9D%A2%E7%9A%84%E5%AD%90%E5%85%83%E7%B4%A0%E4%B8%8D%E4%BC%9A%E5%BD%B1%E5%93%8D%E5%88%B0%E5%A4%96%E9%9D%A2%E7%9A%84%E5%85%83%E7%B4%A0%0A%20%20%20%206%20%E8%AE%A1%E7%AE%97BFC%E7%9A%84%E9%AB%98%E5%BA%A6%E6%98%AF%EF%BC%8C%E6%B5%AE%E5%8A%A8%E5%85%83%E7%B4%A0%E4%B9%9F%E5%8F%82%E4%B8%8E%E8%AE%A1%E7%AE%97%0A%EF%BC%89%0A**%E8%A7%A6%E5%8F%91%E6%9D%A1%E4%BB%B6%EF%BC%9A**%0A%20%20%20%201%20%E6%A0%B9%E5%85%83%E7%B4%A0%0A%20%20%20%202%20float%E5%B1%9E%E6%80%A7%E4%B8%8D%E6%98%AFnone%20%0A%20%20%20%203%20position%E7%9A%84%E5%B1%9E%E6%80%A7%E4%B8%BAabsolute%E6%88%96%E6%98%AFfixed%0A%20%20%20%204%20display%E5%B1%9E%E6%80%A7%E4%B8%BAinline-block%20table-cell%20table-caption%20flex%20inline-flex%0A%20%20%20%205%20overflow%E9%83%A8%E4%BD%8Dvisible%0A9%E3%80%81position%E7%9A%84%E5%80%BC%E6%9C%89%E5%93%AA%E4%BA%9B%3F%20%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F%0Aabsolute%20%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%EF%BC%8C%E8%84%B1%E7%A6%BB%E6%96%87%E6%A1%A3%E6%B5%81%EF%BC%8C%E4%BE%9D%E6%8D%AE%E6%9C%80%E8%BF%91%E7%9A%84%E5%B7%B2%E7%BB%8F%E5%AE%9A%E4%BD%8D%EF%BC%88%E7%BB%9D%E5%AF%B9%20%E7%9B%B8%E5%AF%B9%20%E5%9B%BA%E5%AE%9A%EF%BC%89%E7%9A%84%E5%85%83%E7%B4%A0%E9%80%9A%E8%BF%87top%20left%20bottom%20right%E5%AE%9A%E4%BD%8D%EF%BC%8C%E5%BD%93%E7%88%B6%E7%BA%A7%E7%9A%84position%E4%B8%BAstatic%E6%97%B6%EF%BC%8Cabsolute%E5%85%83%E7%B4%A0%E5%B0%86%E4%BE%9D%E6%8D%AE%EF%BC%8C%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87z-index%E8%BF%9B%E8%A1%8C%E5%B1%82%E7%BA%A7%E5%88%86%E7%BA%A7%0Arelative%20%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D%EF%BC%8C%E4%B8%8D%E8%84%B1%E7%A6%BB%E6%96%87%E6%A1%A3%E6%B5%81%EF%BC%8C%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87top%20left%20right%20bottom%E5%AE%9A%E4%BD%8Dbody%E6%A0%B9%E5%85%83%E7%B4%A0%E5%AE%9A%E4%BD%8D%EF%BC%8C%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87z-index%E8%BF%9B%E8%A1%8C%E5%B1%82%E7%BA%A7%E5%88%86%E7%BA%A7%0Astatic%20%EF%BC%9A%E8%87%AA%E5%8A%A8%E5%AE%9A%E4%BD%8D%EF%BC%8C%E5%B0%B1%E6%98%AF%E5%85%83%E7%B4%A0%E5%9C%A8%E9%A1%B5%E9%9D%A2%E6%99%AE%E9%80%9A%E6%96%87%E6%A1%A3%E6%B5%81%E4%B8%AD%E7%94%B1HTML%E8%87%AA%E5%8A%A8%E5%AE%9A%E4%BD%8D%EF%BC%8C%E6%99%AE%E9%80%9A%E6%96%87%E6%A1%A3%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0%E4%B9%9F%E7%A7%B0%E4%B8%BA%E6%B5%81%E5%8A%A8%E5%85%83%E7%B4%A0%EF%BC%8C%E4%B8%8D%E8%83%BD%E7%94%A8z-index%E8%BF%9B%E8%A1%8C%E5%88%86%E5%B1%82%0Afixed%20%EF%BC%9A%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D%EF%BC%8C%E4%B8%8E%E7%88%B6%E5%85%83%E7%B4%A0%E6%97%A0%E5%85%B3%EF%BC%8C%E7%9B%B4%E6%8E%A5%E6%A0%B9%E6%8D%AE%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AA%97%E5%8F%A3%E5%AE%9A%E4%BD%8D%EF%BC%8C%E4%B8%8D%E9%9A%8F%E6%BB%9A%E5%8A%A8%E6%9D%A1%E6%8B%96%E5%8A%A8%E9%A1%B5%E9%9D%A2%E8%80%8C%E6%BB%9A%E5%8A%A8%0A10%E3%80%81%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E7%94%A8%E5%88%B0%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80%EF%BC%8Cflex%E5%B1%9E%E6%80%A7%E7%9A%84%E4%BD%9C%E7%94%A8%3F%0A%20%20%20%20%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E7%94%A8%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80%EF%BC%9A%0A%20%20%20%20%20%20%20%201%20%E7%AD%89%E5%88%86%E9%A1%B5%E9%9D%A2%0A%20%20%20%20%20%20%20%202%20%E5%B1%85%E4%B8%AD%EF%BC%88justify-content%3Aspace-around%EF%BC%89%0A%20%20%20%20%20%20%20%203%20%E6%8C%89%E6%AF%94%E4%BE%8B%E5%88%86%E5%89%B2%E9%A1%B5%E9%9D%A2%0A%20%20%20%20%20flex%E5%B1%9E%E6%80%A7%E7%9A%84%E4%BD%9C%E7%94%A8%EF%BC%9A%0A%20%20%20%20%20%20%20%201%20%E5%AE%B9%E5%99%A8%E5%B1%9E%E6%80%A7%EF%BC%9Aflex-direction%20flex-flow%20flex-wrap%20justify-content%20align-items%20align-content%0A%20%20%20%20%20%20%20%202%20%E9%A1%B9%E7%9B%AE%E7%9A%84%E5%B1%9E%E6%80%A7%EF%BC%9Aorder%20flex-grow%20flex-shrink%20flex-basis%20flex%20align-self%0A%20%20%20%20%20%EF%BC%88%E5%85%B6%E4%B8%AD%E9%A1%B9%E7%9B%AE%E5%B1%9E%E6%80%A7%E7%9A%84flex%20%E6%98%AF%20flex-grow%20flex-shrink%20flex-basis%E7%9A%84%E7%AE%80%E5%86%99%EF%BC%89%0A**%E6%B3%A8%E6%84%8F%EF%BC%9A**%20%E8%AE%BE%E7%BD%AEdisplay%3Aflex%E5%B8%83%E5%B1%80%E4%BB%A5%E5%90%8E%EF%BC%8C%E5%AD%90%E5%85%83%E7%B4%A0%E7%9A%84float%20clear%20%E5%92%8Cvertical-align%E5%B1%9E%E6%80%A7%E5%B0%86%E5%A4%B1%E6%95%88%0Aflex-direction%EF%BC%9A%E4%B8%BB%E8%BD%B4%E6%96%B9%E5%90%91%EF%BC%8C%E9%A1%B9%E7%9B%AE%E6%8E%92%E5%88%97%E6%96%B9%E5%90%91row%EF%BC%88%E4%BB%8E%E5%B7%A6%E5%88%B0%E5%8F%B3%EF%BC%89%20row-reverse%EF%BC%88%E4%BB%8E%E5%8F%B3%E5%88%B0%E5%B7%A6%EF%BC%89column%EF%BC%88%E4%BB%8E%E4%B8%8A%E5%88%B0%E4%B8%8B%EF%BC%89column-reverse%EF%BC%88%E4%BB%8E%E4%B8%8B%E5%88%B0%E4%B8%8A%EF%BC%89%0Aflex-wrap%EF%BC%9A%E6%98%AF%E5%90%A6%E6%8D%A2%E8%A1%8C%EF%BC%8Cnowrap%3A%E4%B8%8D%E6%8D%A2%E8%A1%8C%20wrap%E6%8D%A2%E8%A1%8C%20wrap-reverse%E5%90%91%E4%B8%8A%E6%8D%A2%E8%A1%8C%0Aflex-flow%EF%BC%9Aflex-direction%E5%92%8Cflex-wrap%E5%B1%9E%E6%80%A7%E7%9A%84%E7%AE%80%E5%86%99%E5%BD%A2%E5%BC%8F%EF%BC%8C%E9%BB%98%E8%AE%A4%E5%80%BC%E4%B8%BArow%20nowrap%0Ajustify-content%EF%BC%9A%E9%A1%B9%E7%9B%AE%E5%9C%A8%E4%B8%BB%E8%BD%B4%E4%B8%8A%E7%9A%84%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F%0A%20%20%20%20%20%20%20%20%20%20%20%20flex-start%E5%B7%A6%E5%AF%B9%E9%BD%90%20%0A%20%20%20%20%20%20%20%20%20%20%20%20flex-end%E5%8F%B3%E5%AF%B9%E9%BD%90%20%0A%20%20%20%20%20%20%20%20%20%20%20%20center%E5%B1%85%E4%B8%AD%0A%20%20%20%20%20%20%20%20%20%20%20%20space-between%E4%B8%A4%E7%AB%AF%E5%AF%B9%E9%BD%90%EF%BC%8C%E9%A1%B9%E7%9B%AE%E4%B9%8B%E9%97%B4%E7%9A%84%E9%97%B4%E9%9A%94%E9%83%BD%E7%9B%B8%E7%AD%89%20%0A%20%20%20%20%20%20%20%20%20%20%20%20space-around%E6%AF%8F%E4%B8%AA%E9%A1%B9%E7%9B%AE%E4%B8%A4%E4%BE%A7%E7%9A%84%E9%97%B4%E9%9A%94%E7%9B%B8%E7%AD%89%EF%BC%88%E9%A1%B9%E7%9B%AE%E4%B9%8B%E9%97%B4%E7%9A%84%E9%97%B4%E9%9A%94%E6%AF%94%E8%BE%B9%E6%A1%86%E7%9A%84%E9%97%B4%E9%9A%94%E5%A4%A7%E4%B8%80%E5%80%8D%EF%BC%89%0A%0A11%E3%80%81Get%E3%80%81post%E7%9A%84%E5%8C%BA%E5%88%AB%0A**%E7%9B%B8%E5%90%8C%E7%82%B9%EF%BC%9A**%20GET%20POST%E6%98%AFhttp%E5%8D%8F%E8%AE%AE%E4%B8%AD%E7%9A%84%E4%B8%A4%E7%A7%8D%E5%8F%91%E9%80%81%E8%AF%B7%E6%B1%82%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%8Chttp%E7%9A%84%E5%BA%95%E5%B1%82%E6%98%AFTCP%2FIP%EF%BC%8C%E6%89%80%E4%BB%A5GET%E5%92%8CPOST%E7%9A%84%E5%BA%95%E5%B1%82%E4%B9%9F%E6%98%AFTCP%2FIP%EF%BC%8C%E5%8D%B3%E5%A5%B9%E4%BB%AC%E7%9A%84%E6%9C%AC%E8%B4%A8%E4%B8%8A%E5%B0%B1%E6%98%AFTCP%E9%93%BE%E6%8E%A5%0A**%E4%B8%8D%E5%90%8C%E7%82%B9%EF%BC%9A**1%20get%E6%96%B9%E6%B3%95%E4%BC%A0%E8%BE%93%E8%BF%87%E7%A8%8B%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E6%94%BE%E5%9C%A8url%E5%90%8E%EF%BC%8C%E7%94%A8%EF%BC%9F%E9%9A%94%E5%BC%80%EF%BC%8Cpost%E6%95%B0%E6%8D%AE%E6%94%BE%E5%9C%A8html%E5%8C%85%E7%9A%84request%20body%E4%B8%AD%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%202%20get%E6%8F%90%E4%BA%A4%E6%95%B0%E6%8D%AE%E6%9C%89%E5%A4%A7%E5%B0%8F%E9%99%90%E5%88%B6%EF%BC%8Cpost%E6%B2%A1%E6%9C%89%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%203%20get%E6%AF%94post%E6%9B%B4%E5%8A%A0%E4%B8%8D%E5%AE%89%E5%85%A8%EF%BC%8C%E4%BD%86%E6%98%AFpost%E4%B9%9F%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87f12%E6%9F%A5%E7%9C%8B%EF%BC%8C%E6%89%80%E4%BB%A5%E5%B7%AE%E5%88%AB%E4%B8%8D%E5%A4%A7%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%204%20get%E5%8F%91%E4%B8%80%E6%AC%A1%E5%8C%85%EF%BC%8C%E5%B0%86http%20header%E5%92%8Cdata%E4%B8%80%E8%B5%B7%E5%8F%91%E8%BF%87%E5%8E%BB%EF%BC%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%93%8D%E5%BA%94200%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20post%20%E5%8F%91%E4%B8%A4%E6%AC%A1%E5%8C%85%EF%BC%8C%E5%85%88%E5%8F%91%E9%80%81header%EF%BC%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%93%8D%E5%BA%94100%EF%BC%8C%E5%9C%A8%E5%8F%91%E9%80%81data%EF%BC%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%93%8D%E5%BA%94200%20ok%EF%BC%88%E8%BF%94%E5%9B%9E%E6%95%B0%E6%8D%AE%EF%BC%89%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%E5%9C%A8%E7%BD%91%E7%BB%9C%E4%B8%8A%E8%89%AF%E5%A5%BD%E7%9A%84%E6%83%85%E5%86%B5%E4%B8%8B%EF%BC%8C%E5%8F%91%E4%B8%80%E6%AC%A1%E6%88%96%E6%98%AF%E4%B8%A4%E6%AC%A1%E5%8C%85%E7%9A%84%E6%97%B6%E9%97%B4%E5%8F%AF%E4%BB%A5%E5%9F%BA%E6%9C%AC%E6%97%A0%E8%A7%86%EF%BC%8C%E7%BD%91%E7%BB%9C%E5%B7%AE%E7%9A%84%E6%97%B6%E5%80%99%E4%B8%A4%E6%AC%A1%E5%8C%85%E7%9A%84TCP%E5%9C%A8%E9%AA%8C%E8%AF%81%E6%95%B0%E6%8D%AE%E5%8C%85%E7%9A%84%E5%AE%8C%E6%95%B4%E6%80%A7%E4%B8%8A%EF%BC%8C%E6%9C%89%E5%BE%88%E5%A4%A7%E7%9A%84%E4%BC%98%E7%82%B9%EF%BC%88%E4%B8%8D%E6%98%AF%E6%89%80%E6%9C%89%E6%B5%8F%E8%A7%88%E5%99%A8%E9%83%BD%E4%BC%9A%E5%9C%A8post%E4%B8%AD%E5%8F%91%E9%80%81%E4%B8%A4%E6%AC%A1%E5%8C%85%EF%BC%89%0A12%E3%80%81%E4%BB%80%E4%B9%88%E6%98%AF%E7%B2%BE%E7%81%B5%E5%9B%BE%EF%BC%9F%E4%BC%98%E7%82%B9%EF%BC%9F(%E8%BF%99%E4%B8%AA%E9%80%9A%E5%B8%B8%E6%98%AF%E5%9C%BA%E6%99%AF%E6%8F%90%E9%97%AE%EF%BC%9A%E6%AF%94%E5%A6%82%E9%97%AE%EF%BC%8C%E6%9F%90%E4%B8%AA%E7%BD%91%E7%AB%99%E5%BE%88%E5%A4%9A%E5%9B%BE%E7%89%87%EF%BC%8C%E6%98%AF%E5%BC%95%E5%85%A5%E4%BA%86%E5%BE%88%E5%A4%9A%E5%BC%A0%E5%9B%BE%E7%89%87%E5%90%97%EF%BC%9F%E6%88%96%E8%80%85%E9%97%AE%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E5%8F%AF%E4%BB%A5%E5%9B%9E%E7%AD%94%E7%B2%BE%E7%81%B5%E5%9B%BE)%0A%20%20%20%20%E6%8A%8A%E4%B8%80%E4%B8%AA%E7%BD%91%E9%A1%B5%E7%9A%84%E5%A4%9A%E4%B8%AA%E5%9B%BE%E6%A0%87%2F%E5%9B%BE%E7%89%87%E6%94%BE%E5%9C%A8%E4%B8%80%E5%BC%A0%E5%9B%BE%E4%B8%8A%EF%BC%8C%E5%86%8D%E9%80%9A%E8%BF%87background-image%20background-repeat%20background-position%E6%9D%A5%E8%BF%9B%E8%A1%8C%E8%83%8C%E6%99%AF%E5%AE%9A%E4%BD%8D%0A%20%20%20%20%E4%BC%98%E7%82%B9%EF%BC%9A%E8%A7%A3%E5%86%B3%E8%AE%BE%E8%AE%A1%E5%B8%88%E5%9B%BE%E7%89%87%E5%91%BD%E5%90%8D%E9%97%AE%E9%A2%98%20%E6%9B%B4%E6%8D%A2%E9%A3%8E%E6%A0%BC%E6%96%B9%E4%BE%BF%0A13%E3%80%81%E4%BB%8E%E8%BE%93%E5%85%A5url%E5%88%B0%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%88%90%E7%9A%84%E8%BF%87%E7%A8%8B%EF%BC%9F%0A%20%20%20%201%20%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E8%BE%93%E5%85%A5url%0A%20%20%20%202%20%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%88%E6%9F%A5%E7%9C%8B%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98-%E7%B3%BB%E7%BB%9F%E7%BC%93%E5%AD%98-%E8%B7%AF%E7%94%B1%E7%BC%93%E5%AD%98%EF%BC%8C%E5%A6%82%E6%9E%9C%E7%BC%93%E5%AD%98%E4%B8%AD%E6%9C%89%EF%BC%8C%E4%BC%9A%E7%9B%B4%E6%8E%A5%E5%9C%A8%E5%B1%8F%E5%B9%95%E4%B8%AD%E6%98%BE%E7%A4%BA%EF%BC%8C%E8%8B%A5%E6%9E%9C%E6%B2%A1%E6%9C%89%EF%BC%8C%E5%B0%B1%E6%89%A7%E8%A1%8C%E4%B8%8B%E9%9D%A2%E6%93%8D%E4%BD%9C%EF%BC%9A%0A%20%20%20%203%20%E5%9C%A8%E5%8F%91%E9%80%81http%E8%AF%B7%E6%B1%82%E5%89%8D%EF%BC%8C%E9%9C%80%E8%A6%81%E9%80%9A%E8%BF%87%E5%9F%9F%E5%90%8D%E8%A7%A3%E6%9E%90%E8%8E%B7%E5%8F%96%E7%9B%B8%E5%BA%94%E7%9A%84IP%E5%9C%B0%E5%9D%80%0A%20%20%20%204%20%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%91%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%8F%91%E8%B5%B7tcp%E8%BF%9E%E6%8E%A5%EF%BC%8C%E5%BB%BA%E7%AB%8B%E4%B8%89%E6%AC%A1%E6%8F%A1%E6%89%8B%0A%20%20%20%205%20%E6%8F%A1%E6%89%8B%E6%88%90%E5%8A%9F%E5%90%8E%EF%BC%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%91%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%8F%91%E9%80%81http%E8%AF%B7%E6%B1%82%EF%BC%8C%E8%AF%B7%E6%B1%82%E6%95%B0%E6%8D%AE%E5%8C%85%0A%20%20%20%206%20%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%A4%84%E7%90%86%E6%94%B6%E5%88%B0%E7%9A%84%E8%AF%B7%E6%B1%82%EF%BC%8C%E5%B0%86%E6%95%B0%E6%8D%AE%E8%BF%94%E5%9B%9E%E8%87%B3%E6%B5%8F%E8%A7%88%E5%99%A8%0A%20%20%20%207%20%E6%B5%8F%E8%A7%88%E5%99%A8%E6%94%B6%E5%88%B0http%E5%93%8D%E5%BA%94%0A%20%20%20%208%20%E8%AF%BB%E5%8F%96%E9%A1%B5%E9%9D%A2%E5%86%85%E5%AE%B9%EF%BC%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%EF%BC%8C%E8%A7%A3%E6%9E%90html%E6%BA%90%E7%A0%81%0A%20%20%20%209%20%E7%94%9F%E6%88%90Dom%E6%A0%91%EF%BC%8C%E8%A7%A3%E6%9E%90css%E6%A0%B7%E5%BC%8F%EF%BC%8Cjs%E4%BA%A4%E4%BA%92%0A%20%20%20%2010%20%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%92%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BA%A4%E4%BA%92%0A%20%20%20%2011%20ajax%E6%9F%A5%E8%AF%A2%0A14%E3%80%81%E7%BD%91%E7%BB%9C%E4%B8%83%E5%B1%82%E5%8D%8F%E8%AE%AE(OSI)%E5%88%86%E5%88%AB%E6%98%AF%E5%93%AA7%E5%B1%82%EF%BC%8Ctcp%2Fudp%E3%80%81http%E5%88%86%E5%88%AB%E5%B1%9E%E4%BA%8E%E5%93%AA%E4%B8%AA%E5%B1%82%EF%BC%9F%0A%20%20%20%20%E5%BA%94%E7%94%A8%E5%B1%82%20%0A%20%20%20%20TELNET%EF%BC%8CHTTP%EF%BC%8CFTP%EF%BC%8CNFS%EF%BC%8CSMTP%0A%20%20%20%20%E8%A1%A8%E7%A4%BA%E5%B1%82%0A%20%20%20%20%E5%8A%A0%E5%AF%86%20ASCII%E7%AD%89%0A%20%20%20%20%E4%BC%9A%E8%AF%9D%E5%B1%82%0A%20%20%20%20RPC%20SQL%E7%AD%89%0A%20%20%20%20%E4%BC%A0%E8%BE%93%E5%B1%82%0A%20%20%20%20TCP%20UDP%0A%20%20%20%20%E7%BD%91%E7%BB%9C%E5%B1%82%0A%20%20%20%20IP%20IPX%0A%20%20%20%20%E6%95%B0%E6%8D%AE%E9%93%BE%E8%B7%AF%E5%B1%82%0A%20%20%20%20ATM%20FDDI%0A%20%20%20%20%E7%89%A9%E7%90%86%E5%B1%82%0A%20%20%20%20Rj45%20802.3%E7%AD%89%0A%0A%0A


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!