专栏首页一个小程序员的成长笔记CSS深入理解学习笔记之margin

CSS深入理解学习笔记之margin

1、margin与容器尺寸

  元素尺寸:①可视尺寸 clientWidth(标准);②占据尺寸

  margin与可视尺寸:①适用于没有设定width/height的普通block元素;②只适用于水平方向尺寸

  margin与占据尺寸:①block/inline-block水平元素均适用;②与有没有设定width/height无关;③适用于水平方向和垂直方向。可用于页面的上下留白(padding兼容性不好)。

2、margin与百分比单位

  普通元素的百分比:相对于容器宽度计算。

  绝对定位元素的百分比:相对于第一个定位的祖先容器的宽度计算的。

3、margin重叠

  margin重叠通常特性:①仅发生在block水平元素上(不包括float和absolute元素);②不考虑writing-mode的情况下,只发生在垂直方向上。

  margin重叠的情境:①相邻的兄弟元素;②父级的第一个/最后一个子元素;③空的block元素

4、margin重叠的计算规则

  正正取大值;正负值相加;负负最负值。

margin的善用实例:

 5、理解margin:auto

   规则:如果一侧是定值,一侧是auto,则auto是剩余空间大小;如果两侧均为auto,则平分剩余空间。

   writing-mode与垂直居中(这样修改后宽度的margin:auto居中效果就会失效):

  绝对定位元素的margin居中:

 6、margin负值定位

  margin负值下的两端对齐:

  margin负值下的等高布局:

  margin负值下的两栏自适应布局:

 7、margin失效情形解析

  ⑴ inline水平元素的垂直margin无效前提:①非替换元素,例如不是<img>元素;②正常书写模式。

  ⑵ margin重叠

  ⑶ display:table-cell与margin:display:table-cell/display:table-row等声明的margin无效。

  ⑷ position:absolute与margin:绝对定位元素未设置定位方向的margin值”无效“。例如,img{top:10%}的margin-top有效其他均无效。

  ⑸ 鞭长莫及导致的margin无效。

  ⑹ 内联特性导致的margin无效:

8、了解margin-start/margin-end等属性

  margin-start:①正常的流向,margin-start等同于margin-left,两者重叠不累加;②如果水平流是从右向左,margin-start等同于margin-right;③在垂直流下(writing-mode:vertical-*;),margin-start等同于margin-top。

  margin-end:①正常的流向,margin-end等同于margin-right,两者重叠不累加;②如果水平流是从右向左,margin-end等同于margin-left;③在垂直流下(writing-mode:vertical-*;),margin-end等同于margin-bottom。

  margin-collapse:控制margin重叠。collapse(默认-重叠),discard(取消,使margin无效),separate(分隔,无margin重叠)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 理想的继承范式——寄生组合式继承

    就只是小茗
  • HTML5中引入的关键特性

    新特性描述 accesskey 定义通过键盘访问元素的快捷键 contenteditable 该特性设置为true时,浏览器应该允许用户编辑元素的内容...

    就只是小茗
  • <script>元素在XHTML中的用法

      编写XHTML代码的规则要比编写HTML严格得多,例如如下代码: 1 <script type="text/javascript"> 2 fun...

    就只是小茗
  • margin 属性

    margin 规定标签中四个方向的外边距属性。四个外边距属性表示分别为: margin-top, margin-right, margin-bottom,...

    Html5知典
  • 关于css margin,你需要知道的一切

    当我们学习CSS时,我们大多数人学到的第一件事是CSS中盒子的各个部分的细节,这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin,即盒子周围的...

    前端小智@大迁世界
  • 关于 CSS margin,一些让你模糊的点

    当我们学习CSS时,我们大多数人学到的第一件事是CSS中盒子的各个部分的细节,这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin,即盒子周围的...

    前端小智@大迁世界
  • CSS 常用属性

    Joel
  • 全球十五年脑神经研究并未作废,人工智能大国竞争继续

    【新智元导读】日前有媒体报道,一篇PNAS论文的发现让“15年的脑神经科学研究作废”。脑科学正是大国竞争之地,相关研究也与人工智能发展联系紧密,该结果真的具有这...

    新智元
  • ViewPager实现广告自动轮播核心代码(Handler+Thread)

    用户1737026
  • php空间Freehostia设置301跳转

    由于谷歌adense要求广告必须是顶级域名,所以将原有的blog.stackoverflow.club全部迁移到stackoverflow.club,这需要对原...

    羽翰尘

扫码关注云+社区

领取腾讯云代金券