当margin
属性值的单位为百分比时:margin:60%;
,有两点要注意:
- 一、其具体值是根据父元素的宽度计算的。
例如某元素.son{ margin: 20% }
,其父元素.father{ width: 100px; }
,那么这个元素距其父元素的左边和上边都有20px
的距离(即其父元素宽度的20%)。 - 二、当这个元素为绝对定位时,其具体值是根据祖先元素的宽度计算的,而并不是根据父元素计算的。
关于margin
重叠,原理不再多说,这里只说一个margin
重叠可以被利用的场景:比如我们要写一个垂直排列的列表、表单等等,可以考虑为每个元素同时添加一个margin-top
和margin-bottom
,这样做的好处是,当你更改需求准备去掉第一个或最后一个元素时,整体布局不会因为丢失了margin-top /margin-bottom
而变形。
其实,这两点都是CSS进阶路上的一些基本知识了,只能说明我自己了解得太晚。
所以在此也只是作为个人知识总结,这也正是我开始写这个blog的意义。
[完]
网友评论