CSS:常用布局

逃离我推掉我的手 2021-11-14 15:20 341阅读 0赞

## 顶部、底部定高，中间自适应 ##

### 1.position定位 ###

整个父元素相对定位，导航高固定，内容区域绝对定位，通过定位属性实现高度自适应。

html,body{
        
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
      .header{
        
        height: 80px;
        background-color: #ccc;
      }
      .section{
        
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 80px;
        overflow:auto;
        background-color: #f8f8f9;
      }
     
      .footer{
        
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        background-color: #ccc;
      }

### 2. flex 弹性布局 ###

利用 flex flex-direction：column属性，使元素自上往下排列，flex:1占据除规定元素外的所有位置

html,body{
        
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
      
      .body{
        
        height: 100%;
        background-color: #808695;
        display: flex;
        /*设置排列顺序*/
        flex-direction: column; 
      }
      .header{
        
        height: 80px;
        background-color: #ccc;
      }
      .section{
        
        flex: 1;
        background-color: #f8f8f9;
      }
      .footer{
        
        height: 80px;
        background-color: #dcdee2;
      }

## 顶部定高、左侧导航定宽、右侧内容自适应 ##

### 1. 定位 ###

父元素相对定位，左侧left绝对定位确定自适应高度并左对齐。右侧right通过绝对定位自适应高度和宽度

html,body{
        
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
      
      .body{
        
        height: 100%;
        position: relative;
        background-color: #F5F7F9;
      }
      .header{
        
        height: 80px;
        background-color: #515A6E;
      }
      .section{
        
        background-color: #F5F7F9;
        position: absolute;
        left: 0;
        top: 80px;
        bottom: 0;
        right: 0;
      }
      .left{
        
        background-color: #888888;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100px;
      }
      .right{
        
        background-color: #F5F7F9;
        position: absolute;
        top: 0;
        left: 100px;
        bottom: 0;
        right: 0;
      }

### 2. float + margin ###

左侧left使用浮动，浮动元素半脱离文档流，与近邻元素位置重叠但不会与邻近元素内部文档重叠

html,body{
        
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
      
      .body{
        
        height: 100%;
        position: relative;
      }
      .header{
        
        height: 80px;
        background-color: #515A6E;
      }
      .section{
        
        background-color: #afc7de;
        position: absolute;
        left: 0;
        top: 80px;
        bottom: 0;
        right: 0;
      }
      .left{
        
        background-color: #888888;
        float: left;
        width: 100px;
        height: 100%;
      }
      .right{
        
        background-color: #F5F7F9;
        height: 100%;
        margin-left: 100px;
      }

### 3. BFC 布局 ###

左浮动，右产生BFC，利用BFC与float元素重叠的特征

### 4. flex布局 ###

flex-direction: column布局自上而下，flex:1让section布满除header外的所有区域。section设置flex，默认从左往右排列，flex:1让right布满除left外的所有区域

.body{
        
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .header{
        
      height: 80px;
      background-color: #515A6E;
    }
    .section{
        
      background-color: #afc7de;
      flex: 1;
      display: flex;
    }
    .left{
        
      background-color: #fff;
      width: 100px;
    }
    .right{
        
      flex: 1;
      background-color: #F5F7F9;
    }

## 圣杯布局：顶部、底部定高，左右两侧定宽，中间自适应 ##

### 1. flex布局 ###

.header{
        
        height: 80px;
        background-color: #515A6E;
      }
      .section{
        
        background-color: #afc7de;
        flex: 1;
        display: flex;
      }
      .left{
        
        background-color: #fff;
        width: 100px;
      }
      .center{
        
        flex: 1;
        background-color: #F5F7F9;
      }
      .right{
        
        width: 100px;
        background-color: #fff;
      }

### 2. 定位 ###

.body{
        
      height: 100%;
      position: relative;
    }
    .header{
        
      height: 80px;
      background-color: #515A6E;
    }
    .section{
        
      position: absolute;
      width: 100%;
      left: 0;
      top: 80px;
      bottom: 0;
      right: 0;
      background-color: #afc7de;
    }
    .left{
        
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background-color: #fff;
      width: 100px;
    }
    .center{
        
      height: 100%;
      margin-left: 100px;
      margin-right: 100px;
      background-color: #F5F7F9;
    }
    .right{
        
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100px;
      background-color: #fff;
    }

### 3. float + margin ###

section 在left和right元素后

.body{
        
      height: 100%;
      position: relative;
    }
    .header{
        
      height: 80px;
      background-color: #515A6E;
    }
    .section{
        
      position: absolute;
      width: 100%;
      left: 0;
      top: 80px;
      bottom: 0;
      right: 0;
      background-color: #afc7de;
    }
    .left{
        
      float: left;
      background-color: #fff;
      width: 100px;
      height: 100%;
    }
    .center{
        
      height: 100%;
      margin-right: 100px;
      margin-left: 100px;
      background-color: #F5F7F9;
    }
    .right{
        
      float: right;
      height: 100%;
      width: 100px;
      background-color: #fff;
    }

转载于:https://www.cnblogs.com/Nyan-Workflow-FC/p/11220400.html