块级元素的一些小问题

最新推荐文章于 2023-08-09 12:26:33 发布

小星star

最新推荐文章于 2023-08-09 12:26:33 发布

阅读量317

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签： css 块级元素重叠现象塌陷现象 margin

本文链接：https://blog.youkuaiyun.com/qq_40154925/article/details/78330932

前端基础专栏收录该内容

7 篇文章

订阅专栏

之前在学css时就碰到过这些问题，现在来整理一下（本文所指盒子若无特殊说明，均为块级标签）

一：当两个盒子为父子关系时，子盒子设置margin-top时，会发生一件奇怪的事情

我们来看看是什么奇怪的事情，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box1{
                width: 500px;
                height: 500px;
                background: #ccc;
            }
            #box2{
                width: 300px;
                height: 300px;
                background: #333;
                margin-top: 200px;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div id="box2"></div>
        </div>
    </body>
</html>

按照所写代码，效果应该是里面的小盒子离顶部会有200个像素的距离，也就是小盒子的底边和大盒子的底边重叠，就像这样：这里写图片描述
但是呢，实际情况却是这样：
那么，为什么会这样呢，其实我也不知道，浏览器这种东西就是有这样或那样的小玩意阻碍着我们，但就是这些东西，我们跨过了它们，我们才得以成长。

本宝宝总结几种解决方法如下：

1.给父级添加透明边框
将以上代码css部分改为：

<style type="text/css">
            #box1{
                width: 500px;
                height: 500px;
                background: #ccc;
                border: 1px solid transparent;
            }
            #box2{
                width: 300px;
                height: 300px;
                background: #333;
                margin-top: 200px;
            }
        </style>

2.给父级盒子设置overflow:hidden;
将css部分代码改为：

<style type="text/css">
            #box1{
                width: 500px;
                height: 500px;
                background: #ccc;
                overflow: hidden;
            }
            #box2{
                width: 300px;
                height: 300px;
                background: #333;
                margin-top: 200px;
            }
        </style>

3.给父级或者给子级设置display:inline-block;

<style type="text/css">
            #box1{
                width: 500px;
                height: 500px;
                background: #ccc;
                display: inline-block;
            }
            #box2{
                width: 300px;
                height: 300px;
                background: #333;
                margin-top: 200px;
                /*display: inline-block;*/
            }
        </style>

4.给父级或者子级盒子添加浮动

<style type="text/css">
            #box1{
                width: 500px;
                height: 500px;
                background: #ccc;
                /*float: left;*/
            }
            #box2{
                width: 300px;
                height: 300px;
                background: #333;
                margin-top: 200px;
                float: left;
            }
        </style>