网页标准文档流中垂直方向的margin塌陷现象

simon_chen 发布于2019-08-02 14:01 / 724人阅读

摘要：在标准文档流中即没有浮动，如果设置了浮动那就不会出现这中情况了，中有两个元素，这两个元素的宽高都是，第一个设置了第二个设置了，那么实际上两个元素之间的距离是，这就是塌陷现象，并且塌陷还是以大的一方为准。

在标准文档流中（即没有浮动，如果设置了浮动那就不会出现这中情况了），body中有两个div元素，这两个div元素的宽、高都是200px，第一个div设置了margin-bottom:t0px;第二个div设置了margin-top:20px，那么实际上两个div元素之间的距离是50px，这就是margin塌陷现象，并且margin塌陷还是以大的一方为准。如图片：




    
        margin-bottom: 50px;
    
    
        margin-top: 20px;

GPU云服务器云服务器云服务器网络带宽受限的现象 C 从 UTF-8 流中读取字符串的正确标准网页 margin:

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

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

网页标准文档流中垂直方向的margin塌陷现象

摘要：在标准文档流中即没有浮动，如果设置了浮动那就不会出现这中情况了，中有两个元素，这两个元素的宽高都是，第一个设置了第二个设置了，那么实际上两个元素之间的距离是，这就是塌陷现象，并且塌陷还是以大的一方为准。在标准文档流中（即没有浮动，如果设置了浮动那就不会出现这中情况了），body中有两个div元素，这两个div元素的宽、高都是200px，第一个div设置了margin-bottom:t...

flybywind 2019-08-30 15:55 评论0 收藏0
CSS知识点及技巧整理

摘要：当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。详见浮动与清除浮动浮动相关知识属性的取值元素向左浮动。是相对长度单位，相对于当前对象内文本的字体尺寸。这些个知识点是我个人认为的，下面我们就来看看这些个知识点。 1.怎么让一个不定宽高的 DIV，垂直水平居中? 使用Flex 只需要在父盒子设置：display: flex; justify-content: cent...

masturbator 2019-08-30 14:02 评论0 收藏0
CSS知识点及技巧整理

摘要：当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。详见浮动与清除浮动浮动相关知识属性的取值元素向左浮动。是相对长度单位，相对于当前对象内文本的字体尺寸。这些个知识点是我个人认为的，下面我们就来看看这些个知识点。 1.怎么让一个不定宽高的 DIV，垂直水平居中? 使用Flex 只需要在父盒子设置：display: flex; justify-content: cent...

EasonTyler 2019-08-01 18:38 评论0 收藏0
web前端（11）—— 页面布局1

摘要：维护起来更加方便不足雪碧的最大问题是内存使用拼图维护比较麻烦使的编写变得困难雪碧调用的图片不能被打印我们可以使用综合属性制作通天，什么是通天呢，就是一般我们电脑的屏幕都是但是设计师给我们的图都会比这个大，那么我们可以此属性来制作通天。要说页面布局的话，那就必须说说margin，padding，和background。这三个属性其实都是前面讲过的，这里还是再次讲解以下，为什么呢？因为是这样的...

番茄西红柿 2019-04-23 13:11 评论0 收藏0