浅谈CSS中的盒模型

Posted 2023-04-16

参考技术A

显然，盒模型比我想象的，比我最开始在前端课程中学到的其实要复杂得多。

我将现阶段学到的内容与过去学习所留下的印象进行对比，得出了如下我以为CSS盒模型中的难点和容易被忽视的点。

它是一切开始的基础

在MDN的文章中，盒模型被分为 标准盒模型 和 替代盒模型 。
通常我们一开始学习的盒模型是标准盒模型，它的width和heigth属性所设置的是content的宽度和高度，而不是盒子部分的宽度和高度（把border和它所围起来的部分叫盒子部分）
所以在练习布局的时候，我们有时候会觉得这个width和heigth很怪，并不能很方便直接地将我们心中所想象的布局表达出来，有时甚至需要计算。

而替代盒模型更符合我们的直觉。替代盒模型中的width heigth所指即为border所包括部分的width heigth.

将浏览器默认的标准盒模型改为替代盒模型

margin可以有负数，而padding不可以为负数。
负数意味着样式会重叠入侵。
[图片上传失败...(image-b2c4e1-1642049365894)]

可以参考视频: CSS外边距塌陷 - Web前端工程师面试题讲解

折叠的规则很好理解，大的覆盖小的，长的覆盖短的。
比如A和B的外边距折叠，A的外边距为10， B的外边距为20，那么结果是AB的间距为20。
外边距重叠的情况一共有三种。

之所以是垂直方向，是因为折叠发生在block元素上，block元素并不存在水平相接的情况。
对于Inline元素，比如说两个水平相接的span标签，实测是不会折叠的。

这个有点复杂，MDN的说法如下：

举例如下:
设置了border:solid, 正常：

将border:solid设置为none后，出现了折叠。（可以理解为偏移的参照系变化了，未设置Border，参照变成了上面的divB）

更为深入的探究，等往后遇到了再说吧。

参考： MDN盒模型

  Css中的盒模型及盒模型宽度计算

       CSS假定所有的HTML文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素(element box），可以形象地将其看作是一个盒子。CSS围绕这些盒子产生了一种“盒子模型”概念。

      盒模型，实际上就是把某些标签元素看成为一个箱子。箱子与其他箱子之间的距离，是箱子的最外围，它不是一条边线而是添加在边框外面的空间。这个外边距使元素盒子之间不必紧凑地连接在一起，是CSS布局的一个重要手段。用margin(外边距)属性来表示，margin-top，margin-right，margin-bottom，margin-left可以理解成箱子距离外面箱子的四个方向的距离。箱子自身的边框厚度，就用border属性来表示,一般可以设置其颜色，宽度，虚线实线等；箱子里装的物体，就是content,本身有宽度(weight)，高度(height)；物体和箱子会有一定的距离，这个距离就是padding(内边距)，有padding-top,padding-left,padding-right,padding-bottom.这就是我简单理解的盒模型。

   在调试时，根据颜色就很好看出这几部分到底是多少，到底位置在哪？用谷歌下的调试举例：橘***的部分就是这个元素所设置的margin属性值；如图：这个图就是：margin：20px auto;的结果：

***的部分就是这个元素所设置的Border属性值如图：

荷叶绿的部分就是这个元素的padding值，上下15px,左右25px如图：

 

蓝色代表就是物体本身的宽高。Weight:300px; height:300px;

 

     相应的盒模型的宽度就等于margin-left+margin-right+border-left+border-right+padding-left+padding-right+width;高度也是对应的加上内外边距与border。

  在新的css3中提出了box-sizing属性。在使用box-sizing属性值时，可以更好更方便的选择在指定用width属性，height属性来分别指定宽度值，与高度值时，是否包含元素的内外边距及边框的宽度高度。总的来说，使用box-sizing属性值，是为了用来控制元素的总宽高度。

这个属性包含：

content-box，border-box；

 默认为content-box，宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。盒模型的宽度，高度计算方法与上面一样，

但是在设置为border-box时，元素设定的宽度和高度决定了元素的边框盒。这个盒子的内外边距边框都不会增加它的宽度。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。