标准盒子模型简单讲解

最新推荐文章于 2024-07-20 22:27:34 发布

zhq030314

最新推荐文章于 2024-07-20 22:27:34 发布

阅读量3.9k

点赞数

本文链接：https://blog.csdn.net/zhq030314/article/details/81295423

版权

今天给大家介绍一下盒子模型，首先盒子模型是什么？盒子模型是我们html布局中都会用到的，盒子模型顾名思义，就是装东西的，在html里面任意一个元素都可以当做一个盒子来看待，HTML中盒子就是用来装各种内容的。接下来给大家介绍一下盒子模型的基本内容。

盒子模型的基本组成部分：在符合w3c的下由外到内分别是margin border padding和元素content，标准盒子模型符合w3c的标准，所以在任意方向添加border padding content的宽高都会使元素整体占用空间变大。正常情况下width定义的是content的宽度，为了使大家更明白我用代码和图片表示一下：

首先我们先定义一个div：

<body>
<div id="div"></div>
</body>

在给他写一个css样式：

#div{
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 0 auto;
            border:10px solid blue ;
            padding: 20px;
        }

给一个图为了使大家更明白：

通过代码和图给大家简单讲解一下，最中间就是我们定义的宽度也就是content的宽度，当我们给padding加一个宽度的时候整个整体也变宽了，padding的距离就是蓝色区域到里面虚线的部分，在外面就是border，由图也很明显的看出也增加了整个整体的宽度，所以在任意方向添加border padding content的宽高都会使元素整体占用空间变大。

zhq030314

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
标准盒子模型简单讲解

今天给大家介绍一下盒子模型，首先盒子模型是什么？盒子模型是我们html布局中都会用到的，盒子模型顾名思义，就是装东西的，在html里面任意一个元素都可以当做一个盒子来看待，HTML中盒子就是用来装各种内容的。接下来给大家介绍一下盒子模型的基本内容。盒子模型的基本组成部分：在符合w3c的下由外到内分别是margin border padding和元素content，标准盒子模型符合w...
复制链接

扫一扫