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

相关文章

来自专栏一“技”之长

标签之美九——列表 原

无序列表使用<ul></ul>来定义标签的开始和结束。使用<li></li>来设置标签项,示例如下:

752
来自专栏Android干货

自定义控件详解(五):onMeasure()、onLayout()

1442
来自专栏吾爱乐享

php学习之html属性-表格(六)

2352
来自专栏Android干货

自定义控件详解(七):drawText()

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

元素的水平居中的方法

上面介绍的方法都是浏览器兼容性比较好的。兼容IE8+,Chrome,Firefox等。

592
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(二)获取和操作元素的属性

DOM中有很多方式获取元素,比如通过id,通过标签名,通过类名,通过name的值,通过选择器等方式。

1264
来自专栏进击的君君的前端之路

CSS3文本

892
来自专栏林德熙的博客

win10 uwp 获得元素绝对坐标

有时候需要获得一个元素,相对窗口的坐标,在修改他的位置可以使用。 那么 UWP 如何获得元素坐标? 我提供了一个方法,可以获得元素的坐标。

742
来自专栏Java后端技术

CSS语法小记

    1.选择符(Selector):指明这组样式所要针对的对象。可以是一个XHTML标签,例如h1,img;也可以是定义了特定的id或者class的标签,如...

651
来自专栏Android先生

Android开发人员初识前端

<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更...

1193

扫码关注云+社区