[web] css中的塌陷问题

您所在的位置：网站首页 › 解决父元素塌陷的方法 › [web] css中的塌陷问题

[web] css中的塌陷问题

2024-06-02 06:27| 来源: 网络整理| 查看: 265

css中有一些常见的塌陷问题，尤其是新手遇到之后会很解决，明明代码逻辑是正确的，为什么样式错乱了，曾经我也好几次为这个问题绊倒过，今天做一下记录总结。

1、父级边框塌陷问题描述 test .content{border:1px solid red; width: 200px; height: auto} .box{width: 100px; height: 100px; background-color: orange;}

很简单的两个方框，如图：在这里插入图片描述父元素虽然没有设置高度，但是因为子元素的存在，父元素盒子被撑开而拥有了高度，当我为里面的div加一个浮动属性float的时候

.box{width: 100px; height: 100px; background-color: orange;float:left}

在这里插入图片描述可以看到父级元素的高度出现了塌陷，这样就很容易导致页面其他部分的元素出现错位

解决办法在浮动元素末尾，也就是box下面增加，浪费标签，不常用设置父元素的高度，治标不治本，而且不常用父级添加overflow属性方法hidden|auto|scroll 都可以实现，不推荐使用after伪元素清除浮动，推荐使用 .content:after{content: "."; display: block; height: 0; clear: both; visibility: hidden;} 2、外边距塌陷问题描述

1. 相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并。

在这里插入图片描述 2. 嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。在这里插入图片描述相比于1而言，我觉得这种合并对新手而言会更难发现和处理，我在这个地方吃的亏我永远的记得，浪费了我好久的时间，就是搞不清楚为什么显示的不对，当时的问题大概是这个样子：

test body{border: 1px solid red;} .content{width: 200px; height:200px; background-color: yellow; margin-top: 10px;} .box{width: 100px; height: 100px; background-color: orange;}

红框代表body，黄色方块是一个大一点的内容框，橙色方块是黄色方块里面的一个子元素。因为为了页面美观，一般为黄色方块设置一个上边距20px。效果如图在这里插入图片描述然后在写子元素的时候，子元素和内容框需要留出一个50px的边距，当时脑子都没想，直接给子元素设置一个margin-top:50px。以为会得到想要的结果，结果确实这个样子的：

.box{width: 100px; height: 100px; background-color: orange; margin-top: 50px;}

在这里插入图片描述父元素也跟着一起下来了，当时就懵了，百思不得其解。而且当时还不知道怎么去调，甚至百度都不知道应该搜索什么关键词，因为样式写的完全没毛病。只能怪当时学艺不精！！！

解决办法可以为父元素定义1像素的上边框或上内边距。可以为父元素添加overflow:hidden用padding替换margin

【本文地址】

[web] css中的塌陷问题

[web] css中的塌陷问题

今日新闻

推荐新闻