margin详解

darry 发布于2019-08-29 11:06 / 579人阅读

摘要：二的赋值普通元素的百分比都是相对于容器的宽度计算。绝对定位元素的百分比，绝对定位元素的百分比是相对于第一个定位祖先元素的宽度计算应用宽高自适应矩形传送门之所以会是，是因为垂直方向上发生重叠。

一. margin对尺寸的影响 1.可视尺寸

a.适用于没有设定width/height的普通block水平元素
float元素、absolute/fixed元素、inline元素、table-cell元素都不可以
b.只适用于水平方向尺寸，可以改变可视尺寸

应用：

a.一侧定宽的自适应布局。
HTML：

    
    一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局一侧定宽的自适应布局

CSS:

.left{height:200px;width:200px;background:blue;float:left;}
.right{margin-left:300px;}

b.两端对齐布局
见下文负margin部分。

2.占据尺寸

block/inline-block水平元素均适用

与有没有设定width/height值无关

适用于水平方向和垂直方向

应用

a.滚动容器内上下留白
demo: codepen传送门
b.等高布局
见下文负margin部分。

二. margin的赋值

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

绝对定位元素的百分比margin，绝对定位元素的百分比margin是相对于第一个定位祖先元素（relative/absolute/fixed）的宽度计算

应用

宽高2：1自适应矩形
demo: codepen传送门
之所以会是2：1，是因为垂直方向上margin发生重叠。

三. margin重叠 1. 通常特性：

block水平元素（不包括float和absolute元素）

不考虑writing-mode，只发生在垂直方向（margin-top/margin-bottom）

2. 重叠的3种情境 A.相邻的兄弟元素 B. 父级和第一个/最后一个子元素

子元素的margin-top相当于父元素的margin-top
a.margin-top重叠
父元素非块状格式化上下文元素
父元素没有border-top设置
父元素没有padding-top值
父元素和第一个子元素之间没有inline元素分隔

b.margin-bottom重叠
父元素非块状格式化上下文设置
父元素没有border-bottom设置
父元素没有padding-bottom值
父元素和第一个子元素之间没有inline元素分隔
父元素没有height，min-height，max-height

C.空的block元素

元素没有border设置
元素没有padding值
里面没有inline元素
没有height或者min-height

3. 计算规则

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

四. margin:auto

1.一侧定值，一侧auto，auto为剩余空间大小
2.两侧均是auto，则平分剩余空间（使用margin:0 auto;能够实现块状元素居中的原因）
3.writing-model与垂直居中
writing-model可以设置或检索对象的内容块固有的书写方向，具体的可以查看一下CSS参考手册，vertical-lr指的是垂直方向自左而右的书写方式，即top-bottom-left-right，再结合margin:auto; 就可以实现垂直居中。
demo: codepen传送门
4.对于绝对定位的元素，通过设置top:0;right:0;left:0;bottom:0;铺满整个页面，再通过margin:auto完成水平垂直居中定位
demo: codepen传送门

五. margin负值的应用

当元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线

1.三栏布局，可以对父元素是使用margin-right:负值;完成左右对齐
demo: codepen传送门

2.margin负值下的等高布局
关键代码：

.child{margin-bottom:-600px;padding-bottom:600px;}

demo: codepen传送门
3.两栏布局
可以看看float布局那篇文章:不改变DOM树先后顺序的方法

六. margin失效

inline元素

非替换元素，不是img元素
正常书写模式

margin重叠

display:table-cell/display:table-row等声明的margin无效
替换元素除外，firefox：table-cell类型inline-block的渲染行为

绝对定位元素非定位方位的margin值‘无效’，一直有效，但是脱离文档流。

由于float导致需要增加的边距增加

内联特性导致的margin无效

七. 新特性 1. margin-star&margin-end

正常的流向，margin-start等同于margin-left，两者重叠不累加

如果水平流从右往左，margin-start等同于margin-right

如果垂直流，margin-start等同于margin-top

2. 其他特性

margin-before：默认margin-top；
margin-collapse：可以取消重叠等等

八. 参考资料

张鑫旭《CSS深入理解之margin》

我知道你不知道的负Margin

The Definitive Guide to Using Negative Margins

云服务器 GPU云服务器 margin: margins margin margin缩写

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111428.html

CSS盒子模型中外边距（margin）折叠详解

摘要：盒子模型中外边距折叠的常见情形有如下种情况无子元素的相邻兄弟元素触发折叠的条件两个元素之间没有被其他非空元素隔开时触发外边距折叠。最近写项目过程中遇到一个CSS盒子模型中外边距（margin）折叠的情况，搞得我焦头烂额，之后再网上查阅了大量的资料，现做一个整理和总结，方便以后忘记的时候查阅，同时也供广大网友参考。如有错误或者总结方面不全的地方，欢饮广大网友指出。外边距折叠的概念：所...

wmui 2019-08-01 17:22 评论0 收藏0
CSS盒子模型中外边距（margin）折叠详解

摘要：盒子模型中外边距折叠的常见情形有如下种情况无子元素的相邻兄弟元素触发折叠的条件两个元素之间没有被其他非空元素隔开时触发外边距折叠。最近写项目过程中遇到一个CSS盒子模型中外边距（margin）折叠的情况，搞得我焦头烂额，之后再网上查阅了大量的资料，现做一个整理和总结，方便以后忘记的时候查阅，同时也供广大网友参考。如有错误或者总结方面不全的地方，欢饮广大网友指出。外边距折叠的概念：所...

genefy 2019-08-29 13:06 评论0 收藏0
margin详解

摘要：属性指定了盒的区的宽度。简写属性一次性设置四周的，而其它属性只设置它们各侧的。 margin属性指定了盒的margin区的宽度。margin简写属性一次性设置四周的margin，而其它margin属性只设置它们各侧的。这些属性适用于所有元素，但非替换行内元素上的竖直margin将不会产生任何效果 margin与容器尺寸 margin与可视尺寸 margin与可视尺寸只适用于没有设定...

stonezhu 2019-08-29 12:25 评论0 收藏0
border-sizing属性详解和应用

摘要：用于更改用于计算元素宽度和高度的默认的盒子模型。它有和三种取值。和属性包括内容，内边距和边框，但不包括外边距。所以，的解释很符合常理。使用建议使用建议根据项目中的使用经验和的建议，推荐将属性设置为。个人网站原文链接属性详解和应用 box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inheri...

Batkid 2019-04-23 13:30 评论0 收藏0