css兩欄布局、圣杯布局、雙飛翼布局

winterdawn 發布于2019-08-29 12:50 / 3195人閱讀

摘要：兩欄布局浮動兩列自適應定位圣杯布局和雙飛翼布局目的是我們希望先加載的是中間的部分，然后再開始加載和兩個相對來說不是很重要的東西。

最近幾個月一直用vue在寫手機端的項目，主要寫業務邏輯，在js方面投入的時間和精力也比較多。這兩天寫頁面明顯感覺css布局方面的知識有不足，所以復習一下布局方法。

兩欄布局

1、浮動

 .box1 .left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .box1 .right {
    margin-left: 100px;
    height: 100px;
    background-color: green;
  }


  
  兩列自適應

2、定位

.box1{
    position: relative;
    width: 100%;
    height: 100px;
  }
  .box1 .left{
    position: absolute;
    width: 100px;
    height: 100%;
    background-color: red;
  }
  
  .box1 .right{
    margin-left: 100px;
    width: 100%;
    height: 100%;
    background-color: green;
  }

3、flex

  .box1{
    display: flex;
    height: 100px;
  }
  .box1 .left{
    width: 100px;
    height: 100%;
    background-color: red;
  }
  
  .box1 .right{
    flex:1;
    height: 100%;
    background-color: green;
  }

圣杯布局和雙飛翼布局目的是我們希望先加載的是中間的部分，然后再開始加載 left 和 right 兩個相對來說不是很重要的東西。

圣杯布局

圣杯布局給最外面加padding, 讓 padding-left 和 padding-right 的數值等于left 和 right 的寬度，然后利用相對定位把他們再移動在兩旁。

.box{
    padding:  0 100px;/* 留出左右的距離*/
    height: 100px;
  }
  .box .middle {
    float: left;
    width: 100%;
    height: 100%;
    background-color: yellow;
  }
  .box .left {
    float: left;
    width: 100px;
    margin-left: -100%;
    background-color: red;
    position: relative;
    left: -100px;/*往左拉*/
    height: 100%;
  }
  .box .right {
    float: left;
    width: 100px;
    margin-left: -100px;
    background-color: green;
    position: relative;
    right: -100px;
    height:100%;
  }


  
  middle
  left
  right

雙飛翼布局

.box {
    position: relative;
    height: 100px;
  }
  .middle-wrap {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
  }
  .middle-wrap .middle {
    height: 100%;
    margin: 0 100px; /*留出距離*/
    background-color: yellow;
  }
  .left {
    float: left;
    width: 100px;
    margin-left: -100%;
    height: 100%;
    background-color: red;
  }
  .right {
    float: left;
    width: 100px;
    height: 100%;
    margin-left: -100px;
    background-color: green;
  }

云服務器 GPU云服務器圣杯布局雙飛翼布局 css布局 css布局教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112182.html

css兩欄布局、圣杯布局、雙飛翼布局

摘要：兩欄布局浮動兩列自適應定位圣杯布局和雙飛翼布局目的是我們希望先加載的是中間的部分，然后再開始加載和兩個相對來說不是很重要的東西。最近幾個月一直用vue在寫手機端的項目，主要寫業務邏輯，在js方面投入的時間和精力也比較多。這兩天寫頁面明顯感覺css布局方面的知識有不足，所以復習一下布局方法。兩欄布局 1、浮動 .box1 .left { float: left; w...

王巖威 2019-08-01 17:03 評論0 收藏0
css常見布局

摘要：圣杯布局對于三欄布局來說，左右兩欄一般放置目錄等簡要信息，中間一欄是主要信息。無論是三欄布局還是兩欄布局，以上方法都適用。純浮動布局左右兩欄分別向左右浮動，中間設置值，寬度自適應。圣杯布局對于三欄布局來說，左右兩欄一般放置目錄等簡要信息，中間一欄是主要信息。頁面加載時，用戶最希望第一時間看到的是中間一欄內容，所以根據文檔流加載順序（從上到下），中間一欄必須放在左右兩欄的前面。而實際...

douzifly 2019-08-30 13:18 評論0 收藏0
圣杯布局和雙飛翼布局

摘要：解決的問題圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。解決的問題圣杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。圣杯布局圣杯布局dom結構：圣杯布局 ...

yankeys 2019-08-29 13:54 評論0 收藏0
圣杯布局和雙飛翼布局

摘要：參考文章同學的關于圣杯布局，圣杯布局和雙飛翼布局的區別經典布局圣杯布局實現的效果主要在中，和固定寬度，首先渲染，且自適應寬度。 ps: 參考文章 DotHide同學的關于圣杯布局，圣杯布局和雙飛翼布局的區別經典布局圣杯布局 showImg(https://segmentfault.com/img/remote/1460000015851268?w=682&h=247); #hea...

ZweiZhao 2019-08-29 16:13 評論0 收藏0
前端整理——css部分

摘要：圣杯布局和雙飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部浮動，但左右兩欄加上負讓其跟中間欄并排，以形成三欄布局。雙飛翼布局，為了中間內容不被遮擋，直接在中間內部創建子用于放置內容，在該子里用和為左右兩欄留出位置。（1）盒模型（普通盒模型、怪異盒模型） 1、元素的content（內容）、padding(內邊距)、border（邊框）、margin（外邊距）構成了CSS盒模型 2、IE...

chaosx110 2019-04-23 11:56 評論0 收藏0