前端 盒子模型

前端页面的每一个部分都可以看做成一个盒子模型，对于一个简单的页面来说，页面的每一个部分都可以简化的看成一个盒子模型，然后可以对盒子模型进行简单的操作。

盒子模型分为四个区

这四个区由内到外为： 内容区 填充区 边框区 外边距区

注意：填充区一般默认为0 默认内容区和边框区重叠

在谷歌浏览器，按下f12就可以看到

画个简单的图来帮助理解

1、内容区   用width height   默认是对内容区的设置
2、填充区     padding =10px   
                     padding：10px 20px            上下10 px  左右20px     
                 padding: 10px 20px 30px  以第一个上为开始顺时针旋转 没有的就对称
                 padding： 10px 20px 30px  40px 
                 paddiong:10px 0 0 0 
                padding-top:10px
                padding-bottom:10px      padding-left:10px   
padding-right:10px  //对单边的进行设
3、边框区  border 
四个方向 三个方面
border-style
border-width

4、magin ： 10px  auto//居中    和padding用法类似