学习地址：http://zh.learnlayout.com/display.html
1，把display设置成none元素不会占据它本来应该显示的空间，但是设置成visibility: hidden;还会占据空间。
2，把li元素修改成 inline，可以制作成水平菜单。
3，盒模型。当你设置了元素的宽度，实际展现的元素却超出你的设置：这是因为元素的边框和内边距会撑开元素。当你设置一个元素为box-sizing: border-box;时，此元素的内边距和边框不再会增加它的宽度。不过box-sizing是个很新的属性，目前你还应该使用-webkit（苹果浏览器）-和-moz-（火狐浏览器）前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。
4，在使用浮动的时候经常会遇到一个古怪的事情：图片比包含它的元素还高， 而且它是浮动的，于是它就溢出到了容器外面！有一种比较丑陋的方法可以解决这个问题，它叫做清除浮动overflow:auto; 如果你想要支持IE6，你就需要再加入如下样式：overflow:auto; zoom:1;
学习地址：http://www.5imoban.net/jiaocheng/div+css/2014/0311/312.html
CSS3 Media Queries
1，直接在link中判断设备的尺寸，然后引用不同的css文件。
<link rel="stylesheet" type=''text/css'' href=''styleB.css'' media=''screen and (min-width:600px) and (max-width:800px)''>,意思就是当屏幕的宽度大于600小于800的时候应用styleB.css样式文件
2，另一种方式是直接写在style标签里：
<style>@media screen and (max-width:600px){.class{blackground:#ccc}}</style>,意思就是当屏幕小于600时应用.class{blackground:#ccc}。
网友评论