盒子模型

盒子模型

概念
所谓的盒子模型，就是把HTML里的元素看做一个矩形的盒子，也就是一个盛装内容的容器，每个盒子都是由元素的内容，边框，内边距，外边距四部分组成。
div{
width:100px;盒子宽100px
height:100px;盒子高100px
border:1px solid red;盒子边框为1px，实线，红色
margin:20px;盒子外边距为20px
padding:20px;盒子内边距为20px
}
标准盒子模型：宽度=内容的宽度+边框+内边距+外边距
box-sizing: content-box;
IE低版本盒子模型：宽度=内容宽度+外边距
box-sizing: border-box;