margin - fangdiao/Notes GitHub Wiki
####margin与可视尺寸
可改变可视尺寸,适用于没有设定width/height的普通的block水平元素,只适用于水平方向尺寸。可实现一侧定宽的自适应布局;
####CSS margin于百分比单位
margin的百分比值都是相对于宽度计算的
####绝对定位的margin百分比值
margin的百分比相对于第一个定位祖先元素(absolute/relative/fixed)的宽度计算。
####margin重叠
发生在block水平元素(不包括浮动或定位元素),只发生在垂直方向。
####margin-top重叠
1.父元素非块状格式化上下文元素。方法:父元素设置overflow:hidden;
2.父元素没有border-top。方法:borer-top:;
3.父元素没有padding-top。方法:padding-top:;
4.父元素和第一个元素没有inline元素分隔。方法:加入一个内联元素,如一个
####margin-bottom重叠
1.父元素非块状格式化上下文元素。方法:父元素设置overflow:hidden;
2.父元素没有border-bottom。方法:borer-bottom:;
3.父元素没有padding-bottom。方法:padding-bottom:;
4.父元素和最后一个元素没有inline元素分隔。方法:加入一个内联元素,如一个
5.父元素没有height/min-height/max-height的高度限制。方法:这只高度。
####空block元素的margin重叠
解决方法参照margin-top
####使用列表等垂直布局
建议margin-top,margin-bottom都使用,因为当最后一个元素移除时,不会改变原来的布局。
####margin的auto属性
margin:auto;
只会水平居中,不会垂直居中是因为垂直方向不会自动填充。
####writing-mode与垂直居中
writing-mode:vertical-lr;
更改流的方向为垂直方向。设置margin:auto;
课垂直居中,但是改变了流的方向,水平方向不再居中。
####绝对定位元素的水平锤子居中
父元素设置position:relative;
,子元素设置position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;
IE8浏览器及以上支持
####margin负值下的两端对齐
多列布局下,为父元素设置margin负值,可以使最后一列或者第一列的margin得到处理,实现两端对齐
##margin负值下的等高布局
html:<div id="box"><div class="box1"><div class="box1"></div></div></div>
css:.box{overflow:hidden;resize:vertical;} .box1{float:left;margin-bottom:-1000px;padding-bottom:1000px;}
####margin无效情形解析
1.内联水平元素(非替换元素,如)垂直margin无效
2.dispaly:table-cell;
/display:table-row;
等声明的元素margin无效。
3.绝对定位的元素在非定位方向margin"无效",因为绝对定位元素脱离文档流,所以在非定位方向设置margin不会造成影响。
4.图片浮动,相邻元素设置margin以图片浮动方向为准,margin值需加上图片大小。
5.内联特性导致margin无效, ####控制margin重叠 margin-collapse:collapse(默认重叠)/discard(取消)/separate(分隔);