[面試重點-CSS] CSS經常使用佈局

時間 2019-11-06

原文原文鏈接

頂部、底部定高，中間自適應

<div class="body">
    <div class="header"></div>
    <div class="section">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="footer"></div>
  </div>
複製代碼

1.position定位

整個父元素相對定位，導航高固定，內容區域絕對定位，經過定位屬性實現高度自適應。html

html,body{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .body{
    position: relative;
    height: 100%;
  }
  .header{
    height: 80px;
    background-color: #ccc;
  }
  .section{
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 80px;
    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佔據除規定元素外的全部位置bash

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經過絕對定位自適應高度和寬度佈局

.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: #fff;
    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使用浮動，浮動元素半脫離文檔流，與近鄰元素位置重疊但不會與鄰近元素內部文檔重疊flex

.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: #fff;
  float: left;
  width: 100px;
  height: 100%;
}
.right{
  background-color: #F5F7F9;
  height: 100%;
  margin-left: 100px;
}
複製代碼

3. BFC 佈局

左浮動，右產生BFC，利用BFC與float元素重疊的特徵ui

4. flex佈局

flex-direction: column佈局自上而下，flex:1讓section佈滿除header外的全部區域。section設置flex，默認從左往右排列，flex:1讓right佈滿除left外的全部區域spa

.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;
}
複製代碼

聖盃佈局：頂部、底部定高，左右兩側定寬，中間自適應

<div class="body">
    <div class="header"></div>
    <div class="section">
      <div class="left"></div>
      <div class="center">111</div>
      <div class="right"></div>
    </div>
</div>
複製代碼

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元素後3d

.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;
}

複製代碼