理解CSS盒模型

最新推荐文章于 2021-06-22 11:34:49 发布

jtg_Alan

最新推荐文章于 2021-06-22 11:34:49 发布

阅读量354

点赞数

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

本文链接：https://blog.csdn.net/qq_33845788/article/details/76358758

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS盒模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式

盒模型的结构

这里我们只讨论标准盒子模型，先来看一下盒模型的图解吧
这里引用一下w3school的图片
标准盒模型的图解

我们可以看到盒模型从内到外的元素依次为:

element:元素
padding:内边距
border:边框
margin:外边距
这些元素组合起来构成了一个盒子，所以叫做css的盒模型

例子

下面我们来看一个例子，理解一下盒模型

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box{
            width:200px;
            height:300px;
            background-color: aqua;
        }
    </style>
</head>
<body>

    <div class="box"></div>

</body>
</html>

这里写图片描述
我们可以看到div的结构，element元素是200 x 300的大小，css样式里对box设置的大小也是200 x 300.所以这里css样式里面设置的是element元素的大小.

我们再增加一些样式看一看效果

.box{
    width:200px;
    height:300px;
    background-color: aqua;
    padding:20px;
    border:10px solid red;
    margin:30px;
}

我们依次增加了:

padding:20px
border:10px
margin:30px

我们再来看一下div的结构
这里写图片描述
padding使盒子由之前的200x300的element的大小变为了上下左右四个方向分别延展了20px之后的盒子大小。同样的，border使盒子向四周延展了10px，margin使盒子向四周延展了30px.

你这时候会发现css里对box定义的200 x 300的大小已经不是盒子的大小了.盒子的真实大小为图片中延展之后的大小.

其他

可以试试如果把margin的solid去掉，那么可以发现margin此时并没有占据盒子的空间.加上solid之后，margin才占据盒子的空间，即把盒子向四周延展了10px.
如果对盒子背景加上填充色，可以发现，padding以及内部的element区域都被填充了背景色，border有自己的颜色，而margin没有填充色.
box-sizing属性设置为border-box,即box-sizing:border-box.可以确定盒子的大小，当再设置它的左右边框和左右补白后，它的内容区会自动调整.

jtg_Alan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
理解CSS盒模型

CSS盒模型CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式目录CSS盒模型目录盒模型的结构例子其他盒模型的结构这里我们只讨论标准盒子模型，先来看一下盒模型的图解吧这里引用一下w3school的图片我们可以看到盒模型从内到外的元素依次为:element:元素padding:内边距border:边框margin:外边距这
复制链接

扫一扫