CSS深入之其实你可能根本不认识margin和padding（一）

1.我们来解析官方的margin是怎么个说法

margin属性可以为给定元素设置所有四个（上下左右）方向的外边距属性。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外边距允许为负数。

初始值

每一个都是0

使用的范围

包括所有的元素，但是对于table内中display类型为table-caption，table，inline-table的元素都是不起作用的，这里要注意是table内的元素，比如说thead,tbody,tr,td,tfoot,td，这些，你在里面用div这些东西，都是可以起作用的，所以注意了。

还有他也可以被用于::first-letter(这个以后会讲)

百分比的用处

这是一个关键的东西，它是相对于包含它的块的宽度进行处理的，为什么要这么设计呢，因为宽度一般都是可控的，你屏幕的宽度一定吧，而高度是随着内容的增加而增多，所以需要以宽度为基准处理。

这个东西是最重要的。

取值

当你使用auto的时候，这个值就会被替换为适当的值，不需要你关心。

1. 只有一个值时，这个值会被指定给全部的四个边

2. 两个值时，第一个值被匹配给上和下, 第二个值被匹配给 左和右.

3. 三个值时，第一个值被匹配给上, 第二个值被匹配给 左和右

4. **第三个值被匹配给 下. 四个值时，会依次按 上、右、下、左 的顺序匹配
   (即顺时针顺序).**

2.我们接着来解析官方的padding是怎么个说法

padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。

初始值

都为0

使用的范围

全部元素，除去display为table-row-group，table-header-group，table-footer-group,table-row，table-column-group和table-column。这里要记住的是，display为这些的，而不是专指table内的元素

取值

1. 指定一个值时 该值指定四个边的内边距

2. 指定两个值时 第一个值指定上下两边的内边距 第二个指定左右两边的内边距

3. 指定三个值时第一个指定上边的内边距.第二个指定左右两边 第三个指定下边

4. 指定四个值时分别为上 右 下 左（顺时针顺序）

总结

有上述的我们可以知道margin和padding的百分比是相对于父亲元素的宽度的，到这里我们就基本知道了一个最基础的观念，行内元素中是不能放块级元素的，因为它可以说没有宽度（并不是真正的没有，只是比喻）。

3.让margin和padding遛起来

1. 实现正方形自适应

2. 实现两栏自适应

3. 实现三栏自适应布局，左右固定长度，中间自适应

…

下一篇将写实现，你们自己可以先玩玩