1. 实现水平垂直的方法
- flex布局: display:flex; justify-content：center;align-items:center;
- grid布局：display:grid; justify-content:center;align-items:center;
- position: 父元素：position:relative; 子元素：position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
2. css画三角形
- 利用border
.div{
width:0;
height:0;
border-top:50px solid blue;
border-bottom:50px solid transparent;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
- 利用linear-gradient
.div{
width:200px;
height:200px;
background:linear-gradient(45deg,green,green 50%,blue 50%, blue 100%)
}
- transform: rotate 配合 overflow: hidden
.triangle {
width: 141px;
height: 100px;
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: deeppink;
transform-origin: left bottom;
transform: rotate(45deg);
}
}
- 利用clip-path
.div {
width: 100px;
height: 100px;
background: deeppink;
clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
- 利用字符
◄ : ◄
► : ►
▼ : ▼
▲ : ▲
⊿ : ⊿
△ : △
<div class="normal">▼ </div>
div {
font-size: 100px;
color: deeppink;
}
3. 什么是盒子模型
- 在HTML文档中，每个元素都有盒子模型。由外到内分别为最外边距区域
(margin area)，边框区域(border area)，内边距区域(padding area)和内容区域(content area)。 - 有W3C盒子模型和IE盒子模型
`box-sizing: content-box` 是W3C盒子模型\
在标准的盒子模型中，`width`仅指`content`部分的宽度。
`box-sizing: border-box` 是IE盒子模型\
在IE盒子模型中，`width`表示`content+padding+border`这三个部分的宽度。
`box-sizing: inherit` j继承父级盒子模型\
`box-sizing`的默认属性是`content-box`
.content {
width: 200px;
height: 200px;
margin: 50px;
border: 25px solid #57adb7;
padding: 25px;
background-color: #49657e;
}
4. 绝对定位和相对定位
Absolute：元素会脱离文档流，定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。定位为absolute后，原来的位置相当于是空的，下面的元素会上来占据。
Relative：元素仍处于文档流中，定位是相对于原本自身的位置（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。但是可能会遮挡到其他元素，若没有设置宽度，则宽度为父元素的宽度。
fixed: 是元素固定于浏览器可视区的位置，不占空间，不随页面滚动条滚动，跟父元素没有关系
5. get和post的区别
- Get请求的数据（参数）会显示在地址栏，而Post不会，所以，Post比Get更加安全。
- Post请求的参数存放到了请求实体中，而Get没有请求实体，Get是存储在请求行中。
- 数据传输Post有优势：Get方式请求的数据不能超过2k，而Post 没有上限。
- 浏览缓存Get有优势：Get具有数据缓存，而Post没有。 从优势角度看，数据传输使用Post，数据浏览查询使用Get。即查询时使用Get，其他时候使用Post。表单全部使用Post提交
5. 中断ajax请求
- 设置超时时间让ajax自动断开timeout
- 另一种为手动去停止ajax请求，其核心是调用XMLHttpRequest对象上的abort方法
6. http响应码
http协议是超文本传输协议，是用于从万维网服务器传输文本到本地浏览器的传送协议，是基于tcp/ip通信协议来传输数据的。
HTTP状态码(HTTP Status Code)是用以表示网页服务器超文本传输协议响应状态的3位数字代码。它由 RFC 2616 规范定义的，并得到 RFC 2518、RFC 2817、RFC 2295、RFC 2774 与 RFC 4918 等规范扩展。所有状态码的第一个数字代表了响应的五种状态之一。
HTTP状态码分为5种类型：
1** 信息，服务器收到请求，需要请求者继续执行操作
2** 成功，操作被成功接收并处理
3** 重定向，需要进一步的操作以完成请求
4** 客户端错误，请求包含语法错误或无法完成请求
5** 服务器错误，服务器在处理请求过程中发生了错误
下面给大家列举一些常见的状态码：
200 (成功) 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
201 代表成功请求并创建了新的资源 通常用于POST或者是PUT请求
301 代表永久重定向 指的是请求的资源已经被永久移动到新的URL 今后所有新请求都由新的URL代替
302 代表临时重定向 和301 类似 但资源暂时被移动 客户端应该继续用原URL
304 未修改 或者说本地缓存 指的是客户端通常会缓存被用户访问过的资源 所以 当一个数据第一次访问 是200 访问成功的时候 第二次就是304 指的是数据没被修改
400 (错误请求) 服务器不理解请求的语法。
401 (未授权) 请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
403 (禁止) 服务器拒绝请求。
404 (未找到) 服务器找不到请求的网页。
405 (方法禁用) 禁用请求中指定的方法。
407 (需要代理授权) 此状态代码与 401(未授权)类似，但指定请求者应当授权使用代理。
408 (请求超时) 服务器等候请求时发生超时。
500 (服务器内部错误) 服务器遇到错误，无法完成请求。
501 (尚未实施) 服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
502 (错误网关)服务器作为网关或代理，从上游服务器收到无效响应。
503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。通常，这只是暂时状态。
504 (网关超时) 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。
