挖掘margin属性的内涵

alanoddsoff 发布于2019-08-29 15:29 / 2775人阅读

摘要：合并问题块级元素的上边距和下边距有时会合并或者折叠为一个外边距捕获到的重要信息只发生在块级元素，但不包括浮动元素和绝对定位元素只发生在和当前文档流方向的相垂直的方向上由于默认文档流是水平流，因此发生合并的就是垂直方向会出现外边距合并的三种基

1、margin合并问题

块级元素的上边距和下边距有时会合并或者折叠为一个外边距

捕获到的重要信息

只发生在块级元素，但不包括浮动元素和绝对定位元素

只发生在和当前文档流方向的相垂直的方向上（由于默认文档流是水平流，因此发生margin合并的就是垂直方向）

会出现外边距合并的三种基本情况 1、相邻元素之间

第一行
第二行
p {margin: 1em 0;}

第一行和第二行之间的间距还是1em，因为第一行的margin-bottom和第二行的margin-top合并了

2、父元素和它第一个或最后一个子元素之间

当父元素和它第一个子元素之间没有边框、内边距、行内内容或者清除浮动将两者的margin-top分开

同样的当父元素和最后一个子元素之间没有边框、内边距、行内内容、height、min-height/max-height将两者的margin-bottom分开，那么这时，两个外边距就会合并，子元素的外边距就会溢出到父元素外面（父元素的外边距为两者之和，子元素的外边距为0）

在默认状态下，下面三种设置是等效的

3、空的块级元素

当一个块级元素中不包含任何内容时，并且在其margin-top和margin-bottom之间没有边框、内边距、行内内容、height、min-height将两者分开，此时外边距会合并


    

.father {overflow:hidden;}
.son {margin:1em 0;}

此时.father所在的这个父级

元素高度仅仅是1em，因为.son这个空

元素的margin-top和margin-bottom合并在一起了

margin合并的计算规则

正正取大值：取大的那个值

正负值相加：取计算后的值

负负最负值：取绝对负值最大的值

margin合并的意义 1、兄弟元素的margin合并

使图文信息的排版更加舒服自然，保证元素上下间距一致

2、父子margin合并的意义

在页面中任何地方嵌套或直接放入任何空标签，都不会影响原来的块状布局

3、自身margin合并的意义

可以避免不小心遗落或者生成的空标签影响排版和布局

阻止以上margin合并的发生 1、阻止margin-top的合并（满足一个条件即可）

父元素设置为块状格式化上下文元素（比如overflow:hidden）

父元素设置border-top值

父元素设置padding-top值

父元素和第一个子元素之间添加内联元素进行分隔

2、阻止margin-bottom合并

父元素设置为块状格式化上下文元素

父元素设置border-bottom值

父元素设置padding-bottom值

父元素和最后一个子元素之间添加内联元素进行分隔

父元素设置height、min-height或max-height

3、阻止空标签margin合并

设置垂直方向的border

设置垂直方向的padding

里面添加内联元素

设置height或者min-height

以上需要注意的地方

以上情况的组合会产生更复杂的外边距合并

即使某一外边距为0，这些规则仍然适用，所以就算父元素的外边距为0，还是会出现第二种情况

如果参与合并的外边距中包含负值，合并后的外边距等于最大的外边距与最小的外边距之和

如果所有参与合并的外边距都为负值，合并后的外边距等于最小的外边距的值

2、深入理解margin:auto margin:auto的填充规则

如果一侧定值，一侧auto，则auto为剩余空间大小此时.son的左边距为20px、右边距为80px

如果两侧auto，则平分剩余空间

margin:auto的隐藏用法

为块级元素自适应左中右对齐和内联元素使用text-align控制左中右对齐相呼应

3、为什么容器定高、元素定高、margin:auto却无法垂直居中

默认文档流是水平方向

解决方案

使用writing-mode改变文档流的方向

.father{

height:200px;
writing-mode:vertical-lr;

}
.son{

height:100px;
margin:auto;

}

此时.son就是垂直居中对齐的，但是水平方向就无法auto居中

绝对定位元素的margin:auto居中

.father{
    width:300px;
    background-color:#999;
    height:200px;
    position:relative;
 }
.son {
    width:200px;
    background-color:#ccc;
    height:100px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

IE8以及以上版本浏览器才支持，但却是最好用的块级元素垂直居中对齐方式

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

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

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

运营商借云计算实现经营数据拓展新业务

摘要：在当天的论坛上，除了解决大数据问题，云计算还促进了运营商新业务的拓展。因为云计算，大数据的广泛应用从而成为了可能。电信运营商已在更多地利用云计算将大数据转化为自己的业务竞争优势。云计算和大数据这两个词已经更多地被放在一起讨论，而从应用角度看，大数据更能挑动用户的神经。目前，并不是所有的企业都面临着大数据的困扰，但是拥有着几千万甚至几亿客户的运营商，大数据所带来的问题日益显现。日前在Tera...

phpmatt 2019-04-25 16:51 评论0 收藏0
边缘计算与其“等风来”，不如自己创造“风口”

摘要：从某种程度上说，是的成立加速了边缘计算风口的形成。就像边缘计算产业联盟副理事长华为网络研发部总裁刘少伟所说的那样，边缘计算的发展与其等风来，还不如自己创造风口。在月日举行的边缘计算产业峰会上，刘少伟详细介绍了整个联盟的发展和运作情况。边缘计算并不边缘！继云计算、大数据、物联网、人工智能这些风口之后，边缘计算现在也成了业界关注的焦点。2016年边缘计算产业联盟（ECC）刚成立之时，很多人还不清...

lijy91 2019-04-29 15:38 评论0 收藏0
Java基础：Java核心技术提示的易忽略点 Ch5

摘要：而并不是父类对象的引用，而只是给编译器的一个提示性质的标志。或者自定义的提示在编译的时候使用当前子类的父类定义的构造器去初始化当前对象。所以，总结起来，的用法归为两种一是可以调用父类构造器，二是可以调用父类方法。开篇Java是一门不那么简单也不那么复杂的语言，Java里面有很多问题和特性是容易被使用者忽视的，这些问题也许会难住新手，同时也许会是老手不小心跌入的无故之坑，只有精于对基础...

weapon 2019-08-14 15:08 评论0 收藏0
向智能迈进的数字化转型如何挖掘数据新价值？

摘要：如今，华为产品线提出智，慧未来的理念，以开放生态为基础，将云人工智能大数据等先进技术与基础设施进行有机结合，帮助客户提升效率降低成本并改善用户体验，挖掘数据洪流新价值。数字化的未来靠什么？在至顶网联合英特尔推出的《新至强，决胜数据未来》系列对话节目中，知名学者、商业思想家吴伯凡说，企业应该构筑起数据洪流之上的都江堰。怎么理解？李冰父子曾鬼斧神工在岷江江心筑起了一道都江堰，让原来的洪水猛兽转换...

mengera88 2019-04-28 19:39 评论0 收藏0