描述一下下面盒子的大小，颜色什么的（content-box模型）-CFANZ编程社区

<html>
<style>
  body{
    background-color: gray;
  }
  div{
    color: blue;
    width: 100px;
    background-color: pink;
    border: 10px solid;
    padding: 20px;
  }
</style>
<body>
  <div></div>
</body>
</html>

1、整个盒子的大小

2、padding的颜色

3、border的颜色

4、height为0了，看得见盒子吗？

描述一下下面盒子的大小，颜色什么的（content-box模型）_微信微信图片_20201008171116.png

1、因为height为0 ，所以盒子大小为0

2、padding的颜色为pink，继承background;

3、border的颜色为blue，继承color

4、看得见，因为有padding和border。需要注意的是如果border没有border-style的话，border不管宽度设置多少都无效。