CSS盒模型

tianzyc 2020-02-22

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;
}

CSS盒模型

盒子在页面中真实的显示

 CSS盒模型

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

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

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

W3c标准盒模型

 CSS盒模型

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

盒子总大小则是:

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

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

IE盒模型

 CSS盒模型

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

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

  box.width = margin * 2 + width

  box.height = margin * 2 + height

解决兼容问题

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

写在最后:

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

相关推荐

aSuncat / 0评论 2020-08-18