盒子模型（BOX MODEL）初体验

最新推荐文章于 2023-07-06 23:38:13 发布

拾指叁

最新推荐文章于 2023-07-06 23:38:13 发布

阅读量3.5k

点赞数

文章标签：盒子模型 web新人

本文链接：https://blog.csdn.net/W1948730080/article/details/80552615

版权

写在前面：小拾是web的初学者，所写仅为自己学习的内容与见解，若有错误尽情谅解。

盒子模型（Box model）

顾名思义，盒子模型就是形似盒子的表现形式，个人认为，相比于盒子，相框更能形象地表达这个模型，或者说，大盒套小盒也是非常形象的。具体可由下图表示：

盒子的主要属性：

width、height、margin、border、padding是盒子模型常用的属性。

margin：外边框。这是盒子的“外壳”，也就是盒子的最外层，也就是挂有相框的墙。
border：边框。这是盒子的第二层（这是由外而内看的），也就是相框的框。
padding：内边框。这是盒子的最后一层，也就是相框的框与照片之间的部分。
width和height：相信这两个属性是web学习这经常接触到的属性，width就是盒子内容(照片）的宽度而height就是高度。

ps：值得注意的是，这里的width和height有两种定义

标准盒子：这是标准的w3c盒子，width和height分别表示Content的宽和高；

IE盒子：与标准盒子不同的是，IE盒子的width和height表示的是Padding的宽和高。

样例解析：

<html lang="en">
<head>
    <title>BOX</title>

    <style>

        div {
            width: 100px;
            height: 10px;
            border: 1px solid red;
            padding: 70px 20px;
            margin: 30px;
            text-align: center;
        }
    </style>

</head>

<body>

<div>可爱的盒子</div>

</body>

</html>

这段代码在浏览器的显示如下：

如果想要给盒子加上颜色，可在div中加上如下代码

background-color:#b3d4fc;

这样盒子就多了颜色

注意，background-color添加的颜色是padding和content上的。

另外，border边框是可以拆分的，四个方向分别对应border-top,border-bottom,border-left,border-right。

拾指叁

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
盒子模型（BOX MODEL）初体验

盒子模型（Box model）顾名思义，盒子模型就是形似盒子的表现形式，个人认为，相比于盒子，相框更能形象地表达这个模型，或者说，大盒套小盒也是非常形象的。具体可由下图表示：盒子的主要属性 width、height、margin、border、padding是盒子模型常用的属性。width和height：相信这两个属性是web学习这经常接触到的属性，width就是盒子内容的宽度而he...
复制链接

扫一扫