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模拟通讯录人员排序(sen.js)

// JavaScript Document  var PY_Json_Str = ""; var PY_Str_1 = ""; var PY_Str_...

5966
来自专栏一个会写诗的程序员的博客

java.sql.SQLException: connection holder is null

java.sql.SQLException: connection holder is null

1341
来自专栏linux驱动个人学习

高通Audio中ASOC的machine驱动

ASoC被分为Machine、Platform和Codec三大部分,其中的Machine驱动负责Platform和Codec之间的耦合以及部分和设备或板子特定的...

9784
来自专栏专知

2018年SCI期刊最新影响因子排行,最高244,人工智能TPAMI9.455

2018年6月26日,最新的SCI影响因子正式发布,涵盖1万2千篇期刊。CA-Cancer J Clin 依然拔得头筹,其影响因子今年再创新高,达244.585...

1282
来自专栏增长技术

App Guide相关

##TourGuide https://github.com/worker8/TourGuide

702
来自专栏码匠的流水账

聊聊HystrixThreadPool

hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java

781
来自专栏我和未来有约会

简练的视图模型 ViewModel

patterns & practices Developer Center 发布了 Unity Application Block 1.2 for Silver...

2199
来自专栏余生开发

echarts太阳分布图-饼图来回穿梭

var dom = document.getElementById("container");

1202
来自专栏linux驱动个人学习

高通msm8909耳机调试

1、DTS相应修改: DTS相关代码:kernel/arch/arm/boot/dts/qcom/msm8909-qrd-skuc.dtsi: 1 s...

7605
来自专栏WOLFRAM

错觉艺术的巅峰,错觉图形大师M.C. Escher的不可能方块的可能模型

1353

扫码关注云+社区