CSS入门系列(五)CSS的盒子模型
页面的布局之前在html中主要是表格形式布局,每个格子不同的内容,而现在流行的是div+css的布局方式,把页面分成不同的div,css去设置每个div的显示效果。而讲布局前,先介绍一个概念,盒子。
目录
1. 盒子
我们把数据封装起来,一块一块的组成网页,而这个一块就称为盒子。用来封装数据的一片区域为盒子。盒子模型有三项基本组成:
1. 边框 border
- border-top,上边框
- border-bottom,下边框
- border-right,右边框
- border-left,左边框
我们整几个盒子演示一下:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
border:#09F solid 1px;
height:100px;
width:200px;
}
#div_1{
background-color:#F90;
}
#div_2{
background-color:#F80;
}
#div_3{
background-color:#090;
}
</style>
</head>
<body>
<div id="div_1">
这是盒子1
</div>
<div id="div_2">
这是盒子2
</div>
<div id="div_3">
这是盒子3
</div>
</body>
显示如下:
2. 内边距padding
- padding-top,上边距
- padding-bottom,下边距
- padding-right,右边距
- padding-left,左边距
设置和边框类似,不举例了。
3. 外边距margin
- margin-top,上外边距
- margin-bottom,下外边距
- margin-right,右外边距
- margin-left,左外边距
外边距是指盒子到另个盒子或者页面边的距离。
注意: 当你设置margin=0px的时候,可能还没顶到网页的头,这是因为网页中body标签也有外边距,如果想要去除,只要设置body{margin=0px}就可以了。