-
【垂直居中+文字垂直流】
.father{height:200px;width:400px;background:#f0f3f9;writing-mode:vertical-lr;}
.son{height:100px;width:200px;background: lightblue;margin: auto;}
【垂直+水平居中】
.mother{height:200px;width:400px;background:#f0f3f9;position: relative;}
.daughter{height:100px;width:200px;background: lightblue;position: absolute;top:0;bottom: 0;left:0;right:0;margin: auto;}
查看全部 -
实线部分是可视尺寸-clientWidth(标准)； 虚线部分是占据尺寸，可以理解为outerWidth（jquery）查看全部
-
auto的计算规则
查看全部 -
绝对定位元素的百分比margin
是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的
查看全部 -
1、普通元素的百分比margin都是相对于容器的宽度计算的。
2、绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/ absolute /fixed）的宽度计算的。
3、宽高2：1自适应矩形： 子div设置margin：50%（子div加文字则便正方形）
查看全部 -
一、margin无效 1、inline水平元素的垂直margin无效。2个前提： （1）非替换元素，例如，不是<img>元素。 （2)正常书写模式：<span >设置margin</span> 2、margin重叠。 3、display:table-cell与margin： display:table-cell/ display:table-row等声明的margin无效。 （1）可以通过display:table-cell实现两栏布局，但是无法通过table-cell添加margin撑开间距。 （2）firefox：返回table-cell，实质是inline-block，margin不会重叠。 ie：返回table-cell，实质是table-cell，margin会重叠。 4、position:absolute与margin （1）绝对定位元素非定位方位的margin值“无效”。 （2）对定位没有影响，但是对占据空间有影响。绝对定位的margin值一直有效，只是不像普通元素那样，可以对兄弟元素产生影响。 5、鞭长莫及导致的margin无效。 （1）浮动和绝对定位是破坏性属性，会破坏整个页面元素的布局。（第11分钟） 6、内联特性导致的margin无效。 内联元素默认基线对齐。 图片受文字的影响，文字不能在div外面，图片为了和文字对齐，在与文字的基线对齐后，margin-top:-300，值的绝对值再往上升的时候，margin也不会对图片起作用。查看全部
-
六、善用margin重叠 1、（1）一般列表都只写： .list{ margin-top:15px; } 但是，更合理的写法是： .list{ margin-top:15px; margin-bottom:15px; } 写列表或垂直布局时，浏览器会将margin-top,margin-bottom重叠，如果上下都写，最后删除最后一个元素时，margin-bottom也还是生效的。查看全部
-
这时再margin：auto自动平分被变更的尺寸空间，实现水平垂直居中查看全部
-
margin-start/margin-end查看全部
-
margin无效 1、inline水平元素的垂直margin无效 2、margin重叠 3、display:table-cell时margin不起作用 4、absolute与margin 绝对定位元素非定位方向的margin的margin值"无效" 为父容器设置relatvie后，absolute的margin值会起作用（因为absolute时margin是脱离文档了） 5、鞭长莫及导致margin无效 <div > <img src="abc.jpg" > <div style ="overflow:hidden; margin-left:254px;"></div>//图片的margin值移动是相对于整个父容器的，而不是相对于图片的边缘，所以改变较大时才能有效 </div> 6、内联特性导致margin无效 margin负值小到一定程度不会再起作用，因为 ###内联特性：相对于基线对齐，margin超过数值部分不起作用。查看全部
-
水平垂直居中查看全部
-
writing-mode与垂直居中查看全部
-
百分比margin的计算规则 普通元素的百分比margin都是相对于容器的宽度计算的 绝对定位元素的百分比margin 绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算的查看全部
-
元素尺寸 1、可视尺寸-clientWidth(标准) 2、占据尺寸-outerWidth（only yy） margin与可视尺寸 1、适用于没有设定width/height的普通block水平元素 2、只适用于水平方向尺寸 margin与占据尺寸 1、block/inline-block水平元素均适用 2、与有没有设定width/height值无关 3、适用于水平方向和垂直方向查看全部
-
margin重叠计算规则查看全部
举报
0/150
提交
取消