盒模型?什么是盒子模型?一个盒子模型包括,content(自身大小)、padding、border、margin总盒子的

什么是盒子模型?

盒模型:就是写网页时候的一种思维模式,每个元素都可以看成一个盒子,为了方便大家理解,我们可以把它当成一个"手机盒子",里面的手机就是我们所说的"content"部分,手机盒子中的白色填充泡沫,就是padding,手机盒子的厚度,就是我们所说的"border",盒子与盒子之间的距离,就是我们所说的"margin",

一个盒子模型包括,content(自身大小)、padding、border、margin

总盒子的大小?

总盒子的高度 height=content的高度+2倍的padding+2倍的border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>55.盒模型</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background: yellowgreen;
            padding: 20px;
            margin: 30px;
            border: 20px solid gold;
        }
    </style>
</head>
<body>
<div>111</div>
</body>
</html>

总盒子的宽度 width=content的宽度+2倍的padding+2倍的border
如果给样式里面加上box-sizing:border-box;的话,我们上面的代码中的width就是整个盒子的总宽度,盒子模型中的content部分就可以自己计算

盒子模型的两种类型?

标准盒模型:box-sizing:border-content
ie盒模型:box-sizing:boder-box

padding

在content部分写的文字内容,是不会到padding部分的,只会在content部分,但是背景颜色和背景图片是整个大盒子就可以,所以padding经常用来做内边距