盒子塌陷的解决方法

最新推荐文章于 2023-06-28 20:20:31 发布

wo可飒

最新推荐文章于 2023-06-28 20:20:31 发布

阅读量233

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_53380949/article/details/123917987

版权

当子元素的外边距应用到父元素导致盒子塌陷，可以通过设置父元素的`overflow:hidden;`，添加透明边框`border:1px solid transparent;`，或者浮动来避免。通常首选`overflow:hidden;`作为最佳实践。

摘要由CSDN通过智能技术生成

盒子塌陷的理解：是因为给子元素加的外边距，应用到了父元素身上。

解决的方法：

可以给父级元素加溢出隐藏（
```
overflow:hidden;
```
)
可以给父级元素加一个透明的边框
```
border:1px solid transparent;
```
给父级元素加浮动
可以用padding来代替margin设置边距

总结：比较好的使用方法当然直接用第一种方法比较好

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wo可飒

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

css拓展--盒子高度塌陷问题及其解决方法

zxn200125的博客

10-13

598

盒子高度塌陷问题及其解决方法

盒子高度塌陷及解决方法、visibility 和 display 隐藏

m0_61700036的博客

10-13

636

一、HTML、CSS、JS 区别于联系二、盒子高度塌陷 1.什么是元素高度塌陷在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。三、visibility 和 display 隐藏的区别 ...

参与评论您还未登录，请先登录后发表或查看评论

详解CSS盒子塌陷的5种解决方法

12-14

一，盒子塌陷是什么？本应该在父盒子内部的元素跑到了外部。二，为什么会出现盒子塌陷？当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零，我们称这是CSS高度塌陷。下图下方两个子元素的盒子分别设置了左浮动和右浮动，顶端的长条盒子出现了塌陷 ex : 三，关于盒子塌陷的几种解决方法最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及

盒子模型塌陷解决办法

赵佳敏的博客

10-27

2230

一、盒子模型塌陷当子元素设置外边距，导致父元素连带向下，就会导致盒子模型塌陷。例如这种情况： <style> *{ margin: 0; padding: 0; } .box{ width: 100px; height: 100px; background-color: tomato; } ..

盒子塌陷及其解决方法

hannah2233的博客

07-09

2667

1、父盒子内部的元素跑到了外部 2、为什么会出现盒子塌陷?1、盒子大小写死，给每个盒子设定固定的width和height 2、父盒子添加overflow属性3、父盒子最下方引入清除浮动块 4、 after伪元素清除浮动 5、使用before和after双伪元素清除浮动...

CSS盒子塌陷以及解决办法

weixin_58545784的博客

06-28

2466

情况一：当子元素设置外边距，导致父元素连带向下，这就导致盒子模型塌陷情况二：当父元素未设置高度，此时父元素的高度取决于子元素的高度，当子元素设置浮动后，会脱离文档流，造成子元素的内容在父元素外出现。脱离文档流：在HTML中块级元素一个一排自上往下堆放，行内元素自左往右堆放，而脱离文档流就是不遵循这套标准，元素于元素之间开始堆叠。

css拓展--盒子外边距塌陷/合并问题及其解决方法

zxn200125的博客

10-16

926

盒子外边距塌陷/合并问题及其解决方法

盒子高度塌陷

m0_70516782的博客

06-30

177

一般情况父元素的高度不会写死，让他被内容撑开高度塌陷设置元素脱离文档流，那就无法撑开父元素的高度，导致父元素的高度丢失使得页面布局发生混乱这就叫高度塌陷将父元素高度固定住不推荐使用页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC 当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素 BFC 理解为一个封闭的大箱子，箱子

CSS(四)(盒子塌陷问题)

m0_48375854的博客

10-15

607

文章目录一、盒子塌陷问题1.出现问题2.解决办法3.具体实现二、其他盒子塌陷问题一、盒子塌陷问题 1.出现问题有两个嵌套的DIV盒子，父盒子里面有一个子盒子，想让子盒子和父盒子上边距之间有一段间距，但是给子级元素添加的外边距没有效果，效果显示在了父级元素身上。例如：给定两个DIV盒子，父盒子为宽高均为200像素的蓝色盒子，子盒子为宽高均为100像素的绿色盒子，给子盒子添加上外边距30px。 HTML结构为： <body> <div class="father">

CSS盒子塌陷及解决方法

橘猫吃不胖的博客

02-08

6616

CSS盒子塌陷及解决方法1 盒子塌陷的原因2 如何清除塌陷 1 盒子塌陷的原因什么是盒子塌陷？外部的盒子没有包裹住内部的浮动盒子，导致了盒子塌陷。盒子高度塌陷原因？ ①父元素没有设置高度（height）； ②且其子元素脱离了文档流，导致内部没有元素可以撑起当前父元素： a. 内部子元素使用了浮动导致内部元素脱离了文档流，且脱离文档流的元素无法撑起当前父元素。 b. 内部子元素使用了绝对定位或者固定定位脱离文档流。示例：设置一个父div和一个子div，首先不设置父盒子的高度，给父盒子设置宽

CSS盒子塌陷问题解决方案

前端向朔

10-07

8000

什么是盒子塌陷？外部盒子本应该包裹住内部的浮动盒子，结果却没有。问题出现的原因父元素只包含浮动元素，那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto，就会出现这种情况，如果父元素不包含任何的可见背景，这个问题会很难被注意到。因为子元素设置了float属性，而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子，因为内

盒子模型塌陷？什么是BFC?

m0_55557411的博客

04-29

1258

盒子模型塌陷的问题，和解决方案

css盒子塌陷的几种解决方法

温壁

10-11

4464

<！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.0 Transitional // EN”> <html> <head> <title> </ title> <meta name =“”content =“”> <style> * { 保证金：0像素; 填充：0像素; }

解决盒子模型中的塌陷情况

liuliyueliuli的博客

08-14

1302

我们在HTML中总会遇到各种情况，其中盒子塌陷就是一种常遇到的情况，解决这一问题有三种方法。 Q.问题的产生。两个盒子呈嵌套关系，对子盒子设置 margin-top时父盒子会随着子盒子同时下移，并且 margin-top看不到效果。解决方法如下： 1.给父盒子添加溢出隐藏：overfl：hidde；代码如下：效果图： 2.在父盒子中设置边框：border; 效果图： 3.在父盒...

盒子塌陷的原因？解决方法

zhou_ya_nan的博客

11-26

2345

导致塌陷的主谋----浮动原因一：浮动的脱落标准流原因二：嵌套的两个盒子，子盒子设置margin-top会导致父盒子一下子下移解决方法第一：清除浮动第二：给父盒子加高度第三：给父元素添加overflow：hidden 针对原因一： 1.可以给父元素加上边框 2.可以给父元素添加overflow:hidden ...

CSS盒子外边距塌陷问题的几种解决方案

m0_46335802的博客

04-12

966

关于CSS中盒子模型中外边距坍塌的解决方案，可能老师只讲了3种！但是还有其他！！！

关于盒子塌陷的几种解决方法

小猪的博客

10-25

1757

1、最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。 2、给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。 3、给父盒子添加overflow属性。 overflow:a...

解决margin塌陷的几种方式

x2694397795的博客

02-24

1304

解决margin塌陷,首先我们需要清楚什么情况下会发生外边距塌陷现象,一般塌陷分为两种情况

CSS解决盒子高度塌陷问题

m0_51144154的博客

01-05

1509

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题。方法一：我们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。方法二：根据W3C的标准，在页面

绝对定位盒子高度塌陷