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

目录

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

二、盒子高度塌陷

1.什么是元素高度塌陷

2.如何解决高度塌陷——清除浮动 

(1)额外标签法

(2)父级添加overflow

(3):after 伪元素法

(4)双伪元素清除浮动

3.清除浮动总结

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

高度塌陷如图:

<
  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值