CSS布局

傳統方案是基于盒裝模型，依賴display屬性+position屬性+float屬性，但對于一些特殊布局（eg:垂直居中）就不容易實現。

補充：

塊元素：出現在另一個元素下面的元素；

內聯元素：出現在另一個元素旁邊的元素，就像段落中的單個單詞一樣；

dispaly屬性一些默認的display的值，段落之間樣式默認值為：display:block；<a>元素默認為display:inline。

注：display:flex和display:grid在布局上比較重要。

1、Flex布局

• 彈性盒子(Flexbox)
  用于創建橫向/縱向的一維頁面布局，在其父元素上應用display:flex，所有直接子元素機會按照flex進行布局，但是子元素的float,clear,vertical-align屬性將失效。

任何一個容器都可指定為flex布局。

.box {display: flex; } <div class="box"><div class="box1">one</div><div class="box2">two</div><div class="box3">three</div> </div>

.box {display: flex; } .box > div {flex:1 } <div class="box"><div class="box1">one</div><div class="box2">two</div><div class="box3">three</div> </div>

.container{display:flex;flex-wrap: wrap; /*可換行*/justify-content:center; } .item{flex: 0 1 150px;margin: 5px; /*外邊距*/ }

flex：是flex-grow、flex-shrink、flex-basis的合并形式。

2、Grid布局

用于同時在兩個維度把元素按行和列排列整齊。grad-template-rows和grid-template-columns定義了行和列的軌道。grid-gap定義了網格間的間距。

Grid 布局只對項目生效，不對項目子元素起作用。

如下代碼：

.box {display:grid;grid-template-columns: 1fr 1fr 1fr;grad-template-rows: 100px 100px;grid-gap:10px; } <div class="box"><div class="box1">one</div><div class="box2">two</div><div class="box3">three</div><div class="box1">one</div><div class="box2">two</div> </div>

注：
a.fr單位跨網格軌道可用空間的分布。上面代碼中有著3個大小為1fr的軌道的網格容器，創建了三個列軌道；
b.若最后一個是2fr，則表示最后一個軌道是前者的二倍；
c.還可以與絕對單位結合使用，eg:grid-template-columns: 150px 1fr 2fr;表示第一列寬是150像素，第三列寬是第二列寬的2倍;
d.grid-template-columns: 150px auto 150px;auto表示由瀏覽器自己決定

• 默認情況下，容器元素都是塊級元素，但也可以設為行內元素。如下代碼，就是指定了div是一個行內元素，該元素內部采用網格布局：div{display: inline-grid;}
  注：設為網格布局后，容器子元素（項目）的float、display:inline-block、display:table-cell、vertical-align和column-*等
  設置都將失效。
• 容器指定了網格布局后，就要劃分行和列了。
  列寬：grid-template-columns
  行高：grid-template-rows

代碼如下：

.container {display:grid;grid-template-columns:100px 100px 100px;grid-template-rows:100px 100px 100px; }

上面代碼指定了一個三行三列的網格，列和寬都是100px,當然也可用百分比;
或用repeat(3,100px)也可；
或用repeat(auto-fill,100px)，當容器大小不確定時可以用。

• 比較常用的布局兩欄布局：

grid-template-columns: minmax(150px,25%) 1fr;

表示第一列寬度最小為150px，最大寬度為總寬度的25%

三明治布局grid-template-rows：auto 1fr auto;
垂直劃分為上中下三部分（頁眉、內容區、頁腳），頁眉和頁腳都是本來的內容高度，內容區是剩下所有的高度。

圣杯布局（最常用）
是將三明治布局中的內容區分成三部分（左邊欄、主欄、右邊欄）

html代碼

<div class="container"><header/><div><main/><div/><footer/> </div>

CSS代碼：

.container{display: grid;grid-template: auto 1fr auto / auto 1fr auto; }

表示垂直方向（頁眉和頁腳都是本身內容高度，內容區占滿剩余的高度），水平方向（左邊欄和右邊欄都是本身內容高度，中間主欄占滿剩余的高度）。

十二網格布局

grid-template-columns: repeat(12, 1fr);

一些常用的網格屬性

• 行間距：grid-row-gap
• 列間距：gid-column-gap
• 合并寫法：grid-gap
• 設置單元格內容的水平位置：justify-items
• 設置單元格內容的垂直位置：align-items
• 合并寫法：place-items
• 整個內容區域在容器里面的水平位置：justify-content
• 整個內容區域在容器里面的垂直位置：align-content
• 合并寫法：place-content
• grid-column：1/3等同于grid-column: 1/span 2表示從第一根列線到第三根列線（即第一列和第二列）
• grid-row：1/span 2，第一根行線，橫跨兩個網格，（即表示第一行和第二行）
• grid-area：指定項目放在哪個區域

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的divcss布局模板代码_CSS3布局（前端所必须要掌握）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。