HTML&CSS复习笔记一（Sun）

69 阅读 0 评论 46 点赞

我是靠谱客的博主刻苦冬日，最近开发中收集的这篇文章主要介绍HTML&CSS复习笔记一（Sun），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一垂直水平居中的多种方法：

未知宽高：

父元素设置：display：flex ; justify-content: center ; align-items : center

子绝父相后：top: 50%; left: 50% ; transform: translate（-50%，-50%）

知道宽高：

子绝父相后： margin： auto

子绝父相后：top: 50%; left: 50% ;margin：-50%px 0 0 -50%px

二 flex是怎么使用的以及flex：1是什么：

1）flex-direction属性

● flex-direction属性决定主轴的方向（即项目的排列方向）。

●  row（默认值）：主轴为水平方向，起点在左端。
●  row-reverse：主轴为水平方向，起点在右端。
●  column：主轴为垂直方向，起点在上沿。
●  column-reverse：主轴为垂直方向，起点在下沿。

2）flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

● nowrap（默认）：不换行。

● wrap：换行，第一行在上方。

● wrap-reverse：换行，第一行在下方。

3）flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4）justify-content属性

● justify-content属性定义了项目在主轴上的对齐方式。

● flex-start（默认值）：左对齐

● flex-end：右对齐

● center：居中

● space-between：两端对齐，项目之间的间隔都相等。

● space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5）align-items属性

align-items属性定义项目在交叉轴上如何对齐

● flex-start：交叉轴的起点对齐。

● flex-end：交叉轴的终点对齐。

● center：交叉轴的中点对齐。

● baseline: 项目的第一行文字的基线对齐。

● stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6）align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

● flex-start：与交叉轴的起点对齐。

● flex-end：与交叉轴的终点对齐。

● center：与交叉轴的中点对齐。

● space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

● space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

四、项目的属性

以下6个属性设置在项目上。

Order（order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。）

flex-grow（flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。）

flex-shrink（flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小）

flex-basis（flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。）

Flex（flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选）

align-self（align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖

四 http基础（三次握手四次挥手以及常见的状态码）

HTTP简介

HTTP（HyperText Transfer Protocol）即超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则，它是万维网交换信息的基础，它允许将HTML（超文本标记语言）文档从Web服务器传送到Web浏览器。

HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）的应用层协议。

HTTP工作原理

HTTP协议定义Web客户端如何从Web服务器请求Web页面，以及服务器如何把Web页面传送给客户端。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。

以下是 HTTP 请求/响应的步骤：

1. 客户端连接到Web服务器

一个HTTP客户端，通常是浏览器，与Web服务器的HTTP端口（默认为80）建立一个TCP套接字连接。例如，http://www.baidu.com。

2.发送HTTP请求

通过TCP套接字，客户端向Web服务器发送一个文本的请求报文，一个请求报文由请求行、请求头部、空行和请求数据四个部分组成。

3. 服务器接受请求并返回HTTP响应

Web服务器解析请求，定位请求资源。服务器将资源复本写到TCP套接字，由客户端读取。一个响应由状态行、响应头部、空行和响应数据四个部分组成。

4. 释放连接TCP连接

若connection 模式为close，则服务器主动关闭TCP连接，客户端被动关闭连接，释放TCP连接;若connection 模式为keepalive，则该连接会保持一段时间，在该时间内可以继续接收请求;

5. 客户端浏览器解析HTML内容

客户端浏览器首先解析状态行，查看表明请求是否成功的状态代码。然后解析每一个响应头，响应头告知以下为若干字节的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML，根据HTML的语法对其进行格式化，并在浏览器窗口中显示。

例如：在浏览器地址栏键入URL，按下回车之后会经历以下流程：

浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;

解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;

浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;

服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;

释放 TCP连接;

浏览器将该 html 文本解析加载其它资源显示内容;

面试题：TCP连接的三次握手与四次挥手

传送门

三次握手：
为了防止服务器端开启一些无用的连接增加服务器开销以及防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。

四次挥手：
释放连接时，被动方服务器，突然收到主动方客户端释放连接的请求时并不能立即释放连接，因为还有必要的数据需要处理，所以服务器先返回ACK确认收到报文，经过CLOSE-WAIT阶段准备好释放连接之后，才能返回FIN释放连接报文。

。

面试题：Cookie，Localstorage和Sessionstorage

传送门

localStorage、sessionStorage、Cookie共同点：都是保存在浏览器端，且同源的。

Cookie 随请求携带存储信息。

localStorage、sessionStorage只是浏览器本地数据存储。

请求方法

根据 HTTP 标准，HTTP 请求可以使用多种请求方法。

HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD方法。

HTTP1.1 新增了五种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。

序号	方法	描述
1	GET	请求指定的页面信息，并返回实体主体。
2	HEAD	类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头
3	POST	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
4	PUT	从客户端向服务器传送的数据取代指定的文档的内容。
5	DELETE	请求服务器删除指定的页面。
6	CONNECT	HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
7	OPTIONS	这个方法可使服务器传回该资源所支持的所有HTTP请求方法。用’*'来代替资源名称，向Web服务器发送OPTIONS请求，可以测试服务器功能是否正常运作等。
8	TRACE	回显服务器收到的请求，主要用于测试或诊断。
9	PATCH	是对 PUT 方法的补充，用来对已知资源进行局部更新。