逆战班-盒模型简介

　　　盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素间的相互关系。CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间。即其中包含内容区（content）、内填充（padding）、盒子边框（border）、外边距（margin）。

                                           　　　　　　　　　　　　　　　　　　　　　　　　　　如图所示：

　　　　Padding的用法：

　　　　　　　　　　　　　1.Padding处于内容与盒子之间，在盒子内部且在父元素里添加Padding的数值

　　　　　　　　　　　　　2.Padding是为了调整子元素在父元素里面的位置关系

　　　　　　　　　　　　　3.因为盒子本身会随着Padding值的设置而被撑大，故要保证盒子原有的大小，必须要在盒子宽高的基础上减掉Padding的数值

　　　　　　　　　　　　　4.给单一方向上设置Padding值时，有Padding-left/right/top/bottom

　　　　　　　　　　　　　5.Padding的设置方法：

　　　　　　　　　　　　      a.Padding：10px;   在盒子内部的四周均填充10px的间距

　　　　　　　　　　　　      b.Padding：10px 20px ;  在盒子内部上下填充10px的间距  左右填充20px的间距

　　　　　　　　　　　　      c.Padding：10px 20px 30px  在盒子内部上面填充10px的间距  左右填充20px的间距  下面填充30px的间距

　　　　　　　　　　　　　   d.Padding：10px 20px 30px 40px  在盒子内部上面填充10px的间距 右侧填充20px的间距 下面填充30px的间距 左侧填充40px的间距（遵循顺时针原则）

　　　　　　　　　　　　　6.Padding不能设置负值

　　　　　　　　　　　　　7.Padding不会对背景图造成影响

　　　　　　　　　　　　　8.若一个盒子没有设置固定的宽高，添加Padding值后，不用将其减去

　　　　　　　　　　　　　　如下图所示：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　在添加Padding之前

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　在添加Padding之后

　　　　Margin的用法:

　　　　　　　　　　　　　1.Margin处于盒子之外

　　　　　　　　　　　　　2.Margin控制的是同级元素之间的位置关系

　　　　　　　　　　　　　3.Margin不会对盒子本身的宽高造成影响

　　　　　　　　　　　　　4.在给单一方向上添加Margin值，有margin-left/right/top/bottom

　　　　　　　　　　　　　5.Margin在方向上的设置同Padding一样

　　　　　　　　　　　　　6.Margin可以设置负值

　　　　注：　　　　　　　

　　　　　　　　1.当父元素和子元素都没有设置浮动（float;left/right;）的情况下，

　　　　　　　　   若给第一个子元素添加margin-top时，

　　　　　　　　   会错误的把margin-top加到父元素上面

　　　　　　　　2.上下相邻两个元素之间的margin值不会叠加，且会按照最大的margin值去执行

　　　　　　　　3.若要让当前的子元素在父元素里水平居中时，添加margin:0 auto;

　　　　　　　　　如下图所示：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　在添加margin之前

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　在添加margin之后 

逆战班-盒模型简介

原文：https://www.cnblogs.com/sjk-nz-1/p/12596145.html