所谓框模型,例如 div 标签,你就可以直接把它理解成一个相框。

这个相框里面的相片有高度和宽度,框本身也有一定的宽度。相框和别的相框之间,还有一定的边距。

1. div 设置常见属性

border:边框

padding:内边距

margin:外边距

image.png

  1. 图上的 element,就是相片。
  2. padding 就是相片与相框的间距。
  3. border 就是相框本身的宽度。
  4. margin 就是这个相框和别的相框之间的间距。

image.png

注意看此图,元素本身的宽度是 70px,加上左右两边各 5px 的内边距,再加上左右两边各 10px 的外边距。

这个 div 的实际宽度就达到 100px 了。

这一点要注意,设置 div 的宽度,其实只设置了里面元素的宽度。

div 的实际的宽度=宽度 + 内边距 + 边框 + 外边距。
由于外边距是看不见的空白,所以
div 的可见宽度=宽度 + 内边距 + 边框。

同理,div 的高度,也是一样的。

下面我们还是用代码来演示。

<html>
    <head>
        <style>
        div {
            /* 设置宽度为300px */
            width:300px;

            /* 设置高度为300px */
            height:300px;

            /* 设置边框为1px的线条 */
            border:1px solid;

            /* 设置内边距为5px */
            padding:5px;

            /* 设置外边距为10px*/
            margin: 10px;
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

那么请问,此时的 div 可见大小是多少呢?

312px*312px

此时 div 的实际大小是多少?

332px*332px

您算对了吗?

image.png

已添加到喜欢了