[web] css中的塌陷问题

最新推荐文章于 2024-01-07 09:54:37 发布

qianye_97

最新推荐文章于 2024-01-07 09:54:37 发布

阅读量940

点赞数 4

分类专栏： web 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_37574623/article/details/109297271

版权

web 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

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

1、父级边框塌陷

问题描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
    .content{border:1px solid red; width: 200px; height: auto}
    .box{width: 100px; height: 100px; background-color: orange;}
  </style>
</head>
<body>
  <div class="content">
	<div class="box"></div>
  </div>
</body>
</html>

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

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

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

解决办法

在浮动元素末尾，也就是box下面增加<div style=”clear:both”></div>，浪费标签，不常用
设置父元素的高度，治标不治本，而且不常用
父级添加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而言，我觉得这种合并对新手而言会更难发现和处理，我在这个地方吃的亏我永远的记得，浪费了我好久的时间，就是搞不清楚为什么显示的不对，当时的问题大概是这个样子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
    body{border: 1px solid red;}
    .content{width: 200px; height:200px; background-color: yellow; margin-top: 10px;}
    .box{width: 100px; height: 100px; background-color: orange;}
  </style>
</head>
<body>
<div class="content">
	<div class="box"></div>
</div>
</body>
</html>

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

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

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

解决办法

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

qianye_97

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
[web] css中的塌陷问题

css中有一些常见的塌陷问题，尤其是新手遇到之后会很解决，明明代码逻辑是正确的，为什么样式错乱了，曾经我也好几次为这个问题绊倒过，今天做一下记录总结。1、父级边框塌陷问题描述<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title> <style> .content{border:1px sol
复制链接

扫一扫

专栏目录