常见问题/知识点记录(五)

一 BFC是什么

BFC 全称为 块格式化上下文 (Block Formatting Context)
它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
BFC 特性(功能)
使 BFC 内部浮动元素不会到处乱跑
和浮动元素产生边界

二 css选择器的优先级

四个级别：行内样式，ID选择器，Class选择器，标签

1. !important的优先级是最高的
2. 优先级相同时，则采用就近原则，选择最后出现的样式
3. 继承得来的属性，其优先级最低

!important > 行内样式 >ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

三 清除浮动的几种方式

1. 利用clear样式
2. 父元素结束标签之前插入清除浮动的块级元素
3. 利用伪元素（clearfix)

.clearfix:after {
    content: '.';
    height: 0;
    display: block;
    clear: both;
}

4. 利用overflow清除浮动 overflow: auto;

四 数据存储的两种方式：Cookie 和Web Storage

Cookie在性质上是绑定在特定的域名下的，当设置了一个cookie后，再给创建它的域名发送请求时，都会包含这个cookie，这确保了储存在cookie中的信息智能让批准的接收者访问，而不能被其他域访问。可以通过document.cookie属性来设置cookie
Cookie的优点:

1. 可配置到期规则
2. 不需要任何服务器资源
3. 简单的键值对
4. 数据持久性
   Cookie的弊端:
5. Cookie数量和长度的限制
6. 安全性问题
7. 大量信息会影响到特定域的请求性能

Web Storage 的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端时，无需持续的将数据发回服务器

Web storage和cookie的区别？

1. Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
2. 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie
3. 但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生