盒模型中常遇到的问题

莫奈的日出

已于 2022-05-18 14:27:54 修改

阅读量309

点赞数

文章标签： html5 css

于 2022-04-12 15:40:02 首次发布

本文链接：https://blog.csdn.net/weixin_52993364/article/details/124125591

版权

此章思维导图：

一高度塌陷：

1.高度塌陷问题阐述：父级的第一个子级标签是个块标签，并且使用了margin或者是margin-top

具体实例如下：

代码

正文内容：

  <body>

        <div class="fa">

        <div class="son"></div>

        </div>

         </body>

        样式（style标签中）

        <style>

        .fa{

            width:100px;

            height:100px;

            background-color: aqua;

        }

        .son{

            width: 30px;

            height: 30px;

            background-color: orange;

            margin-top:20px;

        }

        </style>

高度塌陷的效果图：

2.解决高度塌陷

1.在父级使用border（但相应的要在父级中减去相应的像素）

   <style>

        .fa{

            width:100px;

            height:80px;

            background-color: aqua;

            border-top:20px solid aqua;

        }

        .son{

            width: 30px;

            height: 30px;

            background-color: orange;

            /* margin-top:20px; */

        }

    </style>

2.在父级中使用padding-top（不足：如上述问题一样）

   <style>

        .fa{

            width:100px;

            height:80px;

            background-color: aqua;

            border-top:20px solid aqua;

        }

        .son{

            width: 30px;

            height: 30px;

            background-color: orange;

            /* margin-top:20px; */

        }

    </style>

3. 在父级使用 overflow: hidden (溢出隐藏)-----最常用

  <style>
        .fa{

            width:100px;

            height:100px;

            background-color: aqua;

            overflow: hidden;

        }

        .son{

            width: 30px;

            height: 30px;

            background-color: orange;

            margin-top:20px;

        }

 </style>

解决高度塌陷后的效果图：

二、使用border-radius设置图形

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>输出各种图形</title>

    <style>

        .aa{

            width:0px;

            height:0px;

            /* background-color:transparent; */

            border:50px solid pink;

            border-right-color:transparent;

            border-top-color:pink;

            border-left-color:transparent;

        }

        .bb{

            margin-top: 20px;

            width:0px;

            height:0px;

            /* background-color:transparent; */

            border:50px solid rgb(87, 87, 207);

           

            border-right-color:transparent;

            border-top-color:rgb(87, 87, 207);

            border-left-color:transparent;

            border-radius:50px;

        }

        .cc{

            margin-top:20px;

            /* margin-top: 20px; */

            width:0px;

            height:0px;

            /* background-color:transparent; */

            border:50px solid rgb(87, 207, 147);

           

            border-right-color:rgb(87, 207, 147);

            border-top-color:rgb(87, 207, 147);

            border-left-color:transparent;

            border-radius:50px;

        }

    </style>

</head>

<body>

    <div class="aa"></div>

    <div class="bb"></div>

    <div class="cc"></div>

</body>

</html>