rem：rem是CSS新增的，em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素(r:root)，使用rem我们只需要在根元素确定一个参考值，然后就可以控制整个html页面所有字体了。
:checked 选择器范围
我们知道:checked会选择被选中的checkbox和radio，看个例子
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
:checked{
margin: 10px;
}
</style>
</head>
<body>
<input id="t1" type="checkbox" checked/>
<input id="t3" type="radio" checked/>
<select>
<option id="t2">test</option>
<option id="t4">test2</option>
</select>
</body>
</html>
对于前两个margin变成10px我们不奇怪，但是当我们看select的option的时候会发现被选中的option的margin业变成了10px，没有被选中的option则没有变化！
是的:checked也会选择被选中的option
并不是所有图片都会被加载
我们知道写在页面上的img标签，无论显示与否，图片都会被加载（所以试图通过对图片display:none来达到节省网络流量的做法就省省吧。。。），我们也经常使用backgroung-image等css属性为页面添加图片，这些图片是不是一定会被加载呢，看个例子
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.useless{
background-image: url(images/0.jpg);
}
.hidden{
background-image: url(images/1.jpg);
}
.none{
background-image: url(images/2.jpg);
}
.parentHidden{
background-image: url(images/3.jpg);
}
.parentNone{
background-image: url(images/4.jpg);
}
</style>
</head>
<body>
<div class="hidden"></div> <div class="none"></div>
<div style="visibility:hidden;">
<div class="parentHidden"></div>
</div>
<div style="display:none;">
<div class="parentNone"></div>
</div>
<div style="display:none">
</div>
