css左右布局+上下布局

作者: 牙牙and小尾巴 | 来源:发表于2019-06-26 09:51 被阅读0次

css左右布局+上下布局
前端面试知识点
html编程技巧
css布局和居中
css布局
CSS的布局与居中
CSS布局技巧
浅析 CSS 布局与定位
CSS基本布局整理
2019-04-04

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <style>
    
    /*方式一 float+margin
    .all{
      height:500px
    }
    .left{
      float:left;
      width:200px;
      background-color:red;
      height:100%;
    }
    .right{
       width:100%;
       height:100%;
       margin-left:200px;
       background-color:yellow;
    }
    */
    /*方式二 float+overflow:hidden
    .all{
      height:500px
    }
    .left{
      float:left;
      width:200px;
      background-color:red;
      height:100%;
    }
    .right{
       overflow:hidden;
       height:100%;
       background-color:yellow;
    }
    */
    /*方式三  flex */
    .all{
      height:500px;
      display:flex;
    }
    .left{
      width:200px;
      background-color:red;
      height:100%;
    }
    .right{
       flex:1;
       height:100%;
       background-color:yellow;
       display: flex; //为了后面的上下布局
       flex-direction: column; //为了后面的上下布局
    }
    .top{
      height: 100px;
      background-color: blue;
    }
    .bottom{
      flex: 1;
      background-color: black;
    }
    
    /*方式四  绝对定位absolute 
    .all{
      height:500px;
      position: relative;
    }
    .left{
      width:200px;
      background-color:red;
      height:100%;
    }
    .right{
      position:absolute;
      left: 200px;
      top: 0px;
      bottom: 0px;
      right: 0px;
      background-color: yellow;
    }
    .top{
      height: 100px;
      background-color: blue;
    }
    .bottom{
      position: absolute;
      background-color: black;
      top: 100px;
      bottom: 0px;
      left: 0px;
      right: 0px;
    }*/
    </style>
    
</head>

<body>
    <div  class="all">
      <div class="left"></div>
      <div class="right">
       <div class="top">
       </div>
       <div class="bottom">
       </div>
      </div>
    </div>
     
</body>
<script>

</script>

</html>