没有内容的 div 有一个宽度高度 - CSS

在CSS中，一个没有内容的div默认是不显示的，它的宽度和高度都是0。但是我们可以通过一些CSS技巧来让它拥有一定的宽度和高度。

给div指定宽高

最常见的方法就是直接给这个div指定一个宽度和高度，比如：

div {
  width: 100px;
  height: 50px;
}

这样这个div就有了宽度100像素和高度50像素。

使用padding

我们可以使用padding属性来给这个div增加宽度和高度，比如：

div {
  padding: 50px;
}

这样这个div就有了50像素的内边距，相当于宽度和高度各增加了50像素。

使用border

同样的道理，我们可以使用border属性来增加div的宽度和高度，比如：

div {
  border: 50px solid transparent;
}

这个div的宽度和高度也各增加了50像素，但是因为我们设置了transparent，所以并没有显示出来边框。

使用box-sizing

上面两个方法增加宽度和高度都是基于content-box盒模型的，也就是说它们会增加div的宽度和高度。如果我们想要给div增加宽度和高度但是不改变它的宽度和高度，我们可以使用box-sizing属性，比如：

div {
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  padding: 50px;
  border: 50px solid transparent;
}

这样这个div的宽度和高度依然是100像素和50像素，但是因为我们设置了border-box盒模型，所以padding和border的值不会增加div的宽度和高度，而是把它们包裹在了div内部。