首页 > 代码库 > HTML 盒子模式的相关问题

HTML 盒子模式的相关问题

2024-09-11 23:41:03   220人阅读

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>document</title>
        <style type="text/css">

        .header,.main,.footer{
          
          width:500px;
        }
        .header,.footer{
            height:100px;      //盒子模型 要是不给height 高度 ；将不显示；只有设置高度才有图像出来 
            background:#000;
        }
        .main{
            height: 300px;     //内嵌的盒子 也不继承 height ,也需要独立设置高度
            background-color: #eee;
             margin:10px 0;    
        }
        .main .content{
               width:300px;
               height:300px;   
               background:orange;
               float:left;
        }
      .main  .sidebar{
           width:190px;
           height:300px;
           background:green;
       float:right;
       }
        </style>
    </head>
    <body>
    <div class="header"></div>
    <div class="main">
        <div class="content"></div>
        <div class="sidebar"></div>
    </div>
    <div class="footer"></div>
    </body>
</html>

 

HTML 盒子模式的相关问题


联系
我们