理解css margin

前提是对display:block元素

1 margin对没有width属性的元素，能影响其宽度，对于有width的则不影响宽度；
高度方面不受影响
此特性可用来排版
2 margin 与百分比
普通的没有带absolute fixed 的元素 ，无论横竖 百分比，都相对横向数值
但是带有absolute,fixed 的，则相对第一个有相对定位的百分数值
3 margin 重叠问题
　　margin-top 重叠的条件
　　元素条件：1）父元素与第一个子元素或者最后一个元素 2）相邻的兄弟元素 3） 空的block元素
　　其它条件：margin top
　　父元素与第一个子元素之间
　　a 父元素为没有overflow的非块状格式化上下文元素
　　b 父元素没有border-top:1px solid green等，只有border-top:1px并没有效果
　　c 父元素没有padding-top
　　d 父元素与第一个子元素之间没有inline元素分隔
　　margin bottom
　　父元素与第一个子元素之间
　　a 父元素为没有overflow的非块状格式化上下文元素
　　b 父元素没有border-bottom:1px solid green等，只有border-bottom:1px并没有效果
　　c 父元素没有padding-bottom
　　d 父元素与第一个子元素之间没有inline元素分隔
　　e 父元素没有 height ，min-height , max-height限制
通过上述方法，能干掉margin-top，margin-bottom

空的block元素 条件：
　　元素没有border
　　元素没有padding
　　元素没有inline元素
　　元素没有height min-height

margin :auto的理解

对于没有设置width ，假如设置width能占满空间的block元素，设置水平的margin 的auto值起作用

对于position:absolute top:0 right:0 bottom:0 left:0 的设置width height margin：auto起作用（能利用来垂直水平的居中）

 

转载于:https://www.cnblogs.com/FineDay/articles/5970494.html