学习笔记

1. CSS中outline属性，是对盒子的轮廓设置，在没有设置outline-offset情况下是紧贴盒子的border。outline-offset是在距边框多少距离处设置outline。如图所示：

   
   
   outline-offset.jpg

2. input类型中，如果type为radio，checkbox的width设置为0，那么布局页面中就无法显示出来，也就无法使用:checked。

3. 没有脱离文档流的元素设置 height：100%。height跟随父元素设置了的height,如果父元素没有设置height，那么该元素height为0。脱离文档流的元素，他的height一直往上寻找设置了position的元素，如果没找到，则就认定html的height

4. 设置背景图的时候，盒子一定要有宽高，不然不会显示的。

5. 关于padding的特性：
   当padding的值为百分比时，这个百分比时根据该元素的width进行计算的。根据此特性可以用来图片的自适应布局。
   代码：

div {
padding: 15% 0 0;
position: relative;
  }
div > img {
 position: absolute;
 width: 100%; height: 100%;
 left: 0; top: 0;
  }

分析：div的高度padding值是15%的width值，因为div没有设置width，所以默认宽度为body宽度，因此这是div可以看做有了个“高度”值为15%的width。img设置成width: 100%; height: 100%，这样就可以让视窗在缩放时，div的“高度”值也在随着padding值一起变化，从而使得图片的width会等于视窗缩放时的宽度，height值等于视窗缩放时的宽度乘以15%！！！