1. 盒子模型
2. CSS边框
border-radius 圆角边框
box-shadow 边框阴影
3. CSS外边距合并
遵循 选取两个margin较大的 的原则
4. 基本应用
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>盒子模型</title> <link rel="stylesheet" type="text/css" href="mycss.css"> </head> <body> <div class="top"> <div class="top_content"></div> </div> <div class="body"> <div class="body_img"></div> <div class="body_content"></div> </div> <div class="footing"></div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>盒子模型</title> <link rel="stylesheet" type="text/css" href="mycss.css"> </head> <body> <div class="top"> <div class="top_content"></div> </div> <div class="body"> <div class="body_img"></div> <div class="body_content"></div> </div> <div class="footing"></div> </body> </html>
*{ /*通配符*/ margin: 0px; padding: 0px; } .top{ width: 100%; height: 50px; background-color: black; } .top_content{ width: 75%; height: 50px; margin: 0px auto; background-color: blue; } .body{ margin: 10px auto; width: 75%; height: 500px; background-color: blanchedalmond; } .body_img{ width: 100%; height: 200px; background-color: darkorange; } .body_content{ width: 100%; height: 300px; background-color: blueviolet; } .footing{ width: 75%; height: 110px; background-color: indigo; margin: 0px auto; }
原文：http://www.cnblogs.com/iMirror/p/4284973.html