<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          理解css中Grid布局,在項目中如何實現grid頁面布局

          時間:?2017-11-28閱讀:?1656標簽:?布局

          簡介

          CSS中Grid是一種二維網格式布局方式。我們常規使用table、float、position、inline-block等布局,但它們遺漏了很多功能,例如垂直居中。后來css3中flexbox的出現解決了很多布局問題,但是它也是一維布局,而不是復雜的二維布局,Grid是為了解決二維布局問題而創建的CSS模塊。


          使用Gird的好處

          1.布局清晰明了,擺脫了模板中使用不同標簽下基于浮動,定位的手動計算過程。

          2.類似于talbe布局,不同點在于Gird在css中實現,而table在html中實現;同時gird可以根據媒體查詢定義不同的上下文,有利于網頁響應式設計。

          3.擺脫傳統布局中文檔流的限制,這也意味著可以自由地更改頁面元素在html中的位置。


          Gird在瀏覽器的兼容性


          從圖上可以看出,支持Gird布局的瀏覽器并不多,IE10以上才支持部分屬性,如果想體驗Grid布局的強大,推薦使用開通過“體驗新功能”的Chrome, Opera 或 Firefox, Chrome:打開瀏覽器,輸入chrome://flags,找到”experimental web platform features”,啟用并重啟瀏覽器;Opera:輸入opera://flags,與Chrome一樣;Firefox:輸入layout.css.grid.enabled。

          由于Gird兼容性和靈活性不是很高,這就造成了網站上的使用率并不高的原因,當然如果非要使用它又需要向后支持,我們可以利用@supports方法來漸進式增強。


          Grid布局的示例源碼

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
          <style>
              * {margin: 0;padding: 0;}
              html,body {width: 100%;height: 100%;}
              .container {
                  display: grid;
                  grid-template-columns: 33.333333% 33.333333% 33.333333%;
                    grid-template-rows: auto;
              }
              .item {
                  background-color: #444;
                  color: #fff;
                  font-size: 150%;
                  padding: 20px;
                  margin: 3.333333%;
              }
              .item-5 {
                  grid-column-start: 2;
                  grid-column-end: 4;
                  grid-row-start: 2;
                  grid-row-end: 4;
              }
              .item-7 {
                  grid-column-start: 1;
                  grid-column-end: 3;
                  grid-row-start: 4;
                  grid-row-end: 4;
              }
              .item-12 {
                  grid-column-start: 1;
                  grid-column-end: 4;
                  grid-row-start: 6;
                  grid-row-end: 6;
              }
          </style>
          </head>
          <body>
          
          <div class="container">
              <div class="item item-1">1</div>
              <div class="item item-2">2</div>
              <div class="item item-3">3</div>
              <div class="item item-4">4</div>
              <div class="item item-5">5</div>
              <div class="item item-6">6</div>
              <div class="item item-7">7</div>
              <div class="item item-8">8</div>
              <div class="item item-9">9</div>
              <div class="item item-10">10</div>
              <div class="item item-11">11</div>
              <div class="item item-12">12</div>
          </div>
          </body> 
          </html>

          效果如下:


          源碼說明:

          一、設置在網格容器上的屬性

          1. display: grid | inline-grid | subgrid;

          屬性值:

          grid: 生成塊級網格
          inline-grid: 生成行內網格
          subgrid: 如果網格容器本身是網格項(嵌套網格容器),此屬性用來繼承其父網格容器的列、行大小。
          注:當元素設置了網格布局,column、float、clear、vertical-align屬性無效。

          2. grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
          grid-template-rows: <track-size> ... | <line-name> <track-size> ... ;

          設置行和列的大小,在行軌道或列軌道兩邊是網格線。

          屬性值:

          track-size: 軌道大小,可以使用css長度,百分比或用分數(用fr單位)。
          line-name: 網格線名字,你可以選擇任何名字。


          3.grid-template-areas 

           通過獲取網格項中的grid-area屬性值(名稱),來定義網格模版。重復網格區(grid-area)名稱將跨越網格單元格,‘.’代表空網格單元。 

           屬性值: 

          grid-area-name: 網格項的grid-area屬性值(名字)
           ‘.’ : 空網格單元 
          none: 不定義網格區域  


          4. grid-column-gap:<line-size>; 和 grid-row-gap: <line-size> ;

          網格單元間距。

          屬性值:

          line-size: 網格線間距,設置單位值。

          注:間隔僅僅作用在網格單元之間,不作用在容器邊緣。


          5. grid-gap:<grid-column-gap> <grid-row-gap>; 

           是grid-column-gap 和 grid-row-gap簡寫,

          注:如果只設置一個值,那么grid-column-gap 和 grid-row-gap都為那個值。


          6. justify-items: start | end | center | stretch(默認) ;

          垂直于列網格線對齊,適用于網格容器里的所有網格項。

          屬性值

          start: 左對齊。
          end: 右對齊。
          center: 居中對齊。
          stretch: 填滿(默認)。


          7. align-items: start | end | center | stretch ;

           垂直于行網格線對齊,適用于網格容器里的所有網格項。

           屬性值: 

          start: 頂部對齊。 
          end: 底部對齊。
          center: 居中對齊。
          stretch:填滿(默認)。


          8. justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;

          如果用像px非彈性單位定義的話,總網格區域大小有可能小于網格容器,這時候你可以設置網格的對齊方式(垂直于列網格線對齊)。

          屬性值:

          start: 左對齊。
          end: 右對齊。
          center: 居中對齊。
          stretch: 填滿網格容器。
          space-around: 網格項兩邊間距相等,網格項之間間隔是單側的2倍。
          space-between: 兩邊對齊,網格項之間間隔相等。
          space-evenly: 網格項間隔相等。


          9. align-content: start | end | center | stretch | space-around | space-between | space-evenly ;

          如果用像px非彈性單位定義的話,總網格區域大小有可能小于網格容器,這時候你可以設置網格的對齊方式(垂直于行網格線對齊)。

          屬性值:

          start: 頂部對齊。
          end: 底部對齊。
          center: 居中對齊。
          stretch: 填滿網格容器。
          space-around: 網格項兩邊間距相等,網格項之間間隔是單側的2倍。
          space-between: 兩邊對齊,網格項之間間隔相等。
          space-evenly: 網格項間隔相等。


          10. grid-auto-columns: <track-size> ... ; 和 grid-auto-rows: <track-size> ... ;

          自動生成隱式網格軌道(列和行),當你定位網格項超出網格容器范圍時,將自動創建隱式網格軌道。

          屬性值:

          track-size: 網格軌道大小,可以是固定值,百分比或者是分數(fr單位)。



          11. grid-auto-flow : row(默認) | column | dense ;

          在沒有設置網格項的位置時,這個屬性控制網格項怎樣排列。

          屬性值:

          row: 按照行依次從左到右排列。
          column: 按照列依次從上倒下排列。
          dense: 按先后順序排列。


          12. grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];

          是一種簡寫形式,設置網格容器所有屬性。

          屬性值:

          none: 設置為所有屬性的默認值。
          <grid-template-rows> / <grid-template-columns>: 設置行和列的值,其他屬性為默認值。
          <grid-auto-flow> [ <grid-auto-rows> [ / <grid-auto-columns>] ] : 設置網格自動流、網格自動行、網格自動列的值,其他未設置則為默認值。


          二、設置在網格項上的屬性

          1. grid-column-start: <number> | <name> | span <number> | span <name> | auto ;
              grid-column-end: <number> | <name> | span <number> | span <name> | auto ;
              grid-row-start: <number> | <name> | span <number> | span <name> | auto ;
              grid-row-end: <number> | <name> | span <number> | span <name> | auto ;

          通過網格線來定義網格項的位置。grid-column-start、grid-row-start定義網格項的開始位置,grid-column-end、grid-row-end定義網格項的結束位置。

          屬性值:

          line: 指定帶編號或者名字的網格線。
          span <number>: 跨越軌道的數量。
          span <name>: 跨越軌道直到對應名字的網格線。
          auto: 自動展示位置,默認跨度為1。

          注:如果未聲明grid-column-end或grid-row-end,默認將跨越一個軌道。項目也可以重疊,設置z-index來確定堆疊順序。


          2. grid-column: <start-line> / <end-line> | <start-line> / span <value> ;
             grid-row: <start-line> / <end-line> | <start-line> / span <value> ;
          是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的簡寫。


          3. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;

          定義網格項名字,以便創建模塊(容器屬性grid-template-areas來定義模塊)。

          屬性值:

          name: 項目名子。
          <row-start> / <column-start> / <row-end> / <column-end>: 可以是數字或網格線名字。



          4. justify-self: justify-self: start | end | center | stretch;
          定義單個網格項垂直于列網格線的對齊方式。
          屬性值:

          start: 網格區域左對齊。
          end: 網格區域右對齊。
          center: 網格區域居中。
          stretch: 網格區域填滿。

          提示:也可以在容器上設置justify-items,達到全部網格項對齊。


          5. align-self: start | end | center | stretch;

          定義單個網格項垂直于行網格線的對齊方式。

          屬性值:

          start: 網格區域頂部對齊。
          end: 網格區域底部對齊。
          center: 網格區域居中。
          stretch: 網格區域填滿。



          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/181

          CSS五種方式實現 Footer 置底

          頁腳置底(Sticky footer)就是讓網頁的footer部分始終在瀏覽器窗口的底部。當網頁內容足夠長以至超出瀏覽器可視高度時,頁腳會隨著內容被推到網頁底部;但如果網頁內容不夠長,置底的頁腳就會保持在瀏覽器窗口底部。

          響應式布局和自適應布局詳解

          自適應布局給了你更多設計的空間,因為你只用考慮幾種不同的狀態。而在響應式布局中你卻得考慮上百種不同的狀態。雖然絕大部分狀態差異較小,但仍然也算做差異。它使得把握設計最終效果變得更難,同樣讓響應式布局更加的難以測試和預測

          前端響應式布局

          Responsive design,意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。

          彈性(Flex)布局的使用

          最近我參與實施的兩個項目中,一個頁面交互復雜,而另一個相對傳統,兩個項目相比之下凸顯出了頁面布局樣式的時間占比不可忽視,使用了彈性布局代碼量精簡了不少

          CSS:BFC規則的應用自適應兩欄布局

          兩欄布局是寫頁面時經常用到的,要想實現兩欄布局,就需要明白BFC規則,Block formatting context,直譯為“塊級格式化上下文”,可以簡單的理解它為一個獨立的區域,把區域內部元素與外部元素區分開,兩者互不干擾。

          css怎么讓文字豎著排列?

          css可以使用css樣式writing-mode:tb-rl來設置文字豎著排列。writing-mode屬性設置或檢索對象的內容塊固有的書寫方向。

          css3 彈性盒布局的使用-Flex

          css3 的Flex彈性盒的布局是一個用于頁面布局的全新CSS3模塊功能。它可以把列表放在同一個方向(從左到右或從上到下排列),并且讓這些列表能延伸到占用可用的空間。較為復雜的布局可以通過嵌套一個伸縮容器

          CSS實現自適應兩欄布局方法

          浮動+margin第一種: 左側欄固定寬度向左浮動,右側主要內容則用margin-left留出左側欄的寬度,默認寬度為auto,自動填滿剩下的寬度。 第二種:左邊絕對定位(脫離文檔流,不占位置)

          CSS中的圣杯布局與雙飛翼布局

          什么是圣杯布局?所謂圣杯布局就是用于實現一個兩側寬度固定,中間寬度自適應的三欄布局;什么是雙飛翼布局?和圣杯布局一樣,雙飛翼布局也是用于實現一個兩側寬度固定,中間寬度自適應的三欄布局,就是布局的形式上存在差異 

          網站設計和布局的重要性和過程

          網站的設計是吸引客戶的非常重要的因素。如今,互聯網上存在著很多競爭,每個人都可以點擊其客戶,但是只有少數人能吸引他們。這通常是由于網站給人的第一印象。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网