CSS margin与百分比单位
绝对定位元素的百分比margin
margin:100% 1:1
margin相对于宽度百分比计算
普通元素margin的百分比是相对于宽度计算的
宽高2:1自适应矩形
mark,,
mark看看
普通元素百分比margin都是相对于容器宽度计算的;
绝对定位元素的百分比margin是相对第一个定位祖先元素(relative、absolute,fixed)的宽度计算的
绝对定位元素的margin的百分比是按照contain box的宽度来计算的
普通元素的百分比margin都是相对于容器的宽度计算的
margin百分比,都是相对容器的宽度
都是!!!!!
<div style="background-color: olive;overflow: hidden;"> <div style="margin: 50%"></div> </div>
宽高2:1布局
1、绝对定位元素的百分比margin
绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度计算的!例子中:是1024*10%。
百分比margin的计算规则
普通元素的百分比margin都是相对于容器的宽度计算的!
例子中为600*10%,而不是200*10%。
绝对定位元素的百分比margin
是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度计算的
百分比margin的计算规则
margin 用百分比时是相对于宽度计算的,与高度无关,即600*200中,高度和宽度都是600*百分比
1、普通元素的百分比margin都是相对于容器的宽度计算的。
2、绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/ absolute /fixed)的宽度计算的。
3、宽高2:1自适应矩形: 子div设置margin:50%(子div加文字则便正方形)
宽高成比例的矩形