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

CSS入门系列（五）CSS的盒子模型

2016-11-12 21:34 232 查看

CSS入门系列（五）CSS的盒子模型

页面的布局之前在html中主要是表格形式布局，每个格子不同的内容，而现在流行的是div+css的布局方式，把页面分成不同的div，css去设置每个div的显示效果。而讲布局前，先介绍一个概念，盒子。

目录

CSS入门系列五CSS的盒子模型
目录

盒子
边框 border

内边距padding

外边距margin

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}就可以了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航