1、盒子模型概述：
2、内边距：
代码演示：
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="style.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <table border="1"> 10 <tr> 11 <td>内边距</td> 12 </tr> 13 </table> 14 </body> 15 </html>
css:
1 td{ 2 /*padding:100px; 全部边距为100px*/ 3 padding-left:100px;/*左内边距100px*/ 4 padding-right:100px;/*右内边距100px*/ 5 padding-bottom:100px;/*下内边距100px*/ 6 padding-top:100px;/*上内边距100px*/ 7 }
实现的效果：
3、边框
示例：
index.html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="style.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <p>边框样式</p> 10 <div class="cssid">CSS阴影效果</div> 11 </body> 12 </html>
css:
1 p{ 2 border-radius:10px;/*圆角边框*/ 3 200px; 4 background-color:aqua; 5 text-align:center; 6 border:2px solid blue; 7 } 8 9 .cssid{ 10 background-color:blue; 11 100px; 12 height:100px; 13 text-align:center; 14 box-shadow:10px 10px 5px #FFccFF; 15 }
效果：
4、外边距
简单示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="style.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <div class="mg">外边距</div> 10 </body> 11 </html>
1 body{ 2 margin:0; 3 } 4 .mg{ 5 border-color: blue; 6 100px; 7 height:100px; 8 margin:100px;/*距四边都为100px*/ 9 }
结合外边距、内边距、边框：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="style.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <div class="container"> 10 <div class="bd"> 11 <div class="pd"> 12 <div class="content">hello</div> 13 </div> 14 </div> 15 </div> 16 </body> 17 </html>
css：
1 body{ 2 margin:0; 3 } 4 .container{ 5 margin:100px; 6 } 7 .bd{ 8 border-style: dotted; 9 } 10 .pd{ 11 padding:100px; 12 } 13 .content{ 14 background-color: blue; 15 }
效果：
5、外边距合并
6、盒子模型应用
绘制一个网站框架：
index.html代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>盒子模型的应用</title> 6 <link href="style.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <div class="top"> 10 <div class="top_content"></div> 11 </div> 12 <div class="body"> 13 <div class="body_img"></div> 14 15 <div class="body_content"> 16 <div class="body_no"></div> 17 </div> 18 </div> 19 <div class="footing"> 20 <div class="footing_content"></div> 21 <div class="footing_subnav"></div> 22 </div> 23 </body> 24 </html>
css代码：
*{ margin:0px; padding:0px; } .top{ 100%; height:50px; background-color: black; } .top_content{ 75%; height:50px; margin: 0px auto; background-color: blue; } .body{ margin:20px auto; 75%; height:1500px; background-color:blanchedalmond; } .body_img{ 100%; height:400px; background-color: darkorange; } .body_content{ 100%; height:1100px; background-color: blueviolet; } .body_no{ 100%; height:50px; background-color: aqua; } .footing{ 75%; height:400px; background-color: indigo; margin:0px auto; } .footing_content{ 100%; height:330px; background-color: darkseagreen; } .footing_subnav{ 100%; height:70px; background-color:black; }
效果：
