返回顶部
首页 > 资讯 > 精选 >CSS盒子塌陷如何解决
  • 293
分享到

CSS盒子塌陷如何解决

2023-06-08 05:06:11 293人浏览 八月长安
摘要

本篇文章为大家展示了CSS盒子塌陷如何解决,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。一,盒子塌陷是什么?本应该在父盒子内部的元素跑到了外部。二,为什么会出现盒子塌陷? 当父元素没设置足够大小的时

本篇文章为大家展示了CSS盒子塌陷如何解决,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

一,盒子塌陷是什么?

本应该在父盒子内部的元素跑到了外部。

二,为什么会出现盒子塌陷?

当父元素没设置足够大小的时候,而子元素设置了浮动的属性,子元素就会跳出父元素的边界(脱离文档流),尤其是当父元素的高度为auto时,而父元素中又没有其它非浮动的可见元素时,父盒子的高度就会直接塌陷为零, 我们称这是CSS高度塌陷。

下图下方两个子元素的盒子分别设置了左浮动和右浮动,顶端的长条盒子出现了塌陷

ex :

CSS盒子塌陷如何解决

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

最简单,直接,粗暴的方法就是盒子大小写死,给每个盒子设定固定的width和height,直到合适为止,这样的好处是简单方便,兼容性好,适合只改动少量内容不涉及盒子排布的版面,缺点是非自适应,浏览器的窗口大小直接影响用户体验。

给外部的父盒子也添加浮动,让其也脱离标准文档流,这种方法方便,但是对页面的布局不是很友好,不易维护。

给父盒子添加overflow属性。

  1. overflow:auto; 有可能出现滚动条,影响美观。

  2. overflow:hidden; 可能会带来内容不可见的问题。

父盒子里最下方引入清除浮动块。最简单的有:

<br style="clear:both;"/>

有很多人是这么解决的,但是我们并不推荐,因为其引入了不必要的冗余元素 。

after伪类清除浮动。

外部盒子的after伪元素设置clear属性。

#parent:after{                clear: both;                content: "";                width: 0;                height: 0;                display: block;                visibility: hidden;            }

这是一种纯CSS的解决浮动造成盒子塌陷方法,没有引入任何冗余元素,推荐使用此方法来解决CSS盒子塌陷。

备注:第五种方法虽好,但是低版本IE不兼容,具体选择哪种解决方法,可根据实际情况决定。

css的三种引入方式

1.行内样式,最直接最简单的一种,直接对html标签使用style=""。2.内嵌样式,就是将CSS代码写在之间,并且用

进行声明。3.外部样式,其中链接样式是使用频率最高,最实用的样式,只需要在之间加上

就可以了。其次就是导入样式,导入样式和链接样式比较相似,采用@import样式导入CSS样式表,不建议使用。

上述内容就是CSS盒子塌陷如何解决,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网精选频道。

--结束END--

本文标题: CSS盒子塌陷如何解决

本文链接: https://www.lsjlt.com/news/252059.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • CSS盒子塌陷如何解决
    本篇文章为大家展示了CSS盒子塌陷如何解决,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。一,盒子塌陷是什么?本应该在父盒子内部的元素跑到了外部。二,为什么会出现盒子塌陷? 当父元素没设置足够大小的时...
    99+
    2023-06-08
  • 如何解决css高度塌陷问题
    这篇文章将为大家详细讲解有关如何解决css高度塌陷问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 高度塌陷在文档流中,父元素的高度默认被子元素撑开,也就是说子元素多高,父元素就多高。但是, 当为子...
    99+
    2023-06-08
  • CSS中如何解决高度塌陷问题
    这篇文章将为大家详细讲解有关CSS中如何解决高度塌陷问题,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。HTML:<div class="first">...
    99+
    2023-06-08
  • CSS中出现外边距塌陷如何解决
    CSS中出现外边距塌陷如何解决?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。首先我们先看出现外边距塌陷的三种情况:当上下相邻的两个块级元素相遇,上面的元素有下边距margin-...
    99+
    2023-06-08
  • 如何解决css中高度塌陷的问题
    本文将为大家详细介绍“如何解决css中高度塌陷的问题”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“如何解决css中高度塌陷的问题”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获...
    99+
    2023-06-06
  • 如何解决margin-top塌陷的问题
    这篇文章给大家分享的是有关如何解决margin-top塌陷的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。什么是margin-top塌陷margin-top塌陷是在CSS的盒...
    99+
    2024-04-02
  • css中父元素高度塌陷怎么解决
    这篇“css中父元素高度塌陷怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css中...
    99+
    2024-04-02
  • CCS中margin:top塌陷的解决方法
    这篇文章将为大家详细讲解有关CCS中margin:top塌陷的解决方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。HTML结构如下:CCS结构如下:页面效果图如下:现在我们可以看到在子元素中明明设置了向...
    99+
    2023-06-08
  • HTML中怎么解决margin塌陷问题
    这篇文章主要介绍了HTML中怎么解决margin塌陷问题的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML中怎么解决margin塌陷问题文章都会有所收获,下面我们一起来看看...
    99+
    2024-04-02
  • css如何让盒子并排显示
    这篇文章主要介绍css如何让盒子并排显示,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css的全称是什么css的全称是Cascading Style Sheets(层叠样式表),它是一种用来表现HTML或XML等文件...
    99+
    2023-06-14
  • css中flexbox弹性盒子如何布局
    小编给大家分享一下css中flexbox弹性盒子如何布局,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 在CSS3弹性盒子模型...
    99+
    2024-04-02
  • Css中如何调整盒子的边框
    这篇文章主要介绍Css中如何调整盒子的边框,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!CSS技术利用border系列属性来调整盒子的边框。1、调整盒子边框的粗细:border-to...
    99+
    2024-04-02
  • CSS盒子模型怎么理解
    本篇内容主要讲解“CSS盒子模型怎么理解”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS盒子模型怎么理解”吧!理解CSS盒子模型如果你想实现不需要很多奇巧淫...
    99+
    2024-04-02
  • css盒子模型的实例讲解
    这篇文章主要讲解了“css盒子模型的实例讲解”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css盒子模型的实例讲解”吧!CSS盒子模型:W3C组织建议把所有...
    99+
    2024-04-02
  • CSS中如何调整盒子的填充距离
    这篇文章主要介绍了CSS中如何调整盒子的填充距离,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。CSS技术将HTML中所有的元素都认为是一个“...
    99+
    2024-04-02
  • css如何使用伪类实现盒子阴影
    这篇文章给大家分享的是有关css如何使用伪类实现盒子阴影的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。伪类实现盒子阴影众所周知,Animate/transition box-sh...
    99+
    2024-04-02
  • 如何解决父级元素未设置高度和宽度时高度塌陷问题
    本篇内容介绍了“如何解决父级元素未设置高度和宽度时高度塌陷问题”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2024-04-02
  • css如何设置盒子两像素黑色边框
    这篇文章主要介绍“css如何设置盒子两像素黑色边框”,在日常操作中,相信很多人在css如何设置盒子两像素黑色边框问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css如何设置盒...
    99+
    2024-04-02
  • css如何使用定位实现盒子的居中
    这篇文章主要介绍了css如何使用定位实现盒子的居中,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。使用定位实现盒子的居中  .outer{  ...
    99+
    2024-04-02
  • css如何实现图片在盒子中的居中
    这篇文章将为大家详细讲解有关css如何实现图片在盒子中的居中,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。图片在盒子中的居中  .box{   width: 3...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作