css边框塌陷

最新推荐文章于 2025-04-03 23:29:26 发布

Spring`

最新推荐文章于 2025-04-03 23:29:26 发布

阅读量611

点赞数 2

本文链接：https://blog.youkuaiyun.com/li20010310/article/details/121899423

版权

觉得小编写的还不错的给点点关注点点赞。谢谢！

造成边框塌陷的原因是什么？

通俗的讲就是：父级元素内的所有子元素脱离了标准文档流，导致了父级元素的内容为空，高度没有内容撑起来，边框塌陷看起来变成了一条线。

那么，解决边框塌陷问题有几种方式：

直观，直接给heigth设置高度；
伪类after；
通过overflow：auto；
在父级元素后添加一个快元素，clear：both；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Spring`

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS高度塌陷问题（float塌陷&margin塌陷）

YANGMENGZHENG的博客

11-08

2623

一、什么是盒子高度塌陷？ 1、解释当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零，我们称这是CSS高度塌陷。 2、代码示例 ...

CSS-高度塌陷布局乱问题详解

主营前端方向，技术栈是vue

11-15

1097

高度塌陷布局乱问题(子元素浮动无法撑起父元素高度、方法1zoom、方法2clear: both清浮动、方法3after伪类添加空白元素清除浮动、最终方案clearfix)

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

CSS之边框塌陷

桥边菇凉的博客

05-24

556

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框塌陷的解决办法</title> <style> .father{ border: 1px solid red; } .one{ width: 100px;

CSS边框塌陷

Yes_You_Can 的博客

02-16

579

css问题记录

CSS中的边距塌陷问题，给盒子设置内外边距不起效，有哪些情景，有哪些解决方法

最新发布

2402_84327094的博客

04-03

662

边距塌陷是指在CSS中，当两个块级元素的上下外边距（margin）重叠时，最终的外边距值不是两者之和，而是取其中的最大值。这种现象会导致页面布局出现意外的间距问题。

CSS Margin 坍塌

代码人生

02-13

656

带你了解什么是CSS Margin坍塌，以及如何解决Css Margin 坍塌问题

边框塌陷的问题

weixin_40353470的博客

03-31

2771

今天周六要过来上班，闲来无事就又研究了一下css的问题，前一段时间去面试，被问到边框塌陷的问题，我是一个小白，只是知道并没有深入的去了解，今天在网上查了一下，自己也去敲了一遍，终于有所了解。下面是我写的一个demo。打开浏览器，我想有些小白肯定和我想的一样，样式呈现出来如下：如果认为如上图的话那么你就错了，其实是下面的样子：我一头雾水的去查了一下，发现是边框塌陷的问题，因为CSS中存在一个mar...

什么是边框塌陷，如何解决

mike_95的博客

10-18

2989

项目场景： <style> .wrapper{ width: 200px; height: 200px; background-color: red; margin-left: 100px; margin-top: 100px; } .demo{ width: 100px; heig

css盒子模型 css margin 外边框合并

12-01

外边距合并（也称作外边距塌陷）是CSS布局中的一个关键特性。当两个垂直相邻的元素的外边距相遇时，它们会合并成一个较大的外边距。这在处理段落或列表项等连续元素时尤为常见，可能导致元素之间的间距小于预期。...

CSS的border 边框padding 内边距margin 外边距，外边距合并，塌陷问题解决方法

m0_51796659的博客

09-24

557

盒子模型（Box Model)组成 border 边框 content 内容 padding 内边距 margin 外边距所谓盒子模型：就是把HTML页面中布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。

css中关于父元素浮动塌陷的常用解决办法

01-08

在CSS布局中，一个常见的问题就是“父元素浮动塌陷”（Parent Element Collapsing）。当子元素设置了浮动（如`float: left`或`float: right`），它会脱离正常的文档流，导致父元素无法正确计算其高度，从而产生高度...

【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )

让学习成为一种习惯 ( 韩曙亮の技术博客 )

04-13

1428

一、外边距塌陷描述 1、没有塌陷的情况 2、外边距塌陷情况二、传统方法解决外边距塌陷 - 为父容器 / 子元素设置内边距 / 边框三、使用浮动解决外边距塌陷 - 为子元素设置浮动四、使用绝对定位解决外边距塌陷 - 为子元素设置绝对定位

CSS中的塌陷问题

weixin_46372993的博客

01-07

1589

学习前端的小伙伴是否经常能碰到在设置两个盒子与盒子之间边距的时候，明明上下外边距都设置了，但最终的外边距却不是他们两者之和呢？而是其中的最大的外边距值呢？下面我们一起来看看到底发生了什么，莱斯狗~~添加定位，子绝父相改变标签显示模式，转行内块，父或子都行添加浮动，父或子都行给子级添加相对定位，通过方位属性进行移动，但需要注意此时的父级与兄弟盒子仍然存在塌陷问题给父级添加溢出隐藏，触发BFC也是可以取消塌陷效果的给父级添加内边距（可设置自动内减保持盒子原来大小）给父级设置边框。

HTML外边框塌陷什么意思,html-margin塌陷：

weixin_35907331的博客

06-04

315

margin塌陷其实就是一个bug。很多人在开发的时候都会遇到。但是却不知道是怎么产生的。一下代码演示margin塌陷参考：这里是一个父子关系的div首先我们设置一下这个2个div 的css样式.ch{margin-left: 100px; /*左边距离父标签100px*/width: 100px;height: 100px;background-color: red;}.fa{margin-l...

CSS 解决父级边框塌陷问题的四种解决办法

weixin_68548138的博客

05-14

3217

文章目录1.通过设置父元素的高度解决父级边框塌陷2.通过浮动元素后加空白div解决父级边框塌陷3.通过after伪类实现解决父级边框塌陷4.通过为父级边框添加overflow属性现解决父级边框塌陷 1.通过设置父元素的高度解决父级边框塌陷弊端高度不好把控元素固定高度会降低扩展性 <html> <head> <title>浮动</title> <style> div{ m

Html中浮动造成的边框塌陷的原因和解决办法

guolin的博客

02-21

5841

在一个大div里面，嵌套4个小div，设置第一个和第三个div左浮动，第二个和第四个右浮动。这个时候就会造成边框塌陷。如图所示：如果取消第4个div的右浮动，那么就不会造成边框塌陷：如图所示：为什么会发生边框塌陷？是因为我没有给大div设置高度，那么大（父）div的高度是由这四个小（子）div的高度撑起来的，但是子div脱离了标准文档流使得子元素无法撑起文档流的时候，就会...

CSS盒子外边距塌陷与解决

rubylLc的博客

04-29

563

通常指的是当一个元素的子元素设置了外边距（margin）时，导致父元素连带向下移动，使得整个盒子模型的布局出现塌陷现象。

css高度塌陷和外边距塌陷的原因及解决办法

A_Common_Man的博客

05-10

6591

解决外边距塌陷，父元素高度塌陷的问题

CSS3中如何消除浮动带来的边框塌陷问题

Jsy_997的博客

04-06

419

浮动以及如何消除浮动带来的父元素边框塌陷问题