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

最新推荐文章于 2024-04-01 11:30:27 发布

s_kzn

最新推荐文章于 2024-04-01 11:30:27 发布

阅读量605

点赞数 4

文章标签： css html html5

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

版权

三、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

高度塌陷如图：

最低0.47元/天解锁文章

s_kzn

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
盒子高度塌陷及解决方法、visibility 和 display 隐藏

一、HTML、CSS、JS 区别于联系二、盒子高度塌陷1.什么是元素高度塌陷在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。三、visibility 和 display 隐藏的区别...
复制链接

扫一扫