css九宮格布局的五種方法
我要評論要實現(xiàn)的九宮格效果圖如下：
公共樣式：
div{
width: 300px;
height: 300px;
}
ul{
padding: 0;
width: 100%;
height: 100%;
}
li{
list-style: none;
text-align: center;
line-height: 100px;
margin: 3px;
background-color: #243F49;
color: white;
border: 1px solid white;
font-weight: bolder;
}
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>1.grid網格布局
grid-template-columns 用于定義每一列的寬度； grid-template-rows 用于定義每一行的高度；grid-gap設置網格的行間距、列間距
ul{
padding: 0;
width: 100%;
height: 100%;
/*設置為grid網格布局*/
display: grid;
/*設置三行高度都為100px；*/
grid-template-rows:100px 100px 100px ;
/*設置三行寬度都為100px；*/
grid-template-columns: 100px 100px 100px;
置網格的行間距、列間距都為3px
/*grid-gap: 3px;*/
}2.flex布局
計算好每個li的寬度和高度，總的寬、高度為300px，那么每個li的寬高就為300px/3=100px 但是由于每個li設置了margin為3px那么：
每個li的寬度= 100px - （margin-left + marginr-right）=100-（3+3） = 94px 我們將每個li的寬度設置為94px即可。
每個li的高度=100px - （margin-top + margin-bottom） = 100-6 = 94px 我們將每個li的高度設置為94px即可。
確定了總的div寬高度和每個li的寬高度后用flex布局進行換行。
當然了，先確定三個盒子的高、寬度 *3+ 間距 *2 *3個= 總寬/高度這樣的計算順序更快。
ul{
padding: 0;
width: 100%;
height: 100%;
/*設置布局方式為flex布局*/
display: flex;
/*換行*/
flex-wrap: wrap;
}
li{
/*固定設置每個li的寬度和高度*/
width: 94px;
height: 94px;
margin: 3px;
list-style: none;
text-align: center;
line-height: 100px;
background-color: #243F49;
color: white;
border: 1px solid white;
font-weight: bolder;
}3.float浮動定位
給總的div設置一個固定的寬高，計算總的高、寬度 = 三個盒子3 + 間距2 *3個再設置每個li固定的寬高，利用float來換行，再給父元素overflow：hidden進項清除浮動定位。
每個li的寬高度為94px,margin為3px ，div的總高度、寬度=943+32*3=300px。
ul{
padding: 0;
width: 100%;
height: 100%;
/*清除浮動*/
overflow: hidden;
}
li{
/*固定設置每個li的寬度和高度*/
width: 94px;
height: 94px;
/*第三種方法：浮動定位進行換行*/
float: left;
margin: 3px;
list-style: none;
text-align: center;
line-height: 100px;
background-color: #243F49;
color: white;
font-weight: bolder;
}4.inline-block+letter-spacing屬性/font-size：0
和前面兩種一致，先計算寬高度、設置每個li的寬高度，再將li使用dispaly：inline-block換行，再用letter-spacing屬性的負值進行減少字符之間的空白
letter-spacing屬性是增加（值為正）或減少（值為負）字符間距（字符間的空白）；
ul{
padding: 0;
width: 100%;
height: 100%;
/*減少字符間的空白*/
letter-spacing: -5px;/*這里使用font-size:0;也可*/
}
li{
/*設置每個li的固定寬度和高度*/
width: 94px;
height: 94px;
display: inline-block;
margin: 3px;
list-style: none;
text-align: center;
line-height: 100px;
background-color: #243F49;
color: white;
font-weight: bolder;
}5.table布局
將父元素設置為dispaly：table布局形式，使得元素以表格形式來顯示，再設置單元格的邊框間距。再設置相應的表格行形式display: table-row;和單元格形式display: table-cell
<style>
ul{
width: 300px;
height: 300px;
/*元素作為塊級表格來顯示 padding失效*/
display: table;
/*設置相鄰單元格的邊框間距*/
border-spacing: 5px;
}
li{
list-style: none;
text-align: center;
background-color: #243F49;
color: white;
font-weight: bolder;
/*此元素會作為一個表格行來顯示 margin和padding都失效*/
display: table-row;
}
div{
line-height: 90px;
text-align: center;
/*元素以單元格形式來顯示 Margin失效*/
display: table-cell;
}
<ul>
<li>
<div>1</div>
<div>2</div>
<div>3</div>
</li>
<li>
<div>4</div>
<div>5</div>
<div>6</div>
</li>
<li>
<div>7</div>
<div>8</div>
<div>9</div>
</li>
</ul>效果圖：
到此這篇關于css九宮格布局的五種方法 的文章就介紹到這了,更多相關css九宮格布局內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
- 九宮格布局在制作一些Web App時還是經?？梢杂玫降?這里我們以一個大概的結構示例來作CSS實現(xiàn)頁面九宮格布局的簡單示范,不過需要注意IE6下的兼容性問題.2016-06-27