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 条评论
登录 后参与评论

相关文章

来自专栏Micro_awake web

谈谈CSS中一些比较"偏门"的小知识 前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获!

前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获! 1.常见的浏览器...

1876
来自专栏coding for love

CSS入门13-单位详解

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

482
来自专栏前端吧啦吧啦

常用页面布局分享

3568
来自专栏前端萌媛的成长之路

CSS盒子模型

1583
来自专栏大数据钻研

献给前端的小伙伴,祝大家面试顺利!

HTML相关问题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTM...

2715
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之overflow

1、Overflow基本属性   overflow:visible(默认)/hidden/scroll/auto/inherit;   visible:超出部分...

2765
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 overflow 篇

如果overflow-x、overflow-y的值相同,则等同于overflow设置了这个值。

451
来自专栏前端知识分享

第2天:HTML常用标签

一、超链接a href:www.baidu.com(跳转页面);id名(锚点跳到相应div位置);01.rar(压缩包) target:_blank(新窗口打...

721
来自专栏九彩拼盘的叨叨叨

那些 CSS 的设计失误(译)

CSS Working Group 写的 Incomplete List of Mistakes in the Design of CSS 。译的不好,请见谅。

691
来自专栏HTML5学堂

关于定位position的相关知识

HTML5学堂 - 刘国利:最近有好几个学生和自己聊起,总觉得定位有点懵。因此在本文中,主要书写了相对定位relative和绝对定位absolute,定位的用法...

2885

扫码关注云+社区