什邡做网站
CSS的margin属性知识总结
本篇内容介绍了“CSS的margin属性知识总结”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
创新互联是一家专注网站建设、网络营销策划、成都小程序开发、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十年以来，已经为千余家航空箱各业的企业公司提供互联网服务。现在，服务的千余家客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。
1.margin 属性的简单介绍
1.1：普通流的 margin 百分比设置
1.2：绝对定位的 margin 百分比设置
2.margin 无法适用的元素
3.外边距折叠 (Collapsing margins)
3.1：Collapsing margins 初衷
3.2：Collapsing margins 类型
3.2.1：兄弟元素的 margin 重叠
3.2.2：父子元素的 margin 重叠
3.2.3：元素自身的 margin-bottom 和 margin-top 相邻时也会折叠
4.折叠后 margin 的计算规则
4.1：参与折叠的 margin 都是正值
4.2：参与折叠的 margin 都是负值
4.3：参与折叠的 margin 中有正值，有负值
5.Collapsing margins 解决方法
1.margin 属性的简单介绍
在介绍margin之前，先剖上一张W3C标准盒模型的图片，以便读者可以查看相关位置。
margin，顾名思义，叫做外边距。
margin的基本属性有以下几点
a：margin 是 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' 的简写，表明 margin 的大小范围。
b：margin 值可以是 宽度值、百分比值或 'auto' 这3者之一。注意，margin 必须带有单位，单位可以是像素、英寸、毫米或 em。
c：margin 百分比值是相对于父元素的 width 计算的。
d：当 margin 为 margin:10px 时，表示 top,right,bottom,left (逆时针)方向都是10px；当 margin 为 margin:10px 20px 时，表示上下方向为10px，左右方向为20px；当 margin 为 margin:10px 20px 5px 时，表示top方向为10px，左右方向为20px，bottom方向为5px；当 margin 为 margin:1px 2px 3px 4px 时，表示top方向为1px，right方向为2px，bottom方向为3px，left方向为4px。
上面通过对 margin 的简单介绍，我们知道 margin 的百分比值是相对于父元素的 width 计算的，但是普通流和绝对定位元素的margin的计算是又是不相同的。
1.1：普通流的 margin 百分比设置
在普通流元素中，margin 百分比值得计算是依据其父元素的 width 计算的。
XML/HTML Code复制内容到剪贴板
