CSS 盒模型

css盒模型算得上是web布局的基石了。要想写好整个web项目，那就必须深入了解盒模型，下面我们就来探究一下盒模型所涉及到的相关问题...

盒模型介绍

为了让一些元素看起来布局规整，引用"box model"这一概念，把网页各部分整齐划一。

各部分就好比盒子，而里面的元素 (content) 看作物品。

用泡沫 (padding) 防止物品晃动以至于震荡破碎，放在网页上则是不让它破坏布局。

而margin的作用呢，则是为了保证物品之间留有空隙，用来规整元素在盒子里面的位置。

盒模型涉及元素兼容问题

margin（外边距）、padding（内填充）、content（内容）、border（边框）

注意：padding值不可为负

　　　如果让盒子保持原有大小，需要在宽高基础上减掉padding

　　　如果盒子没有宽高，则不需要减掉padding

　　　同级元素，垂直布局，则margin值会重合（以最大最为准），不会叠加

　　　父子元素，在一定条件下（父元素有其他内容、设置了内填充、边框，三者其一），也会发生margin-top值重合

下面看一下盒子实例：

/* 用p标签作为盒子实例 */
p{
　　width:200px;
　　height:100px;
　　background:#FDECA6;
　　border:30px solid brown;
　　padding:30px;margin:60px;
}

盒子在页面中真实的显示

 

按下F12调出调试窗口，然后检查元素，可以发现：

• 蓝色：表示内容区域
• 绿色：表示padding填充区域
• 橙色：表示border区域，数值代表border粗细
• 深橙色：表示margin外边距

通常浏览器，分为两种盒模型，W3c标准盒模型 和 IE盒模型。

W3c标准盒模型

 

这里盒子内容的宽高就是设置的width、height

而盒子总大小则是：

　　box.width = (margin + padding + border  /左右) * 2 + width

　　box.height = (margin + padding + border /上下) * 2 + height

IE盒模型

 

IE盒模型设置的width和height就不太一样了，他包含了content的大小、border的粗细和padding撑开的距离。

而这时候盒子的总大小则是：

　　box.width = margin * 2 + width

　　box.height = margin * 2 + height

解决兼容问题

解决这样的问题其实也非常简单，只要声明doctype统一。并且padding内填充给父元素，margin用于调整子元素位置即可。

写在最后：

　　　　2020多灾多难，祝愿大湖北的同胞萌能和我一起逆战到底！！奥利给！！