css盒子模型大小

在CSS中，盒子模型是指一个HTML元素被认为是一个矩形的盒子，其包含了元素的内容、内边距、边框和外边距。这样的盒子模型可以通过CSS的宽度和高度属性来设置大小。

其中，盒子模型包含以下四个部分：

content box{
  
  width:100px;
  
  height:100px;
}
padding box{
  
  width:120px;
  
  height:120px;
  
  padding:10px;
}
border box{
  
  width:140px;
  
  height:140px;
  
  border:10px solid black;
}
margin box{
  
  width:160px;
  
  height:160px;
  
  margin:10px;
}
 

对于一个块级元素，默认情况下它的宽度和高度是指content box的尺寸，也就是元素的实际内容大小。如果要设置元素的总尺寸，需要将内边距、边框和外边距加入到宽度或高度属性中。例如：

div{
  
  width: 200px;
  
  height: 200px;
  
  padding: 20px;
  
  border: 2px solid black;
  
  margin: 10px;
}
 

在这个例子中，div元素的实际宽度和高度为200px，但是由于有20px的内边距、2px的边框和10px的外边距，所以元素的总宽度和高度为252px（也就是content box + padding box + border box + margin box）。

总之，盒子模型是CSS布局的基础，了解它是CSS编程的必备知识之一。