css盒子模型

最新推荐文章于 2022-04-25 16:09:09 发布

DDL_lalala

最新推荐文章于 2022-04-25 16:09:09 发布

阅读量274

点赞数

分类专栏： CSS 文章标签： CSS盒子模型盒子模型 CSS

本文链接：https://blog.csdn.net/DDL_lalala/article/details/103199849

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简要的来说，CSS盒子模型由四部分组成：content（内容）、padding（内边距）、border（边框）、margin（外边距）。下面用一幅图来说明。

下面用代码来实现一下盒子在网页中的布局。
1.首先在body中写入两个div，如：

<div class="div1">我是div1</div>
<div class="div2">我是div2</div>

2.再设置两个盒子的样式（宽、高、边框），*{ }表示的是去除整个页面的内外边距，因为在实际开发中并不需要系统默认的内外边距，会影响我们的网页布局。如：

*{
   margin: 0;
   padding: 0;
}
.div1{
       width: 200px;
       height: 200px;
       border: 5px solid salmon;
}
.div2{
       width: 200px;
       height: 200px;
       border: 5px solid crimson;
}

盒子即为
在这里插入图片描述
3.要实现两个盒子水平布局，就要设置块元素为行内块元素（众所周知，div为块元素），这样块元素就具有了行内元素的不换行特点，可以在一行内依次排列，设置方式为display: inline-block;，这样盒子就会水平排列，如下图。
在这里插入图片描述
4.可以看出两个盒子中间有空隙，在网页布局中，我们一般不需要有间隔，故要去掉，只需在body中设置font-size: 0;即可，如：

body{
      font-size: 0;
}

但这时的盒子变成了这样，
在这里插入图片描述
5.虽然两个盒子之间没有边距了，但是盒子的内容也随之消失了，不要慌，分别设置盒子的字体就可以，即

font-size: 17px;

为什么设置字体为17px呢？一般情况下，系统默认的字体大小就是17px，当然也可以根据实际情况去设置。这时的盒子是不是很完美呢？
在这里插入图片描述
6.接下来就可以设置盒子的内外边距了，我们先设置外边距，

margin: 50px;

在这里插入图片描述
可以看出两个盒子的四个外边距（上、右、下、左）都为50px，而两个盒子中间的边距明显比其他地方要更大，因为当元素水平放置时，外边距是叠加计算的，此时边距为50+50=100px。
注意，若元素垂直放置时，外边距并不是叠加的，而是取相邻两个元素的外边距最大值。
这里，再讲讲外边距的值吧，同理，内边距也是如此。

margin: 0 0 0 0;    /* 上  右  下  左 */
margin: 0 0 0;     /* 上  右左  下 */
margin:0 0;     /*上下  左右*/
margin: 0;     /* 上右下左 */

7.再设置内边距，

padding: 50px;

盒子为
在这里插入图片描述
可以看出盒子的内容区离边框稍远了，这里的距离就是内边距50px。若不进行设置，内边距会默认向外扩展，这时的盒子就会变大。若想要盒子的大小不变，即添加代码box-sizing: border-box;即可。

这里只设置了div1的box-sizing属性，可以明显的看出div1的内边距是向内扩展的，box-sizing: content-box;也即默认属性，向外扩展。
9.最后设置两个盒子box-sixing都为向内扩展，这样一个盒子模型就完成了。

            box-sizing: content-box;

在这里插入图片描述
最后，将所有代码给大家参考。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 0;
        }
        .div1{
            width: 200px;
            height: 200px;
            border: 5px solid salmon;
            display: inline-block;
            font-size: 17px;
            margin: 50px;
            padding: 50px;
            box-sizing: border-box;

        }
        .div2{
            width: 200px;
            height: 200px;
            border: 5px solid crimson;
            display: inline-block;
            font-size: 17px;
            margin: 50px;
            padding: 50px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="div1">我是div1</div>
    <div class="div2">我是div2</div>
</body>
</html>

DDL_lalala

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css盒子模型

简要的来说，CSS盒子模型由四部分组成：content（内容）、padding（内边距）、border（边框）、margin（外边距）。下面用一幅图来说明。下面用代码来实现一下盒子在网页中的布局。1.首先在body中写入两个div，如：<div class="div1">我是div1</div><div class="div2">我是div2</...
复制链接

扫一扫