盒子塌陷及实战常用的总结，隐士转换

最新推荐文章于 2023-08-17 11:09:40 发布
最新推荐文章于 2023-08-17 11:09:40 发布
阅读量281 收藏
点赞数
分类专栏： 前端开发HTML 文章标签： cs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40281275/article/details/82141749
版权

盒子塌陷 

如果存在一个子盒子，一个父盒子，在没有脱离文档流情况下，如果给子盒子一个margin-top，那么大盒子也会相对于浏览器margin-top同样的边距

解决方法：

1.给父盒子加padding

2.overflow：hidden

3.border：1px  solid blue

总结

几个图片居中 用text-align：center

文字需要加宽高，将其变成行块

背景图片平铺

float将div隐士转换为行几块标签
绝对定位，固定定位转换为行内块标签
加宽高

 

 

 

 

今天你好、阳光正好
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS盒子塌陷的5种解决方法
12-14
总结起来，解决CSS盒子塌陷的方法各有优缺点，选择哪种方式应根据项目需求、浏览器兼容性和代码可维护性来考虑。在现代网页设计中，更倾向于使用CSS Flexbox或Grid布局，这些新的布局模型可以更优雅地处理此类问题，...
关于清除浮动塌陷的几种方法总结
09-27
浮动和浮动塌陷是CSS布局中的重要概念，尤其在传统布局模式中经常遇到。浮动的主要目的是让元素在页面上能够并排显示，比如创建多列布局。当一个元素设置了浮动（`float`属性，如`float:left`或`float:right`），它...
CSS盒子高度塌陷以及高度塌陷的解决方法
weixin_66296157的博客
08-17 371
本应该在父盒子内部的元素跑到了外部，高度坍塌也就是在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零。：快速简单，兼容性良好，适合只改动少量内容不涉及盒子排布的版面。
盒子模型塌陷解决办法
赵佳敏的博客
10-27 2185
一、盒子模型塌陷 当子元素设置外边距，导致父元素连带向下，就会导致盒子模型塌陷。 例如这种情况： <style> *{ margin: 0; padding: 0; } .box{ width: 100px; height: 100px; background-color: tomato; } ..
CSS之盒子的边距塌陷（兄弟、父子）与解决方案
Erya Programming learning
06-02 3916
一、边距塌陷 CSS 盒子模型中，如果给两个盒子同时设置外边距，那么它们距离可能并不是外边距之和，称为边距塌陷。 导致边距塌陷的原因是外边距，有以下四种情况： case1：如果都是正数，则取最大值， case 2：如果相同，则取其中之一 case 3：如果有正有负，则取最大的正数加上最小的负数之和 case4：如果都是负数，则取最小值。 1.相邻盒子之间 相邻的盒子之间的边距一般都会有塌陷的情况，比如一个盒子的下边距和下面盒子的上边距： 示例1： #block1 { margin-bottom:
CSS盒子高度塌陷的解决方法
weixin_45709829的博客
04-01 2498
CSS盒子高度塌陷的解决方法 一、盒子塌陷 （1）什么是盒子塌陷 高度塌陷，当所有的子元素浮动的时候，且父元素没有高度设置，这时候会产生父元素高度塌陷，本应该在父盒子内部的元素跑到外面。 正常显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .box {
盒子浮动，盒子塌陷，解决办法：清除浮动...
日晞的博客
08-16 2007
盒子塌陷：子盒子的内容到父盒子外面 这里container：父亲盒子，item:子盒子 子盒子的内容到父盒子外面了，盒子就是塌陷了 产生塌陷的原因： 父盒子：没有设置高度 且 子盒子：脱离文档流(eg:float:left) ==> 盒子塌陷 解决盒子塌陷问题: 对父盒子：把父盒子的高度写死即可 或 对子盒子：清除子盒子的浮动 清除子盒子的浮动方法(3个)： 在子盒子后面添加一个盒子，给其添加clear：both属性 <!DOCTYPE...
html和css详细总结
04-26
很详细的一份html和css白话文总结，涉及到常见常用的大多数前端知识点。上传上来供自己和大家随时随地参考
煤矿矿区地面塌陷成因及控制措施研究
05-25
地面塌陷往往会导致一系列环境问题,具有影响范围广、危害性大的特点。为减少地面塌陷事故的发生和危害,本文采用事故树分析法探究地面塌陷的产生原因,为地面塌陷的预防与治理提供科学的理论和技术支持。本文通过建立...
采煤塌陷区地面土地规划方案及实施
07-07
提出采煤塌陷区规划的总体结构,分析主要工作流程如地图操作、地表变形分析、塌陷区评价等,重点探讨评价指标的选择,以便给后续的土地规划方案提供依据。并以具体的项目案例为背景,结合项目情况,探究规划方案的制定和...
盒子塌陷的原因？解决方法
zhou_ya_nan的博客
11-26 2308
导致塌陷的主谋----浮动 原因一：浮动的脱落标准流 原因二：嵌套的两个盒子，子盒子设置margin-top会导致父盒子一下子下移 解决方法 第一：清除浮动 第二：给父盒子加高度 第三：给父元素添加overflow：hidden 针对原因一： 1.可以给父元素加上边框 2.可以给父元素添加overflow:hidden ...
CSS-面试题:盒子塌陷的原因与解决方式
qq_41421033的博客
04-19 995
盒子塌陷的原因？解决方式 原因 情况一：浮动元素无法撑开标准流的父元素，导致父元素高度塌陷 解决方法： 1.直接给父元素设置该高度 2.使用额外标签法清除浮动 3.使用单伪元素清除法 4.使用双伪元素清除法 给父元素设置overflow:hidden 情况二：互相嵌套的块级元素，给子元素设置margin-top，父子元素的margin-top会合并，父元素会一起往下移动 1.给父元素设置border-top 2.给父元素设置padding-top 3.设置浮动 4.转换成行内块元素 5.给父元素
关于盒子塌陷的几种解决方法
小猪的博客
10-25 1715
1、最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面，缺点是非自适应，浏览器的窗口大小直接影响用户体验。 2、给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很友好，不易维护。 3、给父盒子添加overflow属性。 overflow:a...
css盒子塌陷问题
weixin_48400717的博客
01-04 309
css设置了border,还出现了外边距塌陷问题
* 盒子模型塌陷的三种解决方法
Zero____________的博客
07-04 747
**1.**为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合(可以设置成透明：border：1px solid transparent)。 **2.**为父盒子添加overflow：hidden；(溢出部分隐藏) **3.**为父盒子设定padding值；(把子盒子踢开) ...
CSS盒子塌陷问题
qq_45911263的博客
07-07 262
块级元素塌陷问题
CSS盒子模型——高度塌陷问题
zg0601的博客
10-19 527
盒子模型三种高度塌陷问题
css： 盒子高度坍塌的解决
LiliGong1的博客
07-17 268
高度坍塌常见于流式布局中。当父元素没有高度时，且子元素有float样式。原因子元素脱离文档流，无法撑开父元素。解决在坍塌的盒子上增加样式。父元素成功呈现出来。
css盒子塌陷的几种解决方法
温壁
10-11 4450
&lt;！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.0 Transitional // EN”&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; &lt;/ title&gt; &lt;meta name =“”content =“”&gt; &lt;style&gt; * { 保证金：0像素; 填充：0像素; }
绝对定位盒子高度塌陷
最新发布
08-20
绝对定位盒子不会导致高度塌陷。高度塌陷是指当一个父元素包含了浮动元素时，父元素的高度会塌陷为0，不包含子元素的高度。这种情况下，可以通过以下方法解决高度塌陷的问题： 1. 设置父元素的高度：给父元素设置一个固定的高度，可以通过设置具体的像素值或百分比来确定高度。这样父元素的高度不会受到子元素浮动的影响。 2. 开启父元素的BFC属性：BFC（Block Formatting Context）是一个独立的渲染区域，可以避免浮动元素对父元素的影响。可以通过给父元素设置以下样式来开启BFC属性： ``` overflow: auto; ``` 或 ``` display: flow-root; ``` 3. 添加一个空白的块元素：在父元素的最后一个子元素后面添加一个空白的块元素，并给它设置以下样式： ``` clear: both; ``` 这样可以清除浮动元素对父元素高度的影响。 绝对定位盒子不会对父元素的高度造成影响，因为绝对定位的元素脱离了文档流，不会对其他元素的布局产生影响。所以绝对定位的盒子不会导致高度塌陷的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [CSS盒子塌陷及解决方法](https://blog.csdn.net/m0_46612221/article/details/121295507)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [解决高度塌陷的方法](https://blog.csdn.net/m0_72975897/article/details/126268027)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值