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的时候，这个值就会被替换为适当的值，不需要你关心。
只有一个值时，这个值会被指定给全部的四个边
两个值时，第一个值被匹配给上和下, 第二个值被匹配给 左和右.
三个值时，第一个值被匹配给上, 第二个值被匹配给 左和右
**第三个值被匹配给 下. 四个值时，会依次按 上、右、下、左 的顺序匹配
(即顺时针顺序).**
2.我们接着来解析官方的padding是怎么个说法
padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。
初始值
都为0
使用的范围
全部元素，除去display为table-row-group，table-header-group，table-footer-group,table-row，table-column-group和table-column。这里要记住的是，display为这些的，而不是专指table内的元素
取值
指定一个值时 该值指定四个边的内边距
指定两个值时 第一个值指定上下两边的内边距 第二个指定左右两边的内边距
指定三个值时第一个指定上边的内边距.第二个指定左右两边 第三个指定下边
指定四个值时分别为上 右 下 左（顺时针顺序）
总结
有上述的我们可以知道margin和padding的百分比是相对于父亲元素的宽度的，到这里我们就基本知道了一个最基础的观念，行内元素中是不能放块级元素的，因为它可以说没有宽度（并不是真正的没有，只是比喻）。
3.让margin和padding遛起来
实现正方形自适应
实现两栏自适应
实现三栏自适应布局，左右固定长度，中间自适应
…
下一篇将写实现，你们自己可以先玩玩
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
