-
CSS margin失效情形解析
1、inline水平元素的垂直margin无效
【前提：
内联元素非替换元素，例如：不是<img>元素；
正常书写模式；
】
2、margin重叠
3、display：table-cell与margin
（通过table-cell元素添加margin撑开间距）
3、替换元素
查看全部 -
3、margin负值下的两栏自适应布局
元素占据空间跟随margin移动
查看全部 -
2、margin负值下的登高布局
margin改变元素占据空间
实现两栏等高布局
查看全部 -
1、margin负值下的两端对齐，margin改变元素尺寸
查看全部 -
解决方法：
一、writing-mode（css3）实现垂直居中
writing-mode:vertical-lr; 更改流为垂直方向，实现垂直方向的margin:auto居中，但水平居中失效
二、absolute与margin居中
父级：relative
子级：absolute
没有width/height,absolute元素自动填满整个容器
查看全部 -
容器定高，元素定高，margin:auto无法垂直居中
查看全部 -
图片不居中
解决办法display:block
因为此时图片时block水平，就算没有width，也会占据整个容器（不能一行显示）
查看全部 -
如果两侧均为auto，则平分剩余空间查看全部
-
原本应该填充的尺寸被width/height强制变更，而margin:auto就是为了填充这个变更的尺寸而设计的
如果一侧是定值，一侧auto，auto为剩余空间大小
查看全部 -
如果设置width或height，自动填充特性就会被覆盖
查看全部 -
元素有时候就算没有设置width或height，也会自动填充
查看全部 -
善用margin重叠
查看全部 -
如果没有margin重叠
查看全部 -
负负最负值
查看全部 -
正负值相加
查看全部
举报
0/150
提交
取消