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