css中的塌陷问题

最新推荐文章于 2024-01-07 09:54:37 发布
最新推荐文章于 2024-01-07 09:54:37 发布
阅读量145 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40687516/article/details/103123099
版权

css中的塌陷问题

嵌套块元素垂直外边距的合并即塌陷
发生的情况
1.对于两个嵌套关系的块元素，如父元素没有上内边距即边框
2.父元素的上边距会与子元素的上边距发生重合
3.合并后的外边距为两者较大者

解决方案
1.可以为父元素定义上边框
2.为父元素定义上内边距
3.为父元素添加overflow:hidden
其他方法如浮动，固定，绝对定位等

纹叶啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css高度塌陷问题
qq_43203656的博客
03-16 1073
首先什么是高度塌陷? 当我们需要给页面设置自适应宽高的时候,在文档流中,父元素的高度默认的情况下是被子元素的高度撑开的,子元素的高度就是父元素的高度,当我们给子元素设置了浮动厚,子元素就会脱离文档流; 当你第一次给父元素设置自适应的时候,又给子元素设置浮动元素的时候,你就会发现,父元素的高度没有了,这就是子元素无法撑起父元素的高度,从而导致了父元素的高度塌陷. 我们举例说明一下,首先我们建立一个父...
浅谈CSS 高度塌陷问题
09-22
在网页布局设计中，CSS高度塌陷是一个常见的问题，它发生在父元素没有设置固定高度，而其内部的浮动子元素又导致父元素无法根据子元素高度自适应时。这个问题的核心在于，当子元素设置了浮动（如`float:left`或`...
CSS中的塌陷问题
最新发布
weixin_46372993的博客
01-07 1237
学习前端的小伙伴是否经常能碰到在设置两个盒子与盒子之间边距的时候，明明上下外边距都设置了，但最终的外边距却不是他们两者之和呢？而是其中的最大的外边距值呢？下面我们一起来看看到底发生了什么，莱斯狗~~添加定位，子绝父相改变标签显示模式，转行内块，父或子都行添加浮动，父或子都行给子级添加相对定位，通过方位属性进行移动，但需要注意此时的父级与兄弟盒子仍然存在塌陷问题给父级添加溢出隐藏，触发BFC也是可以取消塌陷效果的给父级添加内边距（可设置自动内减保持盒子原来大小）给父级设置边框。
[web] css中的塌陷问题
浅夜
10-26 950
css中有一些常见的塌陷问题，尤其是新手遇到之后会很解决，明明代码逻辑是正确的，为什么样式错乱了，曾经我也好几次为这个问题绊倒过，今天做一下记录总结。 1、父级边框塌陷 问题描述 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> .content{border:1px sol
CSS———高度塌陷问题
一李
10-16 205
在文档流中父元素默认被子元素撑开。 但是为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素，导致父元素的高度塌陷。 由于父元素塌陷，父元素下的所有元素会上，导致布局混乱。 所以避免出现高度塌陷问题。 可以将父元素的高度而写死。但是父元素的高度不能适应子元素的高度。 解决高度塌陷问题（一） 根据w3c标准，元素在页面中都有一个影藏的额属性，Block F...
css高度塌陷问题的解决方案
11-21
所以在开发中一定要避免出现高度塌陷的问题。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">
CSS高度塌陷.md
08-27
父元素在文档流中默认的高度是由子元素撑开的，由于子元素添加浮动后会脱离文档流，无法撑起父元素，会导致父元素的高度塌陷。本文解释了CSS高度塌陷的原因及高度塌陷解决方案。
CSS中如何解决外边距塌陷问题
11-20
首先我们先看出现外边距塌陷的三种情况： 1.当上下相邻的两个块级元素相遇，上面的元素有下边距margin-bottom，下面的元素有上边距margin-top，则它们之间的垂直距离取两个值中的较大者。 <style> .box1 { ...
css解决塌陷问题
weixin_53912712的博客
07-01 524
BFC、clear、after伪类、clearfix类
CSS中高度塌陷问题
weixin_39676449的博客
03-21 1385
一.高度塌陷产生原因： 父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷 二.造成后果： 父元素的高度一旦塌陷，所有标准流中元素的位置将会上移，导致整个页面布局混乱 三.解决方案： 1.开启父元素的BFC: （1）Block Formatting Context 块级格式化环境 （2）BFC是元素的隐含属性，默认是在关闭状态的 （...
【第二部分 | CSS】4：网页布局之盒子模型
m0_57265007的博客
10-04 1762
CSS第四篇文章：介绍了网页布局的本质、盒子模型、盒子样式等知识
CSS中常见的高度塌陷问题及解决办法
z020729的博客
03-25 4342
在使用css实现样式时，难免碰到一个棘手的问题——高度塌陷，如果把问题分析通透，那就容易解决了。 “塌陷”很容易让人联想到高楼倒塌，“高度”也应证了这是出现在两个垂直相交的元素（盒子）之间的问题，这两个元素的关系有兄弟元素和父子元素两种情况。 1.兄弟元素之间的高度塌陷 ...
CSS中高度塌陷问题以及解决办法
weixin_46011471的博客
06-16 964
首先在DOM中，父元素div的高度在没有设定高度情况下是默认被子元素撑开，就是说父多高，子就有多高。可是在设定子元素为float：left/right后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。这样可能导致子元素对于父元素脱节，上移，导致整个界面布局混乱。</.box1/*为box1设置一个边框*/border;.box2width;height;;float;;
CSS盒子模型
m0_74991285的博客
06-01 254
因此我们在布局前，首先要清楚下网页元素的内外边距。对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距1，此时父元素会塌陷较大的外边距值。CSS盒子模型本质上就是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距、和实际内容。（3）使a标签转化为行内块元素，设置高度、颜色、字体大小、内边距、鼠标经过时的颜色并且取消下划线。：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
【web前端】CSS盒子模型
qq_61768389的博客
06-29 2261
居然隔了一个星期了，啊我到底在干嘛。使用课程是黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili目录框架 一、盒子模型1、盒子模型组成2、边框 3、表格的细线边框4、边框会影响盒子的实际大小 5、内边距6、案例-新浪导航栏7、案例-小米侧边栏8、外边距9、外边距典型应用10、外边距合并11、清除内外边距二、PS基本操作综合案例 ​编辑 疑问解答 三、圆角边框1、语法和原理 2、常用写法 四、盒子阴影 五、文字阴影 代码如下：
网页盒子模型
半亩方塘
08-29 1081
网页盒子模型存在两种：            1：标准W3C盒子模型； 2：IE盒子模型（IE浏览器默认的模型）。            在两种不同模型网页里，定义了相同CSS属性的元素显示效果是不一样的，下面就用公式来区分这两种不同的盒子模型。            1：标准W3C盒子模型             宽=width+(padding-left)+(padding-right)+(m
解决css中高度塌陷的问题
ZHengYXiong的博客
07-05 1473
导致高度塌陷的原因      在文档流中，父元素的高度默认是被子元素所撑开的，也就是说子元素有多高，父元素就有多高。但是当为子元素设置浮动以后，子元素将完全脱离文档流，脱离文档流后子元素将无法撑起父元素的高度，这时就会导致父元素高度塌陷。由于父元素的高度塌陷后，父元素下面的元素就会向上移动，这样将会导致整个页面的布局混乱。解决高度塌陷        方法一：       可以将父元素的高度写死，以...
CSS之高度塌陷问题解决方案
靡不有初鲜克有终
07-22 769
.box1{ border: 10px red solid; /* * 根据W3C的标准，在页面中都有一个隐含的属性叫Block Formatting Context * 简称 BFC，该属性可以设置打开或者关闭。默认是关闭的。 * 当开启元素的BFC后，元素将会有一下特性： * 1、父元素的外边距不会和子元素重叠 *
css元素塌陷问题解决方案
05-25
CSS元素塌陷问题是指当一个父元素包含了一些浮动的子元素，并且这些子元素的高度超过了父元素的高度时，父元素的高度将会塌陷，导致页面布局出现问题。解决这个问题的方法有多种，下面列举两种常用的方法： 1. 使用清除浮动的技巧：在父元素的末尾添加一个空的块元素（如div）并设置clear属性为both。这样可以清除浮动，使父元素的高度包含所有子元素的高度。 ```html <div class="parent"> <div class="child float-left"></div> <div class="child float-left"></div> <div class="clear"></div> </div> <style> .float-left { float: left; } .clear { clear: both; } </style> ``` 2. 使用Flex布局：使用Flex布局可以让父元素自适应子元素的高度，从而解决元素塌陷的问题。 ```html <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <style> .parent { display: flex; flex-wrap: wrap; } .child { flex-basis: 50%; } </style> ``` 以上两种方法均能有效解决元素塌陷的问题，具体使用哪种方法取决于实际情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值