CSS-盒子模型

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     width:200px;
 4     background-color:aqua;
 5     text-align:center;
 6     border:2px solid blue;
 7 }
 8 
 9 .cssid{
10     background-color:blue;
11     width: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     width: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{
    width:100%;
    height:50px;
    background-color: black;
}
.top_content{
    width:75%;
    height:50px;
    margin: 0px auto;
    background-color: blue;
}
.body{
    margin:20px auto;
    width:75%;
    height:1500px;
    background-color:blanchedalmond; 
}
.body_img{
    width:100%;
    height:400px;
    background-color: darkorange;
}
.body_content{
    width:100%;
    height:1100px;
    background-color: blueviolet;
}
.body_no{
    width:100%;
    height:50px;
    background-color: aqua;
}
.footing{
    width:75%;
    height:400px;
    background-color: indigo;
    margin:0px auto;
}
.footing_content{
    width:100%;
    height:330px;
    background-color: darkseagreen;
}
.footing_subnav{
    width:100%;
    height:70px;
    background-color:black;
}

 

效果：

 

posted @ 2016-08-09 10:58  UniqueColor  阅读(235)  评论(0)  编辑  收藏  举报