固话费软件和

最新推荐文章于 2025-10-01 20:58:28 发布

原创最新推荐文章于 2025-10-01 20:58:28 发布 · 309 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>盒子模型</title>
       <style>
           /* 初始化所有标签的内外边距,一般书写在样式的第一行 */
           *{ /* *通配符,指选择当前html页面中所有的标签 */
               margin: 0;
               padding: 0;
           }
           div{
               width: 300px;
               height: 300px;
               font-size: 32px;
               font-weight: 800;
           }
           .box1{
               width: 300px;
               height: 450px;
               border: 1px solid hotpink;
               /* margin: 50px;
               margin-bottom: 70px;
               margin-right: 80px;
               margin-left: 60px; */
               margin: auto; /* auto自动的 */
               /* 给盒子设置水平居中:1.盒子有大小,2.给盒子的左右外边距设置为auto */
           }
           .box2{
               border: 1px solid hotpink;
               margin-bottom: 50px;
           }
           .box3{
               border: 1px solid red;
               margin-top: 90px;
           }
           /* 1.相邻盒子垂直外边距合并:相邻的盒子都给外边距的情况下,最终只取最大的外边距的值.
           解决：一般只给其中一个盒子设置外边距。
               2.嵌套盒子垂直方向外边距塌陷：嵌套盒子都给外边距的情况下，最终会塌陷为一个外边距的值（最大值）
               解决方法1：给父盒子设置边框;
               解决方法2:给父盒子设置内边距，但是会导致父盒子被撑大;
               解决方法3:给父盒子添加代码 overflow:hidden; 必须掌握的解决方法！
           */
           .bigbox{
               width: 300px;
               height: 500px;
               /* border: 1px solid deepskyblue; */
               margin-top: 20px;
               background-color: bisque;
           }
           .bigbox .sbox{
               width: 200px;
               height: 150px;
               /* border: 1px solid cornflowerblue; */
               margin-top: 150px;
               background-color: lightcoral;
           }
       </style>
       </head>
   <body>
       <div class="box1"></div>
       <p>这是单独的段落</p>
       
       <div class="bigbox"></div>
       <div class="sbox"></div>
   </body>
</html>