HBuider x外边距

王欢欢~(¯▽¯~)

于 2024-04-21 13:49:33 发布

阅读量596

点赞数 4

文章标签： css css3 html

本文链接：https://blog.csdn.net/2302_79895666/article/details/138032194

版权

                           margin-bottom: 80px;
                       }
                       .box2{
                           width: 300px;<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>外边距</title>
       <style>
           <style>
                       /* 初始化所有标签的内边距和外边距，写在样式中最开始的位置 */
                       *{ /* 通配符:指所有的标签 */
                           margin: 0;
                           padding: 0;
                       }
                       .box1{
                           width: 400px;
                           height: 400px;
                           background-color: pink;
                           /* 设置块级盒子水平居中: 给盒子的左右外边距设置为auto(自动的)*/
                           /* margin: 10px auto 0; */
                           height: 300px;
                           background-color: skyblue;
                           margin-top: 120px;
                       }
                       /*
                       外边距问题1:相邻块级元素垂直外边距合并.
                       解决:一般只给其中一个盒子设置外边距.
                       外边距问题2：嵌套块级盒子之间外边距的塌陷。
                       解决方法1：给父盒子添加边框;
                       解决方法2：给父盒子添加内边距，但是会导致父盒子被撑大。
                       解决方法3：给父盒子添加样式overflow: hidden; 使用最多的解决方式。
                       */
                   .bigbox{
                       width: 600px;
                       height: 600px;
                       background-color: red;
                       margin-top: 100px;
                       /* border: 1px solid black; */
                       /* padding-top: 100px; */
                       overflow: hidden; /* 超出部分隐藏,能解决外边距塌陷问题 */
                   }
                   .sbox{
                       width: 300px;
                       height: 300px;
                       background-color: green;
                       margin-top: 100px;
                   }
                   </style>
   </head>
   <body>
       <div class="box1"></div>
               <div class="box2"></div>
               <div class="bigbox">
                   <div class="sbox"></div>
               </div>
   </body>
</html>