前端技术总结三--CSS/Html篇
Css/Html篇
1、 css水平、垂直居中
水平居中
1) 行内元素: text-align: center
2) 块级元素: margin: 0 auto
3) position:absolute +left:50%+ transform:translateX(-50%)
4) display:flex justify-content: center
垂直居中
1) 设置line-height 等于height
2) position：absolute +top:50%+ transform:translateY(-50%)
3) display:flex align-items: center
4) display:table display:table-cell vertical-align: middle;
2、 CSS 选择符
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li:nth-child）
3、 CSS3新特性
- CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow），线性渐变（gradient）， - transform属性允许我们对元素进行旋转、缩放、移动或倾斜
rotate(9deg) //旋转 scale(0.85,0.90)// 缩放 translate(0px,-30px) //移动 skew(-9deg,0deg)//倾斜
- 增加了更多的CSS选择器 多背景 rgba
- 伪元素是::selection. 选择器匹配元素中被用户选中或处于高亮状态的部分。
- 媒体查询，多栏布局
- border-image
- animation动画
4、 初始化CSS样式
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响。
*不建议的方式： * {padding: 0; margin: 0;}。建议按照淘宝的方式，一个个写。
5、 Flex布局
定义：Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
1) flex-direction：属性决定主轴的方向（即项目的排列方向）
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
2) flex-wrap：如果一条轴线排不下，如何换行
nowrap（默认）：不换行
wrap：换行，第一行在上面
wrap-reverse;换行，第一行在下面
3) flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4) justify-content：属性定义了项目在主轴上的对齐方式。
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
5) align-items：属性定义项目在交叉轴上如何对齐。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
6) align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
项目属性：
order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
flex：属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self：属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto
6、 常用css属性
背景：
background-image设置背景图片，通常以图片的链接方式定义值
background-repeat设置背景如何重复平铺，默认情况下会在页面的水平或者垂直方向平铺
background-attachment定义背景图片随滚动轴的移动方式
background-position设置背景图像的起始位置
文本：
direction 设置文本方向
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰（underline下划线）
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母（大小写）
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
定位：
Position: absolute; relative; static;定位
visibility: inherit; visible; hidden;可见
overflow: visible; hidden; scroll; auto;滚动条
clip: rect(12px,auto,12px,auto) (裁切)
7、 html语义化
1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
8、 Cookie
优点：极高的扩展性和可用性
1.通过良好的编程，控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺点：
1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
Cookie主要用在以下三个方面:
1) 会话状态管理（如用户登录状态、购物车、游戏分数和其它需要记录的信息）
2) 个性化设置（如用户自定义设置、主题等）
3) 浏览器行为跟踪（如跟踪分析用户行为）
document.cookie = name + "=" + escape(value) + ";expires=" + date.toUTCString();
setCookie(name, ' ', -1);
9、 常见兼容性问题
* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
* 浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
#box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
* 渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
10、 storage和cookie
一：存储空间不同
1、web storage能提供5M的存储空间（不同浏览器不同），cookie提供4k的空间
2、web storage每个域（包括子域）都有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混淆
二：与服务端交互
1、web storage中的数据仅仅是本地存储，不会和服务器发生任何交互
2、cookie的内容会随着请求一并发送到服务器（每请求一个新的页面时，cookie都会被发送过去，无形中造成带宽浪费）
三：接口：
1、web storage提供了许多丰富易用的接口，拥有setItem，removeItemgetItem，clear，key等方法，操作数据更简单
2、cookie需要自己封装setCookie，getCookie等
11、 websocket
WebScoket是一种让客户端和服务器之间能进行双向实时通信的技术。它是HTML5的一个协议规范，本质上是个基于TCP的协议，它通过HTTP/HTTPS协议发送一条特殊的请求进行握手后创建了一个TCP连接，此后浏览器/客户端和服务器之间便可以通过此连接来进行双向实时通信。方法：ws.onopen、ws.onerror、ws.onmessage、ws.onclose。
12、 常用的请求方式
1) get向特定的路径资源发出请求，数据暴露在url中
2) post向指定路径资源提交数据进行处理请求，数据包含在请求体中
3) options返回服务器针对特定资源所支持的http请求方法，允许客户端查看，测试服务器性能
4) head 向服务器与get请求相一致的响应，响应体不会返回，可以不必传输整个响应内容
5) put从客户端向服务器端传送的数据取代指定的文档的内容
6) delete请求服务器删除指定的页面
7) trace回显服务器收到的请求，主要用于测试或者诊断
8) connecthttp/1.1协议中预留给能够将连接改为管道方式的代理服务
13、 get、post的区别
1.get传参方式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参方式参数URL不可见
2.get传递数据是通过URL进行传递，对传递的数据长度是受到URL大小的限制，URL最大长度是2048个字符。post没有长度限制
3.get后退不会有影响，post后退会重新进行提交
4.get请求可以被缓存，post不可以被缓存
5.get请求只URL编码，post支持多种编码方式
6.get请求的记录会留在历史记录中，post请求不会留在历史记录
7.get只支持ASCII字符，post没有字符类型限制
14、 画三角形
.shape { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 50px solid transparent; border-bottom: 50px solid blue; background: white; }
15、CSS优先级顺序
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认样式
16、em和rem
rem
rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px，以此类推。
优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。
em
参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。
17、vw、vh
