首页 > 代码库 > 理解margin
理解margin
- margin可以改变容器的尺寸 //元素尺寸分为可视尺寸，占据尺寸
margin与可视尺寸
1.适用于没有设定width/height的普通block水平元素
2.只适用于水平方向的尺寸
应用：一侧定宽的自适应布局，两端对齐布局等
例如：左边有一张图片固定宽度，右面有文字，无论怎么改变文字的宽度，图片都不会动。
margin-left:70px
margin与占据尺寸
1.block/inline-block水平元素均适用
2.与有没有设定width/height值无关
3.适用于水平和垂直方向
应用：滚动容器上下留白：margin:50px 0;
多栏或2栏的等高布局等
- margin与百分比单位
普通元素百分比和绝对定位元素百分比
1.普通元素百分比margin都是相对于容器的宽度计算的
2.position:absolute绝对定位元素百分比margin是相对于第一个定位祖先元素
（relative/absolute/fixed）的宽度计算的
应用：宽高2:1自适应矩形
- margin重叠
margin重叠发生在：block水平元素
: 只发生在垂直方向（margin-top/margin-bottom）
margin重叠情境：相邻两个元素
父与子第一个或最后一个
空block元素
干掉margin-top重叠：父元素非块状格式化上下文元素—>overflow:hidden
父元素没有border-top设置
父元素没有padding-top值
父元素和第一个子元素之间没有inline元素分隔
干掉margin-bottom重叠：父元素非块状格式化上下文元素—>overflow:hidden
父元素没有border-top设置
父元素没有padding-top值
父元素和第一个子元素之间没有inline元素分隔
设置高度
干掉空block元素重叠：元素不能有borde设置
元素不能有padding
不能有inline元素
不能有height
margin重叠计算规则：正正去大值
正负值相加
负负最负值
- margin：auto 自动填充 用来分配剩余空间的
为什么图片margin：0 auto不水平居中？
答：因为此时图片是inline水平，就算没有width，它也不会占据整个容器
只要设置display：block，不设置width，也会占据整个容器
垂直方向margin实现居中：1.writing-mode：vertical-1r ; margin：auto
2.position:absolute；margin：auto
- margin负值定位
margin负值下的等高布局：margin-bottom：负值； //改变元素占据空间的大小
padding-bottom：正值； //填充缺失的空间
margin负值下的两栏自适应布局：float：left
margin-left：-150px
- margin无效情形
1.内联元素
2.重叠
3.display：table-cell/table-row等
- margin-start和margin-end
理解margin
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。