HTML 盒子模式的相关问题

最新推荐文章于 2022-08-22 14:48:50 发布

weixin_30856965

最新推荐文章于 2022-08-22 14:48:50 发布

阅读量85

点赞数

原文链接：http://www.cnblogs.com/yimian/p/6658230.html

版权

height:100px   是往下生长 ；    -100px是往上生长的

font:12px/1.5   12px大小   1.5倍行高

width 需要设置宽度   这样才能居中显示  

<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 ,也需要独立设置高度  。 如果不给main  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>

行元素没浮动之前，独占一行

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
     .header,.main,.footer{
        width: 500px;

     }
     .header,.footer{
         height: 100px;
         background:pink;
     }
     .main{
         height: 300px;
         background-color: blue;
     }
     .content{
         width:300px;
         height:300px;
         background:yellow;
         float:left;
     }
     .left , .right{
         width:100px;
         height: 300px;
     }
     .left{ 
         background-color: orange;
         float:left;                   //行元素没浮动之前 ，独占一行
     }
     .right{
         background-color: green;
         float:right;
     }
     .content-top,.content-bot{
         height:150px;

     }
     .content-top{
         background:#660000;
     }
     .content-bot{
         background-color: #006688;
     }


        </style>
    </head>
    <body>
      <div class="header"></div>
      <div class="main">
      <div class="left"></div>
      <div class="content">
          <div class="content-top    "></div>
          <div class="content-bot "></div> 

      </div>
      <div class="right"></div>
      </div>
      <div class="footer"></div>

    </body>
</html>

消除浮动

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

        .header,.main,.footer{
          
          width:500px;
        }
        .header,.footer{
            height:100px;
            background:#000;
        }
        .main{
            /* height: 300px; */       //没有main作为占位大小   需要使用消除浮动办法不认底部顶上去
            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 style="clear:both;"></div>              //消除浮动办法： 原理是  div  clear:both  这个小的div  2px大小占位
    </div>
    <div class="footer"></div>
    </body>
</html>

第二种：消除浮动

★给父集元素使用overflow:hidden; bfc

如果有内容出了盒子，不能使用这个方法。

★伪元素清除浮动推荐使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .header,.main,.footer{
            width:500px;

        }
        .header,.footer{
            height: 100px;
            background: #000;
        }

        .content{
            width: 300px;
            height: 300px;
            background: orange;
            float: left;
            margin-top:-100px;

        }
        .sidebar{
            width: 190px;
            height: 300px;
            background: green;
            float: right;
        }
        .main{
            background: #eee;
            margin: 10px 0;
            /*overflow: hidden;*/
        }
        .clearfix:after{
            content: ".";
            display: block;
            height: 0;
            line-height: 0;
            visibility: hidden;
            clear:both;
        }
        /*兼容ie浏览器*/
        .clearfix{
            zoom:1;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="main >
        <div class="content"></div>
        <div class="sidebar"></div>

        <!-- 额外标签法 -->
        <!-- <div style="clear:both;"></div> -->
    
    </div>
    <div class="footer"></div>
</body>
</html>

转载于:https://www.cnblogs.com/yimian/p/6658230.html

weixin_30856965

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 盒子模式的相关问题

height:100px 是往下生长； -100px是往上生长的font:12px/1.5 12px大小 1.5倍行高width 需要设置宽度这样才能居中显示 <html lang="en"> <head> <meta charset="utf-8"> <title>doc...
复制链接

扫一扫