對(duì)于移動(dòng)端頁(yè)面開發(fā),CSS樣式重置是必不可少的一步。本文將重點(diǎn)介紹CSS行高的重置方式。
/*清除行高*/ *{ margin: 0; padding: 0; line-height: 1; }
在進(jìn)行CSS重置時(shí),一定要注意保護(hù)好原來(lái)的樣式,防止影響到頁(yè)面的其他元素。上述代碼將當(dāng)前頁(yè)面中的所有元素的Margin、Padding以及Line-height都設(shè)置為0,這樣可以在一定程度上重置一些默認(rèn)的樣式。
/*達(dá)到等高效果的方法*/ .parent{ display: table; width: 100%; table-layout: fixed; } .child{ display: table-cell; height: 100%; vertical-align: middle; }
在移動(dòng)端中,為了達(dá)到等高效果,通常可以使用Table布局。上述代碼將包含子元素的父元素設(shè)置為Table,并將Table的Layout方式設(shè)定為Fixed,這樣Table的寬度就不會(huì)根據(jù)子元素的寬度自動(dòng)調(diào)整,而是使用設(shè)定的值。將子元素的Display屬性設(shè)置為TableCell,高度設(shè)定為父元素的100%即可達(dá)到等高效果。同時(shí)設(shè)置Vertical-Align屬性為Middle,可以讓子元素在父元素中豎直居中。
總之,移動(dòng)端開發(fā)涉及到的CSS重置不僅僅局限于行高,還包括字體大小、顏色等。不同情況下,需要不同的重置方式來(lái)達(dá)到理想的效果,希望本文的介紹可以為大家提供參考。