Web頁(yè)面開發(fā)離不開Css,它負(fù)責(zé)頁(yè)面的樣式布局,而初始化Css是通用的一種Css樣式,通過(guò)它我們可以重置瀏覽器默認(rèn)樣式,使不同的瀏覽器在樣式呈現(xiàn)上達(dá)到更好的統(tǒng)一性。
以下是一個(gè)基本的Web初始化Css代碼片段。
* { margin: 0; padding: 0; box-sizing: border-box; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* 清除浮動(dòng) */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; }
以上代碼中,使用“*”通配符,對(duì)網(wǎng)頁(yè)所有元素進(jìn)行初始化屬性設(shè)置。其中,Box-sizing:border-box是CSS3中的屬性,能夠規(guī)定元素的width和height都不會(huì)再受padding和border的影響。另外, *代表通配符,可以匹配所有元素,所以可以在其中一行代碼中,統(tǒng)一設(shè)置一些屬性,如font-size等。
在較為復(fù)雜的Web項(xiàng)目中,通?;谝陨铣跏蓟疌ss代碼進(jìn)行后續(xù)的樣式布局和實(shí)現(xiàn)。特別是需要兼容各種不同瀏覽器及移動(dòng)設(shè)備時(shí),使用初始化Css更能體現(xiàn)其重要性及實(shí)際價(jià)值。
上一篇css選擇符相鄰選擇器