杂七杂八什么都有（二）

浏览器是怎样解析css选择器的
从右到左, 所以尽量不要使用多层选择

在网页中应该使用奇数还是偶数的字体
在网页中的应该使用“偶数”字体：
偶数字号相对更容易和 web 设计的其他部分构成比例关系
使用奇数号字体时文本段落无法对齐
宋体的中文网页排布中使用最多的就是 12 和 14

抽离样式模块怎么写
CSS可以拆分成2部分：公共CSS 和 业务CSS：
网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务
对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS

修改Chrome记住密码后自动填充表单的黄色背景
产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的
解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete=“off”
解决方案2：input:-webkit-autofill { background-color: transparent; }

怎么让Chrome支持小于12px 的文字

.shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }

闭包的特性

如果某个函数被它的父函数之外的一个变量引用，就形成了一个闭包

1. 函数嵌套函数
2. 函数内部可以引用外部的参数和变量
3. 参数和变量不会被垃圾回收机制回收（由于IE的js对象和DOM对象使用不同的垃圾回收机制，因此闭包在IE中无法销毁驻留在内存中的变量，其他浏览器可以使用mydata = null来销毁变量）

缺点：常驻内存，会增大内存的使用量，使用不当会很容易造成内存泄露
目的：设计私有变量和方法
作用：隐藏、封装、记忆函数

hasOwnProperty()

判断一个对象是否有存在某个属性
for in 会将原型中的值也循环出来，使用hasOwnProperty来过滤

Object.prototype.a = "other";
var obj = {
	b: 'attr1',
	c: 'attr2'
}
for( let key in obj){
	console.log(obj[key]) //=> attr1 attr2 other
}
方法一：
for( let key in obj){
	if(obj.hasOwnProperty(key)){
		console.log(obj[key]) //=> attr1 attr2
	}
}
方法二：
var arr = Object.keys(obj);
for (var i = 0; i < arr.length; i++) {
	console.log(obj[arr[i]])  //=> attr1 attr2
}
方法三：
for(let key of Object.keys(obj)){
	console.log(obj[key])   //=> attr1 attr2
}

$(document).ready和window.onload/$(window).load的区别

1. 执行事件
	onload必须等到页面内包括图片等所有元素都加载完之后才开始执行
	ready是DOM结构绘制完毕后就执行，不用等到加载完
2. 可编写个数不同
	onload编写多个只会执行最后一个
	ready编写多个时都可以执行
3. $(document).ready可简写为$(function(){})

为什么利用多个域名来存储网站资源会更有效

1. CDN缓存更方便（内容分发网络Content Relivery Network）
2. 突破浏览器并发限制
3. 节约cookie带宽
4. 节约主域名的连接数，优化页面响应
5. 防止不必要的安全问题

Http2.0特性

• 引入了“服务器推送（server push）”的概念，它允许服务端在客户端需要数据之前就主动将数据发送到客户端缓存中，从而提高性能
• 提供更多的加密支持
• 使用多路技术，允许多个消息在一个连接上同时交叉
• 增加了头压缩，所以即使是非常小的请求，其请求和响应的header都只会占用很小比例的带宽

浮动和清除浮动

浮动元素可以向左或向右移动，知道它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动元素会脱离正常文档流，所以文档的普通流的元素就表现的像浮动元素不存在一样，浮动元素会漂浮在正常文档流之上

清除浮动

1. 在浮动元素末尾（即父元素结束前）增加一个div，宽高都为0，增加clear:both
2. 为父元素添加overflow:hidden或overflow:auto
3. 在浮动元素末尾增加<br clear = "all"/>
4. 父元素也浮动（不推荐）
5. 父元素：dispaly: table
6. 父元素：after 
.wrap :after {
	content: "";
	display: block;
	clear: both;
}

浮动引起的问题：
1. 父元素高度无法被撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素（内联元素）会紧跟其后
3. 若不是第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

解决方法：
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：

 .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

    .clearfix{display: inline-block;} /* for IE/Mac */

cookie的弊端

cookie为持久保存客户端数据提供了方便，分担了服务器存储的负担，但有以下局限性：

1. 每个特定的域名下最多生成20个cookie
- IE6及以下最多20个cookie
- IE7以后最多50个cookie
- Firefox最多50个cookie
- chrome和safari没有做硬性限制

IE和opera会清理近期最少使用的cookie，firefox会随机清理cookie

cookie最大约为4KB,为了兼容性，一般不能超过4KB

IE提供了一种可以持久化存储用户数据的方法，userdata，从IE5开始支持，每个数据最多128K，每个域名下最多1M，这个持久化数据放在缓存中，如果缓存没有清理，就会一直存在

web storage和cookie的区别

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

box-sizing属性

.wrap{
	background-color: skyblue;
}
#inner{
	width: 200px;
	height: 200px;
	padding: 10px;
	border: 5px solid #337733;
	background-color: #ccc;
	box-sizing: ...
}
</style>
<body>
<div class="wrap">
	<div id="inner"></div>
</div>

content-box：让元素维持W3C的标准盒模型(默认),border和padding不计算入width之内，也就是说，整个界面的宽度要是content+padding+border   //此时#inner宽度为220px;
padding-box：padding计算入width内也就是说，整个界面的宽度要是content+padding  //此时#inner宽度为190px;
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式），border和padding计算入width之内，其实就是怪异模式了~也就是说，整个界面的宽度要是content的width    //此时#inner宽度为190px;

理解语义化

- html语义化就是让页面的内容结构化，便于浏览器，搜索引擎解析
- 在没有css的情况下也能以一种文档格式显示，并且是容易阅读的
- 搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重，利于seo
- 使阅读源码的人更容易将网站分块，便于阅读理解和维护

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

1. <!DOCTYPE>声明位于文档中的最前面，处于<html>之前，告知浏览器以何种模式来渲染文档
2. 严格模式的排版和js运作模式是以该浏览器支持的最高标准运行
3. 在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作
4. DOCTYPE不存在或格式错误会导致文档以混杂模式呈现

DOM操作

1. 创建新节点
	- createDocumentFragment()：创建一个DOM片段
    - createElement()：创建一个具体的元素

2. 添加、移除、替换、插入
	appendChild()
	removeChild()
	replaceChild()
	insertBefore()   //没有insertAfter
	
3. 查找
	getElementsByTagName()
	getElementsByName()   //通过元素的name属性值（IE容错能力较强，会得到一个数组，其中包括id等于name值的）
	getElementById()

canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#ccc"; //绘制的图形的填充颜色
ctx.fillRect(0,0,100,50);  //横坐标、纵坐标、宽、高（坐标原点在对象c的左上角）

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0); //定义线条的开始坐标
ctx.lineTo(200,100); //定义线条的结束坐标
ctx.stroke();

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(250,250,250,0,Math.PI);
//圆心在x轴的坐标、圆心在y轴的坐标、半径长度、起始角度（圆心平行的右端为0度）、结束角度
//Math.PI表示180度，画圆的方向是顺时针
ctx.stroke();
<p></script>

什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

FOUC - Flash Of Unstyled Content 文档样式闪烁
 <style type="text/css" media="all">@import "../fouc.css";</style>

而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

 解决：只要在<head>之间加入一个<link>或者<script>元素就可以了。