盒子模型的内容范围包括:
margin、border、padding、content部分组成。
1.内边框
属性 描述
padding 设置所以边框
padding-bottom 设置底边框
padding-left 设置左边框
padding-right 设置右边框
padding-top 设置上边框
事例如下:
(1)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
td{
padding: 50px;
}
</style>
</head>
<body>
<table border="1">
<tr><td>内编剧</td></tr>
</table>
</body>
</html>
运行结果:
(2)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
td{
padding-left: 50px;
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
}
</style>
</head>
<body>
<table border="1">
<tr><td>内编剧</td></tr>
</table>
</body>
</html>
运行结果和上面一样。
2.边框
边框样式:border-style定义了10个不同的非继承样式,包括none。(该属性作用各个方向的边框)
边框的但边框样式:
border-top-style
border-left-style
border-right-style
border-bottom-style
边框的宽度:border-width
边框单边的宽度:
border-left-width
border-top-width
border-right-width
border-bottom-width
边框的颜色:border-color
边框单边颜色:
border-top-color
border-left-color
border-right-color
border-bottom-color
CSS3边框
border-radius: 圆角边框
border-shadow: 边框阴影
border-image: 边框图片
3外边距
属性 描述
margin 设置所以边距
margin-left 设置左边距
margin-right 设置右边距
margin-top 设置上边距
盒子模型事例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
margin: 0px;
}
.mg{
margin: 100px;
}
.bd{
border-style: dotted;
}
.pd{
padding: 50px;
}
.content{
background-color: blue;
}
</style>
</head>
<body>
<div class="mg">
<div class="bd">
<div class="pd">
<div class="content">盒子模型内容</div>
</div>
</div>
</div>
</body>
</html>
外边距合并:合并原则:两个之间谁的外边距值大的,两者的外边距就是大的那个边距值,外边距不是两者外边距的叠加。
4.下面是盒子模型的应用:简单的页面:头部、中部、尾部。
事例代码如下:
css代码:
*{
margin: 0px;
padding: 0px;
}
.top{
width:100%;
height: 50px;
background-color: black;
}
.topContent{
width: 75%;
height: 50px;
/* margin: 0px auto;上下为零左右自适应 */
margin: 0px auto;
background-color: blue;
}
.body{
margin: 20px auto;
width:75%;
height:1800px;
background-color: #008040;
}
.body_img{
width: 100%;
height: 400px;
background-color: #808040;
}
.body_info{
width: 100%;
height: 50px;
background-color:#408080;
}
.body_cotent{
width: 100%;
height: 1350px;
background-color: #804000;
}
.footing{
margin:10px auto;
width: 75%;
height: 400px;
background-color: #408080;
}
.footing_content{
width: 100%;
height: 340px;
background-color: orange;
}
.footing_info{
width: 100%;
height: 60px;
background-color: blue;
}
html代码:
<body>
<div class="top">
<div class="topContent">
</div>
</div>
<div class="body">
<div class="body_img"></div>
<div class="body_info"></div>
<div class="body_cotent"></div>
</div>
<div class="footing">
<div class="footing_content"></div>
<div class="footing_info"></div>
</div>
</body>