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

最新推荐文章于 2022-12-01 00:24:05 发布

芳草碧连天lc

最新推荐文章于 2022-12-01 00:24:05 发布

阅读量655

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/leichaoaizhaojie/article/details/53143224

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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}就可以了。

芳草碧连天lc

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS入门系列（五）CSS的盒子模型

CSS入门系列（五）CSS的盒子模型页面的布局之前在html中主要是表格形式布局，每个格子不同的内容，而现在流行的是div+css的布局方式，把页面分成不同的div，css去设置每个div的显示效果。而讲布局前，先介绍一个概念，盒子。目录CSS入门系列五CSS的盒子模型目录盒子边框 border内边距padding外边距margin1. 盒子我们把数据封装起来，一块一块的组成网页，而这个一
复制链接

扫一扫

专栏目录