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