magin
magin重叠
margin重叠的3种类型
相邻的兄弟元素
父级的第一个和最后一个子元素
空的block元素
magin父子重叠的条件
margin-top重叠和margin-bottom重叠
1.父元素非块状格式化上下文
2.父元素没有margin-top或margin-bottom的值
3.父元素和第一个子元素/最后一个子元素之间没有inline(文字图片等)元素分隔
4.父元素没有height、min-height、max-height限制
margin重叠的计算规则
1.正正取大值
2.正负值相加
3.负负最负值
实际用例
当页面上有多个表单的时候margin-top、margin-bottom都设置,产生重叠,更具有健壮性,最后一个元素移除或位置变换,均不会破坏原来的布局(列表、垂直布局)
父级writing-mode:vertical-lr(更流为垂直方向,父级相对定位,son绝对定位,margin:0 auto)
magin负值定位
margin负值下的两端对齐
margin负值下的等高布局:margin改变元素占据空间
margin负值下两栏自适应布局:元素占据空间随着margin移动
magin无效情况
inline水平元素的垂直:内联元素垂直
margin重叠
display:table-cell与margin:应用于除display为table相关类型,display:table-cell/table-row等是margin是无效的。
position:absolute与margin :绝对定位元素非定位反向(定位)的margin的值“无效”
鞭长莫及导致的margin无效:图片+文字形式,图片有浮动,文字margin无效,是因为margin相对于整个容器而言,并不是图片
内联特性导致margin无效:margin负值小到一定值的时候,页面没有变化,受制于父级的内联
magin-start/magin-end
正常流margin-start等于margin-left,两者不叠加
水平右→左margin-start=margin-right
垂直流margin-start=margin-top
css中margin整理
最新推荐文章于 2021-06-18 14:54:53 发布