您的位置：首页 > Web前端 > CSS

CSS-盒子模型

2016-08-09 10:58 351 查看

1、盒子模型概述：

2、内边距：

代码演示：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<table border="1">
<tr>
<td>内边距</td>
</tr>
</table>
</body>
</html>

css:

td{
/*padding:100px;  全部边距为100px*/
padding-left:100px;/*左内边距100px*/
padding-right:100px;/*右内边距100px*/
padding-bottom:100px;/*下内边距100px*/
padding-top:100px;/*上内边距100px*/
}

实现的效果：

3、边框

示例：

index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>边框样式</p>
<div class="cssid">CSS阴影效果</div>
</body>
</html>

css:

p{
border-radius:10px;/*圆角边框*/
width:200px;
background-color:aqua;
text-align:center;
border:2px solid blue;
}

.cssid{
background-color:blue;
width:100px;
height:100px;
text-align:center;
box-shadow:10px 10px 5px #FFccFF;
}

效果：

4、外边距

简单示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="mg">外边距</div>
</body>
</html>

body{
margin:0;
}
.mg{
border-color: blue;
width:100px;
height:100px;
margin:100px;/*距四边都为100px*/
}

结合外边距、内边距、边框：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="bd">
<div class="pd">
<div class="content">hello</div>
</div>
</div>
</div>
</body>
</html>

css：

body{
margin:0;
}
.container{
margin:100px;
}
.bd{
border-style: dotted;
}
.pd{
padding:100px;
}
.content{
background-color: blue;
}

效果：

5、外边距合并

6、盒子模型应用

绘制一个网站框架：

index.html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型的应用</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="top">
<div class="top_content"></div>
</div>
<div class="body">
<div class="body_img"></div>

<div class="body_content">
<div class="body_no"></div>
</div>
</div>
<div class="footing">
<div class="footing_content"></div>
<div class="footing_subnav"></div>
</div>
</body>
</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;
}

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航