css 盒子模型

盒子模型的概念

对每一个元素，都可以看成是一个盒子

每个元素，都有一个内边距 padding，和外边距margin，以及边框border

元素真实大小 = 内边距+元素自身大小+外边距+边框
//下面仔细列出真实宽高
真实宽度 = 左外边距+左内边距+元素宽度width+右内边距+右外边距+2*border
真实高度 = 上外边距+上内边距+元素高度height+下内边距+下外边距+2*border

代码示例

下面的例子中的元素内容宽度为300px：

<style>
  div{
    width: 300px;height: 300px;
    border: 1px solid red;
    padding: 10px;
    margin: 10px;
  }
</style>
<div>
	这是元素内容content
</div>

则真实宽度 = 300+1*2+2*10+2*10 = 342，

不过一般情况下，外边距不计入元素大小，使用chrome测量时，显示 322