[TOC]
### 1. 选择器类型？
~~~
1.css常用选择器
① .class ② #id ③ :hover ④* ⑤:before
⑥ :first-child⑦:after⑧:last-child⑨:nth-child(n)⑩:not(selector)
2.jQuery选择器
①css选择器jQuery都可以用，多加一个 $("css选择器")
~~~
示例：
~~~
<p class="test" id="first">hello world</p>
<h4>标题</h4>
(1)css元素选择器
p{color:pink}
(2)class选择器
.test{color:yellow}
(3)id选择器
#first{color:blue}
(4)分组选择器
p,h4{background:gray}
(5)后代选择器
div>span{} //选取div所有子元素为span的标签
div span{} //选中div之后的所有span元素
(6)兄弟选择器
div+p{}选取紧邻div之后的第一个兄弟元素
div~p{}选取紧邻div之后的所有兄弟元素
(7)伪类选择器
div:hover{}
input:focus{}
(8)伪元素
":before" 伪元素可以在元素的内容前面插入新内容
p:before{
content:''
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
content:''
}
(9).属性选择
div[class='test']{}
~~~
### 2. 元素垂直水平居中？
#### 1. 方法一 position
~~~
.parent{position:relative;}
.child{
position:absolute;
left:50%;
top:50%;
margin-left:-50%childwidth;（计算出确切的值，偏移的是子元素自身的一半）
margin-top:-50%childheight;
}
~~~
#### 2. 方法二 position+ transform
~~~
.parent{position:relative;}
.child{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
~~~
#### 3. 方法三 position+ margin
~~~
.parent{position:relative;}
.child{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto auto;
}
~~~
#### 4. 方法四 flex
~~~
.parent{
display: flex;
justify-content: center;
align-items: center;
}
~~~
#### 5. 方法五 grid
~~~
.parent{
display: grid;
}
.child{
justify-self: center;
align-self: center;
}
~~~
### 3.HTML标签整理分类
#### 1. 标签分类
- 块标签
~~~
//特点
1.独占一行
2.能够设置width,height
//常用的块标签
div,h1~h6,p,ul,li,dl,dt,dd
~~~
- 内联标签
~~~
//特点
1.并排显示
2.不能设置width,height
3.不能设置margin-top,margin-bottom
a,span,em,strong
~~~
- 内联块
~~~
//特点
1.并排显示
2.可以设置宽高
//常用的内联块标签
button,img,input
~~~
#### 2.原理
块标签：独占一行,能够设置宽高
~~~
div,h1~h6,p,ul,li,dl,dt,dd
默认值：
display:block;
~~~
内联标签:并排显示,不能设置宽高,margin-top,margin-bottom
~~~
a,span,em,strong
默认值：
display:inline
~~~
内联块:并排显示,可以设置宽高
~~~
button,img,input
默认值：
display:inline-block
~~~
内联元素和内联块元素水平居中 ：
~~~
display:block;
margin-left:auto;
margin-right:auto;
~~~
默认值：
~~~
块标签默认 display:block;
内联默认 display:inline;
内联块默认 display:inline-block
~~~
### 4. 盒子模型
~~~
1. 在ie6以上盒子模型和w3c标准相同，在这里只考虑标准情况。
2. 盒子模型分为四个部分：margin、border、padding、content
3. 当设置 box-sizing:content-box;(默认设置)时，设置padding,和border,它的宽度为content+margin+padding
4. 当设置box-sizing:border-box时，设置padding,和border,它的宽度还是会保持不变（浏览器中所占的空间不变，content会被挤小）
5. margin为元素偏移量，用来调整位置。
~~~
### 5.选择器的优先级别排序
~~~
<div class='test' id='first'>hello world</div>
元素选择器<class选择器<ID选择器<!important
div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important}
~~~
### 6.常用的布局方法
~~~
1.table表格布局 07年之前使用广泛,可以说是唯一的布局方式
2.float浮动+margin(经典)
3.inline-block布局——(有小问题设置父元素的font-size:0)
4.flexbox布局(正统的布局方式)
~~~
### 7.flex布局
~~~
1. 概念：Flex为"弹性布局"，通过使用display和flex属性来快速实现页面布局。
2. 应用场景：多盒子布局（排列）、响应式、元素水平居中...
3. flex常用属性介绍：
① flex-direction: row | row-reverse | column | column-reverse;设置子元素的排列方式
② flex-wrap: nowrap | wrap | wrap-reverse;是否换行，wrap-reverse：从下往上排列
③ justify-content: flex-start | flex-end | center | space-between | space-around;
④ align-items: flex-start | flex-end | center | baseline | stretch;
⑤ order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。（item使用）
~~~
### 8.grid布局
~~~
1. 概念：grid为"二维网格布局"，通过使用display和grid属性来快速实现页面布局可同时处理列和行。
2. 应用场景：页面整体规划、制作无序排版页面、响应式、元素水平居中...
3. grid常用属性介绍：
① grid-template-row -->行模板 参数任意 几个参数代表几行 第几个参数的大小代表第几列的宽度
② grid-template-column -->列模板 参数任意 几个参数代表几列 第几个参数的大小代表第几行的宽度
③ grid-column: 1 / 4;等价于grid-column-start: 1;和grid-column-end: 4;
④ grid-template-columns: repeat(12, 1fr); 均分12等分
⑤ grid-gap: 5px; 网格间距
⑥ grid-template-areas: 网格区域 （字母的排版代表布局样式）
⑦ grid-area: h; 子网格对应 网格区域的字母
⑧ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
~~~
### 9. web资源访问流程（当浏览器输入url回车都干了什么）
~~~
1. 首先查找window中host文件有没有主机对应的ip地址，如主机为www.baidu.com
2. 如果window不知道（找不到主机对应的ip地址）则问dns服务器
3. 用查询到的ip去连接服务器 如：百度服务器
4. 连接上服务器（涉及三次握手）之后向服务器发送请求（请求信息中包含了要访问的主机名如：www.baidu.com）
5. 服务器从请求信息中获取客户机想访问的主机名、web应用、web资源
6. 服务器读取相应主机下的web应用下的web资源，如index.html
7. 用得到的web资源数据构建一个http响应，并回送给浏览器。一个完整的响应消息主要包括响应首行、响应头信息、空行和响应正文。
8. 浏览器接收http响应，解析出数据资源并显示
~~~
三次握手
~~~
http三次握手（确认整个网络是连通的即可，是明文传输）
1. ① 客户端向服务器发送想要创建连接的数据包请求
② 服务器开启端口向客户端返回数据包
③ 客户端向服务器发送数据包请求（告知服务器已接收服务器二次握手的信息）
2. 三次握手的作用：防止由于网络延迟导致的数据丢失而开启不必要的数据连接从而降低服务器不必要的开销
3. 经过三次握手之后创建tcp连接（用于数据传输）
~~~
~~~
https三次握手（相对安全）
说明：公钥是放在互联网上传输，私钥只存在于服务端
1. ① 客户端生成随机数和支持的随机套件发送到服务端
2. ② 服务器端生成随机数和服务器端证书（公钥）发给客户端
3. ③ 客户端拿到服务端生成的随机数先存着然后根据传来的公钥生成预主秘钥（公钥）然后使用公钥加密产生的随机数，然后传给服务器（加密的预主秘钥）
4. 服务端使用只有服务端才有的私钥进行解密也生成一个预主秘钥
5. 服务端和客户端同时使用这三个随机字符串进行一个算法操作各生成一个主秘钥，最后服务端和客户端通过主秘钥进行加密传输
~~~
~~~
简单来说就是：前两次握手两端各生成一个随机数并传输给对方，第三次客户端根据接收的公钥加密后再成一个字符串然后再传输，最后两边通过三个字符串进行算法操作生成主密钥进行数据传输
~~~
