总是记不住的css盒子模型

月泽
218 阅读3分钟

写了这个标题之后，凝望了很久，不知道怎么开笔，因为这个名字起的优点丢人，让我不知道从何说起，作为一个前端开发，盒子模型这边基础的内容居然还记不住，就有点说不过去了，说到底就是基础薄弱，所以深刻反省之后，觉得得脚踏实地地一步一步把基础好好补一补。

啰嗦完了，正文开始

css盒子模型是在编写css布局时的一种思维模式，它拥有外边距margin、边框border、内边距padding、内容content四个属性。

一般编写布局和样式代码时，都会涉及到宽高的设置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子模型</title>
</head>
<body>
    <div class='box'></div>
</body>
</html>

body{
  padding:0;
  margin:0
}
.box{
  height: 100px;
  width: 100px;
  border: 5px solid blue;
  box-sizing: border-box;
  background-color: yellow
}

上面是设置了一个长100px，宽100px的div盒子，由于太贴近边框，给div添加一个外边距margin，使它可以与边框保持一定的距离。外边距margin是针对盒子的四个边的，如果没有特定指向的话，都是同时设置四个边框。看下图

margin: 20px

给盒子content添加内容，然后给个内边距

.box{
    ...
    padding: 20px
}

设置了padding之后，会发现box的大小并没有变，而是内容框content大小发生了变化，这种形式称之为 IE标准盒子模型，width = content + padding + border，当设置了一个盒子的宽高之后，再为它设置border和padding，盒子的宽高也不会发生变化，而是会以挤压盒子里面的空间。

OK，到这里，有的朋友可能会说，那如果我想不挤压盒子的大小，又想有border和padding的大小在，那怎么处理？CSS3提供了可以切换盒子模型模式的属性：box-sizing，它有2个值，分别是content-box和border-box，如果要实现上面这个需求，则需要给box设置box-sizing: content-box，添加之后，如下图

body{
  padding:0;
  margin:0
}
.box{
  height: 100px;
  width: 100px;
  border: 5px solid blue;
  box-sizing: border-box;
  background-color: yellow;
  margin: 20px;
  padding: 20px;
  box-sizing: content-box
}

看到box的大小变大了，这是因为box-sizing: content-box把盒子从IE标准盒子模型转换成了W3C标准模型，W3C标准模型中对盒子的宽高和外边距margin、边框border、内边距padding、内容content四者之间的关系是 width = context，所以，即使最先给box设置了height:100px;width: 100px;，后续再添加margin、border、padding，content的大小还是最先设置的，并不会改变，那margin、border、padding的值则会再content的外面延伸。

多个盒子模型相互都设置了margin，会出现margin塌陷的问题，常见的有2种 在上面代码后面追加一个盒子，并设置margin-top:50px，理想box和box2之间的间距应该是20px+50px=70px，但是，并没有，他们之间只出现了50px

.box2{
  height: 100px;
  width: 100px;
  background-color: yellowgreen;
  margin-top:50px
}

这是一种margin塌陷的情况，还有一种是嵌套的情况

<div class='box3'>  
  <div class='box4'></div>
</div>

.box3{
  height:200px;
  width:200px;
  background-color: gray
}
.box4{
  height: 100px;
  width: 100px;
  background-color: yellowgreen;
  margin-top:50px
}

给box4设置margin-top值之后，居然作用到了box3中，这不是我们想要的，解决方法也有挺多的

  • 为父盒子设置border:1px solid #gray，同时height:198px;width:198px;
  • 为父盒子添加overflow：hidden；
  • 为父盒子设定padding-top:50px值。

总结

  1. 宽度的计算 IE标准： width = context+padding+border；w3c标准：width=context
  2. CSS3 属性 box-sizing可以切换盒子模型的模式

源码链接

avatar
文章
阅读
粉丝