笔记1234

最新推荐文章于 2024-10-16 00:01:00 发布

cyd2814847842

最新推荐文章于 2024-10-16 00:01:00 发布

阅读量347

点赞数 3

文章标签：笔记 css css3

本文链接：https://blog.csdn.net/cyd2814847842/article/details/138662095

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>盒子模型</title>
       <style>
           *{ /* 通配符:指所有标签 */
               margin: 0;
               padding: 0;
           }/* 初始化所有标签的外边距和内边距,写在样式中最开始的位置 */
           .box1{/* solid实线,dotted点线,dashed虚线 */
               border:5px dotted rgb(241,23,189);/* 边框:大小px 实线颜色 */padding:10px ;/* nei边距 */
               /* top上,bottom下,left左,right右,margin外边距 */
               width: 200px;
               height: 200px;
           }
           .box2{
               border:3px rgb(167,89,246) solid;
               border-top:5px solid #aaaaff;padding:10px ;
               border-bottom:5px #ff5500 dashed;
               width: 200px;
               height:200px;
               font-size:30px;
               /* pandding-top:25px;
               pandding-left:25px; */
               /* 复合写法顺序为四个值：上右下左；三个值：上（左右）下；俩个值：（上下）（左右）*/
               padding: 10px 30px;
           }
           .box3{
               width: 500px;
               height: 500px;
               background-color: #aaaaff;
               margin: 10px auto 0;/* 水平居中，设置块级盒子,给盒子左右外边距设置为auto */
               margin-bottom: 80px;
           }
           .box4{
               width: 300px;
               height: 300px;
               background-color: #ff5500;
               margin-top: 120px;
           }
           .wbox{
               width: 700px;
               height: 700px;
               background-color: #ff5500;
               margin-top: 100px;
               /*3. overflow: hidden; */
               /*2. padding-bottom: 100px; */
               /* 1.border: 1px solid red; */
           }
           .nbox{

               width: 500px;
               height: 500px;
               background-color: aquamarine;
               margin: 100px 100px;
           }
           /* 1.相邻俩个块级盒子外边距效果取最大的盒子元素，所以一般只给一个盒子设置外边距
               2.嵌套的块级盒子外边距的塌陷
               解决方法：1.给父盒子加边框
                       2.给大盒子加内边距(可能导致其盒子被撑大)
                       3.为父盒子加overflow:hidden*/
       </style>
   </head>
   <body>
       <div class="box1">hello world</div>
       <div class="box2">hello box</div>
       <div class="box3"></div>
       <div class="box4"></div>
       <div class="wbox">
           <div class="nbox"></div>
       </div>
       <a name="mao"></a>
       <br />
       <a href="8.HTML的表单.html" style="text-decoration:none">上一节</a>
       <a href="3.HTML的引用.html" style="text-decoration:none"> 下一节</a>
   </body>
</html>