美文网首页
margin的一些总结

margin的一些总结

作者: Michael_lpf | 来源:发表于2016-12-30 10:11 被阅读0次

margin属性值的单位为百分比时:margin:60%;,有两点要注意:

  • 一、其具体值是根据父元素的宽度计算的。
    例如某元素.son{ margin: 20% },其父元素.father{ width: 100px; },那么这个元素距其父元素的左边和上边都有20px的距离(即其父元素宽度的20%)。
  • 二、当这个元素为绝对定位时,其具体值是根据祖先元素的宽度计算的,而并不是根据父元素计算的。

关于margin重叠,原理不再多说,这里只说一个margin重叠可以被利用的场景:比如我们要写一个垂直排列的列表、表单等等,可以考虑为每个元素同时添加一个margin-topmargin-bottom,这样做的好处是,当你更改需求准备去掉第一个或最后一个元素时,整体布局不会因为丢失了margin-top /margin-bottom而变形。

其实,这两点都是CSS进阶路上的一些基本知识了,只能说明我自己了解得太晚。

所以在此也只是作为个人知识总结,这也正是我开始写这个blog的意义。

[完]

相关文章

  • padding的一些总结

    自之前margin的一些总结之后,这次总结一下常和margin一起出生入死的padding。 一、padding只...

  • margin的一些总结

    当margin属性值的单位为百分比时:margin:60%;,有两点要注意: 一、其具体值是根据父元素的宽度计算的...

  • 2018-11-01-day4-jd登录界面

    总结:开始时默认margin padding 让所有标签的子标签相对自己定位margin: 0;padding: ...

  • css常见布局(三)

    总结下目前学到的小技巧 1 . 解决margin合并问题 border-top = 0.1可以解决margin...

  • DAY03

    2018.07.11学习总结 1.盒子模型margin,padding的传参 1.1margin的传参 1.2pa...

  • css中定位元素总结

    总结padding、margin、float、position:relative以及position:absolu...

  • margin为负值的规则

    元素的margin为负值时有一些特定的规则: A negative margin to the left or t...

  • CSS经典布局

    CSS经典布局 本文主要对一些常见的CSS布局问题进行总结,涉及三栏布局、负margin、清除浮动、居中布局、Fl...

  • 关于margin的小小总结

    margin就是元素的外边距,大家都很熟悉他的用法啦,我要说的是平时在工作中用到margin时遇到的坑! 大多数页...

  • 外边距崩塌

    在学习HTML和CSS基础语法时遇到了一些问题,今天来大概的总结下。 margin与padding的使用场景 外边...

网友评论

      本文标题:margin的一些总结

      本文链接:https://www.haomeiwen.com/subject/cpcmvttx.html