盒子外边距

HYYY77

于 2024-06-05 11:18:47 发布

阅读量762

点赞数 8

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/HYYY77/article/details/139467368

版权

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