成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

王巖威 / 2512人閱讀

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

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

兩欄布局

1、浮動

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

  

  
兩列自適應(yīng)

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 的數(shù)值等于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;
  }

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50916.html

相關(guān)文章

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

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

    winterdawn 評論0 收藏0

  • css常見布局

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

    douzifly 評論0 收藏0

  • 圣杯布局和雙飛翼布局

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

    yankeys 評論0 收藏0

  • 圣杯布局和雙飛翼布局

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

    ZweiZhao 評論0 收藏0

  • 前端整理——css部分

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

    chaosx110 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<