CSS3——盒子模型

介绍 

  盒子模型就是把每个HTML元素看作一个矩形盒子。每个矩形由：元素内容（content）、内填充（padding）、边框（border）、外边距（margin）组成

　　　　　　　　盒子模型如图所示

　　

 

盒子的总宽度 = 内容宽度 + 左右填充 + 左右边框 + 左右外边距 

盒子的总高度 = 内容高度 + 上下填充 + 上下边框 + 上下外边距

 

分类

　　padding

　　　　作用：设置元素内容到边框之间的距离

　　　　值：

　　　　　　xxpx ：从上开始顺时针，设置xxpx的内边距

　　　　　　xxpx xxpx xxpx xxpx ：分别设置 上 右 下 左 的内边距

　　margin 

　　　　作用：设置两个html标签的距离

　　　　值：

　　　　　　xxpx：从上开始顺时针，设置xxpx的外边距

　　　　　　xxpx xxpx xxpx xxpx：分别设置 上 右 下 左 的外边距

　　　　　　0px auto ： 元素水平居中

　　　　注意：

　　　　　　两个元素上下外边距会塌陷