點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁 - 科技 - 知識(shí)百科 - 正文

CSS實(shí)現(xiàn)等分布局的4種方式

來源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 18:50:53

CSS實(shí)現(xiàn)等分布局的4種方式

等分布局是指子元素平均分配父元素寬度的布局方式，本文將介紹實(shí)現(xiàn)等分布局的4種方式。思路一： float。缺點(diǎn)：結(jié)構(gòu)和樣式存在耦合性，IE7-瀏覽器下對(duì)寬度百分比取值存在四舍五入的誤差。【1】float + padding + background-clip。使用padding來實(shí)現(xiàn)子元素之間的間距，使用background-clip使子元素padding部分不顯示背景。CSS Code復(fù)制內(nèi)容到剪貼板。<；style>。body，p{margin： 0；}。.parentWrap{。overflow： hidden。}；.parent{；margin-right： -20px。overflow： hidden。}；.child{；float： left。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀等分布局是指子元素平均分配父元素寬度的布局方式，本文將介紹實(shí)現(xiàn)等分布局的4種方式。思路一： float。缺點(diǎn)：結(jié)構(gòu)和樣式存在耦合性，IE7-瀏覽器下對(duì)寬度百分比取值存在四舍五入的誤差。【1】float + padding + background-clip。使用padding來實(shí)現(xiàn)子元素之間的間距，使用background-clip使子元素padding部分不顯示背景。CSS Code復(fù)制內(nèi)容到剪貼板。<；style>。body，p{margin： 0；}。.parentWrap{。overflow： hidden。}；.parent{；margin-right： -20px。overflow： hidden。}；.child{；float： left。

這篇文章主要為大家詳細(xì)介紹了CSS實(shí)現(xiàn)等分布局的4種方式，等分布局是指子元素平均分配父元素寬度的布局方式，本文將介紹實(shí)現(xiàn)等分布局的4種方式，感興趣的小伙伴們可以參考一下

等分布局是指子元素平均分配父元素寬度的布局方式，本文將介紹實(shí)現(xiàn)等分布局的4種方式

思路一: float

缺點(diǎn):結(jié)構(gòu)和樣式存在耦合性，IE7-瀏覽器下對(duì)寬度百分比取值存在四舍五入的誤差

【1】float + padding + background-clip

使用padding來實(shí)現(xiàn)子元素之間的間距，使用background-clip使子元素padding部分不顯示背景

CSS Code復(fù)制內(nèi)容到剪貼板

<style>
body,p{margin: 0;}
.parentWrap{
overflow: hidden;
}
.parent{
margin-right: -20px;
overflow: hidden;
}
.child{
float: left;
height: 100px;
width: 25%;
padding-right: 20px;
box-sizing: border-box;
background-clip: content-box;
}
</style>

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1
2
3
4

【2】float + margin + calc

使用margin實(shí)現(xiàn)子元素之間的間距，使用calc()函數(shù)計(jì)算子元素的寬度

CSS Code復(fù)制內(nèi)容到剪貼板

<style>
body,p{margin: 0;}
.parentWrap{
overflow: hidden;
}
.parent{
overflow: hidden;
margin-right: -20px;
}
.child{
float: left;
height: 100px;
width: calc(25% - 20px);
margin-right: 20px;
}
</style>

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1
2
3
4

【3】float + margin + (fix)

使用margin實(shí)現(xiàn)子元素之間的間距，通過增加結(jié)構(gòu)來實(shí)現(xiàn)兼容

CSS Code復(fù)制內(nèi)容到剪貼板

<style>
body,p{margin: 0;}
.parentWrap{
overflow: hidden;
}
.parent{
overflow: hidden;
margin-right: -20px;
}
.child{
float: left;
width: 25%;
}
.in{
margin-right: 20px;
height: 100px;
}
</style>

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1
2
3
4

思路二: inline-block

缺點(diǎn)：需要設(shè)置垂直對(duì)齊方式vertical-align，則需要處理換行符解析成空格的間隙問題。IE7-瀏覽器不支持給塊級(jí)元素設(shè)置inline-block屬性，兼容代碼是display:inline;zoom:1;

【1】inline-block + padding + background-clip

CSS Code復(fù)制內(nèi)容到剪貼板

<style>
body,p{margin: 0;}
.parentWrap{
overflow: hidden;
}
.parent{
font-size: 0;
margin-right: -20px;
overflow: hidden;
}
.child{
display:inline-block;
vertical-align: top;
width: 25%;
padding-right: 20px;
box-sizing: border-box;
background-clip: content-box;
font-size: 16px;
}
</style>

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1
2
3
4

【2】inline-block + margin + calc

CSS Code復(fù)制內(nèi)容到剪貼板

<style>
body,p{margin: 0;}
.parentWrap{
overflow: hidden;
}
.parent{
margin-right: -20px;
font-size: 0;
}
.child{
display: inline-block;
vertical-align: top;
font-size: 16px;
height: 100px;
width: calc(25% - 20px);
margin-right: 20px;
}
</style>

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1
2
3
4

【3】inline-block + margin + (fix)

CSS Code復(fù)制內(nèi)容到剪貼板

<style>
body,p{margin: 0;}
.parentWrap{
overflow: hidden;
}
.parent{
margin-right: -20px;
font-size: 0;
}
.child{
display: inline-block;
vertical-align: top;
font-size: 16px;
width: 25%;
}
.in{
margin-right: 20px;
height: 100px;
}
</style>

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1
2
3
4

思路三: table

缺點(diǎn)：元素被設(shè)置為table后，內(nèi)容撐開寬度。若要兼容IE7-瀏覽器，需要改為<table>結(jié)構(gòu)。table-cell元素?zé)o法設(shè)置margin，設(shè)置padding及background-clip也不可行

【1】table + margin負(fù)值

CSS Code復(fù)制內(nèi)容到剪貼板

<style>
body,p{margin: 0;}
.parentWrap{
overflow: hidden;
}
.parent{
display: table;
width: calc(100% + 20px);
table-layout: fixed;
}
.child{
display: table-cell;
height: 100px;
padding-right: 20px;
}
</style>

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1
2
3
4

【2】table + 兄弟選擇器

CSS Code復(fù)制內(nèi)容到剪貼板

<style>
body,p{margin: 0;}
.parent{
display: table;
width: 100%;
table-layout: fixed;
}
.child{
display: table-cell;
height: 100px;
}
.child + .child{
padding-left: 20px;
}
</style>

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1
2
3
4

思路四: flex

CSS Code復(fù)制內(nèi)容到剪貼板

<style>
body,p{margin: 0;}
.parent{
display: flex;
}
.child{
flex:1;
height: 100px;
}
.child + .child{
margin-left: 20px;
}
</style>

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1
2
3
4

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

CSS實(shí)現(xiàn)等分布局的4種方式

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：種方式布局方式實(shí)現(xiàn)css

熱門焦點(diǎn)

CSS實(shí)現(xiàn)等分布局的4種方式

CSS實(shí)現(xiàn)等分布局的4種方式

CSS實(shí)現(xiàn)等分布局的4種方式

最新推薦

猜你喜歡

熱門推薦