4.CSS盒子模型

来源：互联网发布：js 声明json 编辑：程序博客网时间：2024/06/05 22:54

盒子模型的内容范围包括：

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代码：

0 0