css基础须知
CSS，层叠样式表
id 选择器与class 选择器
id 选择器以 "#" 来定义，class 选择器以"."显示
盒子模型
content：内容。padding：补白。border：边框。margin：边界。可以把它想象成旧时代一张被框装的老照片。
嗯？！，毫无违和感。
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#div1{float:left;width:10%;margin-left:10%;border:2px solid red}
#div2{float:right;width:10%;margin-right:10%;border:2px solid red}
.div3{
width: 100px;
height: 50px;
display: inline-block;
border: 2px solid blue;
}
.div4{
width: 100px;
height: 50px;
display: inline-block;
margin-left: 100px;
border: 2px solid blue;
}
.div5{
position: absolute;
left: 0;
width: 100px;
border: 2px solid green;
padding: 2px;
margin: 2px;
}
.div6{
position: absolute;
left: 200px;
width: 100px;
border: 2px solid green;
padding: 2px;
margin: 2px;
}
</style>
</head>
<body>
<div style="border:2px solid black;">
<div id="div1">第一个DIV盒子</div>
<div id="div2">第二个DIV盒子</div>
<div style="clear:both;"></div><!--清除浮动-->
<div class="div3">第三个DIV盒子</div>
<div class="div4">第四个DIV盒子</div>
<div class="div5">第五个DIV盒子</div>
<div class="div6">第六个DIV盒子</div>
</div>
</body>
</html>
效果如图：
CSS Display
隐藏元素：display:none（不占用空间，在布局中消失）或visibility:hidden（占用空间，影响布局）
CSS Overflow
overflow:hidden; 溢出内容会被修剪，其余内容是不可见的。
overflow:scroll; 溢出内容会被修剪，浏览器会以滚动条便于读者查看其余内容。
<div style="overflow: scroll;height: 100px;width: 30%;border: 1px solid black;padding-left: 20px;">
<p>文本内容可垂直滚动</p>
<p>文本内容可垂直滚动</p>
<p>文本内容可垂直滚动</p>
<p>文本内容可垂直滚动</p>
<p>文本内容可垂直滚动</p>
<p>文本内容可垂直滚动</p>
</div>
图片居中对齐
img {
display: block;
margin: 0 auto;
}
CSS3 圆角
div {
border: 1px solid black;
border-radius: 20px;
}
CSS3 盒阴影
div {
box-shadow: 8px 8px 6px black;
}