盒子模型

原理

网页：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

特点

想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；让我们俯视这个盒子，它有上下左右四条边，所以每个属性除了内容（content），都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。

结构

内容（CONTENT）就是盒子里装的东西；而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，每个HTML标记都可看作一个盒子；
图片
在这里插入图片描述

HTML的每一个元素都适用于盒子模型。

盒子四大部分

1.外边距 margin;
2.盒子壁 border;
3.内边距 padding;
4.盒子内容 width+height;
width和height均指的是内容的宽度和高度，而不是整个的宽度
例如：

 <style>
       .div1{
           width:100px;
           height:120px;
           background-color:red;
           border:10px solid black;
           padding:30px;
           margin:20px;
       }
</style>

<body>
<div class="div1">
    AAABBBCCC
</div>
</body>

结果:
在这里插入图片描述

其中padding+width+height为内容可展示区域，例如设置底色后，padding是可见的。而margin则是内容不展示区域，设置了底色之后，内容为不可见。而对于嵌套的元素，也只是在content内，不涉及padding和margin。

盒子模型的计算实例

先了解一些知识点:
padding:4，3，2，1个值分别代表含义:
padding:100 100 100 100 是一个复合值，顺序为上、右、下、左;（为顺时针方向）
padding:100 100 100 为上、[左、右]、下
padding:100 100 为 [上、下]、[左、右]
padding:100 为 [上、下、左、右]
margin:4，3，2，1个值分别代表含义:
margin为4个时，margin:上右下左;（为顺时针方向）
margin为3个时，margin:上 [左、右] 下;
margin为2个时，margin:[上、下] [左右];
margin为1个时，margin:[上、右、下、左];
日常比较常见，需要记住:

盒子模型计算:

代码：

 <style>
        .example1{
            width:  100px;
            height: 100px;
            background-color: red;
            border:10px solid black;
            padding:10px 20px 30px;
            margin:10px 20px;
        }
        .example2{
            width:100px;
            height:100px;
            padding:0 100px;
            margin:10px 20px 30px 40px;
            border:1px solid orange;
            background-color:orange;
            padding:0;
        }
    </style>

<!--margin不能纳入可视区范围，不计入计算-->
<div class="example1"></div>
<div class="example2"></div>
//realheight:102px
//realWidth:102px
</body>

可知道：对于example1而言，其可视区的高度：100(内容)+10(border-top)+10(border-bottom)+10(padding-top)+30(padding-bottom) = 160px; 宽度： 100+10+10+20+20=160px
在这里插入图片描述
对于：example2,其可视区的高度：100(内容)+1 $\times$ 2(border)+ 30 $\times$ 2= 162px;宽度： 100+20 $\times$ 2+1 $\times$ 2=142px;
如果在一个选择器中有两个相同的属性，那么后面的值会覆盖前面的值，如果两个选择的权值相等，则后面的选择器会覆盖前面的选择器中相同的属性的值。

 <style>
        .example{
            width:  100px;
            height: 100px;
            background-color: red;
            border:10px solid black;
            padding:10px 20px 30px;
            margin:10px 20px;
        }
        .example{
            width:100px;
            height:200px;
            border:20px solid black;
            background-color:orange;
        }
    </style>

<body>
<div class="example"></div>
</body>

结果:
在这里插入图片描述

元素居中

div在body中居中

 <style>
        *{
            margin:0px;
            padding:0px;
        }
        div{
            position:absolute;
            width:100px;
            height:100px;
            background-color:#000000;
            left:50%;
            top:50%;
            margin-top:-50px;
            margin-left:-50px;
        }
    </style>

<body>
<div></div>
</body>

结果:
在这里插入图片描述

div嵌套居中

 <style>
        .outDiv{
            width: 100px;
            height: 100px;
            background-color:red;
            padding:100px;
        }
        .inDiv{
            width: 100px;
            height: 100px;
            background-color:black;
        }
    </style>

<body>
<!--notice嵌套的div只占据内容的大小，不涉及其他-->
<div class="outDiv">
 <div class="inDiv"></div>
</div>
</body>

在这里插入图片描述

CSS渡一教程学习笔记(五)--盒子模型