CSS的一些记录
1.清除浮动（待补充，就是刚才看到了先记录一下）
浮动问题：一般来说，在文档流中，子div的高度会撑开父div。但是当给子div设置了float之后它就不会撑开父div了。此时父div的height会是0，这将导致一些问题。
解决办法：（1）overflow：hidden；或者overflow：auto；
（2）在最后浮动的div那里添加一个<div style="clear:both"></div>来清除浮动
（3）在父div使用伪类元素:after{content:"";display:block;clear:both;}，这其实与（2）是一个道理，不过是用了伪类元素，省的自己写html了。
更具体的请看这篇的博文：http://www.cnblogs.com/ForEvErNoME/p/3383539.html
2.父子div嵌套时的margin问题
问题描述：父子div嵌套的时候，子div的margin-top不会撑开父div的height。而是会将这个margin-top作用于父div，如果还有祖父div，它会一直向上传递，作用于最高层的div。甚至是body元素。
代码如下：
<body>
<div class="outer"> <div class="son"> </div> </div> </body>
body{ margin:0; padding:0; } .outer{ height:auto; background-color:black; width:300px; } .son{ height:20px; width:100%; margin-top:20px; background-color:red; }
盒模型数据如下：
html的盒模型：元素高度40，正确
body的盒模型：元素高度20，没有margin 按理说应该会与html元素的上边沿平齐。但实际效果↓
与html上边缘有20px的距离。
父div的盒模型，高度没有被撑开。很直观的错误。
子div的盒模型，高度20，margin-top：20px。
解决办法：现在是给父div加了一个overflow：hidden的样式。
3.关于阴影box-shadow的使用
css3中有一个box-shadow属性，可以用来制作阴影，制造光线照射时的真实感。
格式：box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset];
取值：h-shadow是阴影的水平偏移量，v-shadow是垂直偏移量，坐标系是html的普通坐标系。剩下的都是可选参数。
blur：模糊半径，0代表不模糊，值越大越模糊。
spread：阴影半径，0代表不扩展，负数向小扩展，整数向大扩展。这主要用来制造一种距离感。与光源的距离。
color：阴影的颜色，如果不指定的话会默认取浏览器所规定的默认颜色。
inset：这是唯一的取值”inset“，如果不写的话默认是“外阴影”，写上的话会变成“内阴影“。
兼容性：用的时候记得把各内核的前缀都加上，或者使用自动添加前缀的工具。
具体效果自己多尝试。
另外谷歌的material设计概念中”真实纸片“的理念，采用了很多这个阴影效果来表达纸片之间的距离，层级概念。
ps.例如要将阴影放到左下角，则 box-shadow:3px 3px 6px -4px #000; 模糊3px，阴影比div小4px，然后向右、向下各移动3px。
4.关于background的记录。
background用于指定背景图片。格式为 background:color imageUrl offset-x offset-y attachment repeat;
这些字段并非必填，不写就会选用默认的值。
推荐将属性设置写在一行，因为有些字段值是css3规定的，浏览器不兼容需要添加前缀，写一起就不用添加前缀了。比如设置offset的属性：background-position。
背景图size可以另外用background-size:width height 来设置。有一方用了auto的话会根据另一个值进行等比例缩放，如果都指定的话会伸缩。
ps.还有一点需要注意的是在IE6/7中background是不包括border的。所以要注意兼容性。
5.关于float的一些问题。
浮动本质上还是基于文档流定位的。只是从常规文档流里抽出，放到了浮动文档流，注意此时这个块状元素仍然是块状元素。左浮动跟右浮动会时右浮动换行，如果左右对齐时要注意，右浮动前面有非右浮动元素也会让右浮动换行。
