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

最新推荐文章于 2024-04-29 15:35:16 发布

s_kzn

最新推荐文章于 2024-04-29 15:35:16 发布

阅读量649

点赞数 4

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_61700036/article/details/120726820

版权

本文详细介绍了CSS中的盒子高度塌陷现象及其解决方案，包括额外标签法、父级添加overflow属性、:after伪元素法和双伪元素清除浮动。同时，对比分析了visibility和display隐藏的区别，visibility隐藏后仍占用空间，而display:none则完全移除元素的空间占用。

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

三、visibility 和 display 隐藏的区别

1. visibility 和 display

2.隐藏的区别

一、HTML、CSS、JS 区别与联系

一个基本的网站包含很多个网页，一个网页由html, css和javascript组成。

html是主体，装载各种dom元素；css用来装饰dom元素；javascript控制dom元素。

网页主要由三部分组成：结构（ Structure）、表现（ Presentation）和行为（ Behavior）

    HTML —— 结构，决定网页的结构和内容（ “是什么”）
    CSS —— 表现（样式），设定网页的表现样式（ “什么样子”）
    JavaScript（ JS） —— 行为，控制网页的行为（ “做什么”）

二、盒子高度塌陷

1.什么是元素高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

<style>
        .box{
            width: 800px;
            border: 1px solid rgb(245, 44, 8);
            margin: 0 auto;
        }
        .box1{
            float: left;
            width: 300px;
            height: 200px;
            background-color: chartreuse;
        }
        .box2{
            float: left;
            width: 200px;
            height: 200px;
            background-color: cyan;
        }
    </style>

<body>
    <div class="box">
        <div class="box1">子盒子1</div>
        <div class="box2">子盒子2</div>
    </div>
</body>

浮动的元素不占有位置，因为此时的父元素是标准流，它的高度变为0

高度塌陷如图：