1.盒子模型_基本结构

一 盒子模型_基本结构

例如下方这个页面：https://www.php.cn/dic.html

因为内外边距都是透明的，所以样式变化最多最复杂的就是border

内边距，边框，外边距有四个方向：上右下左 即按照顺时针的方向（需牢记）：

一、什么是盒子:

    1.盒子模型也叫框模型,在浏览器眼中，页面上的一切元素,都可以看作是盒子

    2.盒子是元素的容器,也是元素的载体,说人话就是,盒子是元素的家

二、盒子的种类与功能:

    1.元素有二种:块级元素和行内元素,所以他们对应的家:盒子,当然也有二种:块级盒子,行内盒子

2.块级盒子通常当作其它元素的容器,行内盒子中总是放内容,通常行内盒子放在块级盒子中

三、盒子的排列方式:

    1.盒子是页面上的排列顺序,由总调度师:文档流说了算,除非盒子离家出走,脱离了文档流，浮动和绝对定位会脱离文档流

2.文档流既是元素排列的方式,又是排列的动作,所以既是名词也是动词

四、盒子模型的组成部分:

    1.因为盒子大多做元素容器使用,所以我们主要以块级盒子为例进行介绍

2.盒子的四大组成部分:content(内容),padding(内边距),border(边框),margin(外边距)

五、我们用四大美女来快速记忆盒子模型:

    1.content内容: 我们自己的老婆或者女朋友,这是看得见,摸得着的东西

    2.padding内边距:它是透明的,就像你老婆的闺蜜,时刻影响着你和老婆的关系

    3.border边框:它是可见的,它变化多端,风情万种,最撩人最风骚,就像你的红颜知己,梦中情人

4.margin外边距:和padding内边距一样也是透明的,就像老大的女人,哥们的老婆,永远活在你的想像中

代码：

执行，什么都看不到，因为盒子透明，但实际存在：

添加背景色

六、content内容:

    1.支持宽度width和高度height设置

    2.内部可以是块元素,也可以是行内元素

    3.支持背景设置

div中放一个图片

想让图片居中，给div加内边距40，能不能让图片居中？

不能，当添加内边距时，会把盒子撑大，添加40的内边距后盒子的宽高都变成280

此时想让图片居中，有两种解决方案

1 调整盒子的宽高，直接设置成和图片大小一样，设置内边距是上右下左都设置为40像素，图片自然居中（方案1还可以这样试试，重新设置宽高为图片宽度+内边框*2）

2 给当前盒子套一个父级盒子，并设置它的宽高（推荐用这种方式）

外边距讲解：

定义两个盒子：

给上面的盒子添加一个底部外边距20

再给下面的盒子顶部外边距20px，此时理论上，上下两个盒子之间应该有40px的距离，但是刷新后页面没有变化

我们通过审查元素可以看到上面盒子的下边距和下面盒子的上边距都是设置的20px，但是两个重叠了，这个叫做外边距的叠压

如果将上面的外边距设置为30，下面设置为50px,刷新之后发现边距变为了50

由此结论如下：

因为内外边距是透明且不可见的，所以只有宽度是可以设置的

上下外边距的二个特征:

1.如果上下外边距相等,并不会相加,而是相互叠加在了一起;

2.如果上下外边距不相等,则会产生塌陷,小的会陷入大的里面去,最终数值大的外边距胜出,以它为准

所以当我们在设置盒子的垂直排列时，需要设置外边距的时候，只需要设置下边距，或者只设置上边距，上下边距都设置没有意义，会叠加或者塌陷