css頁面布局

luqiuwen 發(fā)布于2019-08-29 17:27 / 2747人閱讀

摘要：回顧復習頁面布局三欄布局左右固定中間自適應部分同一如下中間自適應方法一原理利用第一和第二個盒子的左右浮動，使得與第三個盒子在一行缺點當寬度小于時，會繁發(fā)生換行以及中間高度大于時，會有兩邊覆蓋其實中間的寬度就是可以利用解決方法二原理利用絕對定

回顧復習css頁面布局 三欄布局

左右固定中間自適應：
html部分同一如下

  
  
  
    中間自適應

style方法一：

    div {
      height: 300px;
    }
    .box1 {
      float: left;
      width: 300px;
      background: red;
    }
    .box2 {
      float: right;
      width: 300px;
      background: blue;
    }
    .box3 {
      background: yellow;
    }

原理：利用第一和第二個盒子的左右浮動，使得與第三個盒子在一行
缺點：當寬度小于600px時，會繁發(fā)生換行；以及中間高度大于300px時，會有兩邊覆蓋（其實中間的div寬度就是width：100%;可以利用overflow: hidden解決）
style方法二：

    div {
      height: 300px;
    }
    .box1 {

      width: 300px;
      background: red;
      position: absolute;
      left: 0;
    }
    .box2 {
      position: absolute;
      right: 0;
      width: 300px;
      background: blue;
    }
    .box3 {
      background: yellow;
      height: 500px;
      position: absolute;
      left: 300px;
      right: 300px;
    }

原理：利用絕對定位，來實現(xiàn)left=300px; right=300px
優(yōu)點：當中間自適應的高度大于兩邊時不會發(fā)生重疊；但是當視窗大小小于600px時，中間會發(fā)生重疊，不換行
style方法三：

原理：外部flex布局；中間利用flex: 1;即flex-basis： 0寬度中間取其容器最大
優(yōu)點：自適應強，寬度小于600時，會縮小兩邊寬度；
缺點：低版本瀏覽器對flex兼容性不好；
style方法四：

    .wrap {
      display: table;
      width: 100%;
    }
    .box {
      height: 300px;
      display: table-cell;
    }
    .box1 {
      width: 300px;
      background: red;
    }
    .box2 {

      width: 300px;
      background: blue;
    }
    .box3 {
      background: yellow;
      height: 300px;
    }

原理：利用table布局，來達到自使用，外部divwidth：100%，不然無法填充
優(yōu)點：自適應強
缺點：中間高度改變會影響兩邊
style方法五：

    .wrap {
      display: grid;
      width: 100%;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
      
    }
    .box1 {
      background: red;
    }
    .box2 {
      background: yellow;
    }
    .box3 {
      background: blue;
    }

原理：利用網(wǎng)格布局
優(yōu)點：編寫簡單，自適應較強

兩欄布局：

同理上面的·方法：
方法一網(wǎng)格布局：

    .wrap {
      display: grid;
      grid-template-rows: 100px;
      grid-template-columns: 100px auto
      
    }
    .box1 {
      background: red;
    }
    .box2 {
      background: yellow;
    }
    .box3 {
      background: blue;
      /* height: 500px; */
    }

方法二table布局

    .wrap {
      display: table;
      width: 100%;
    }
    .box {
      display: table-cell
    }
    .box1 {
      width: 100px;
      background: red;
    }

    .box2 {
      background: blue;
    }

方法三flex布局

    .wrap {
      display: flex;
    }

    .box1 {
      width: 100px;
      background: red;
    }

    .box2 {
      background: blue;
      flex: 1;
    }

方法四絕對定位

    .box1 {
      width: 300px;
      position: absolute;
      left: 0;
      background: red;
      height: 100px;
    }

    .box2 {
      background: blue;
      position: absolute;
      left: 300px;
      right: 0;
    }

方法五浮動布局：

    .box1 {
      width: 300px;
      float: left;
      background: red;
      height: 100px;
    }

    .box2 {
      background: blue;
      /* overflow: hidden; */
    }

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

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

H5多列布局

摘要：多列布局基本概念多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。在網(wǎng)頁制作時采用層疊樣式表技術，可以有效地對頁面的布局字體顏色背景和其它效果實現(xiàn)更加精確的控制。多列布局基本概念 1、多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數(shù)量 /*列數(shù)*/ -webkit-column-count: 3; /*分割線*/ -webkit...

Jingbin_ 2019-08-29 16:15 評論0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。在網(wǎng)頁制作時采用層疊樣式表技術，可以有效地對頁面的布局字體顏色背景和其它效果實現(xiàn)更加精確的控制。多列布局基本概念 1、多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數(shù)量 /*列數(shù)*/ -webkit-column-count: 3; /*分割線*/ -webkit...

mayaohua 2019-08-02 11:08 評論0 收藏0
CSS及布局

摘要：經(jīng)過半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發(fā)做好準備。這兩種方式實現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁窗口大小改變時的列數(shù)自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看...

jaysun 2019-08-29 14:04 評論0 收藏0
移動端布局與適配

摘要：實戰(zhàn)之微信錢包騰訊服務界面網(wǎng)格布局是讓開發(fā)人員設計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包騰訊服務界面 CSS3網(wǎng)格布局是讓開發(fā)人員設計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格，實際上是你將一個元素聲明為一個網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
CSS 常用布局在小程序中的應用

摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進行的。具體實現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動布局來實現(xiàn)。 CSS 常用布局在小程序中的應用所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。正常文...

garfileo 2019-08-30 11:25 評論0 收藏0
CSS 常用布局在小程序中的應用

摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進行的。具體實現(xiàn)，可以使用微信小程序的單位，以及使用定位浮動布局來實現(xiàn)。 CSS 常用布局在小程序中的應用所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱我們其他的布局實現(xiàn)方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。正常文...

CoderDock 2019-08-30 15:44 評論0 收藏0