一当娱、小圖跟文字進(jìn)行水平對(duì)齊技術(shù)
第一種方式:通過調(diào)整文字背景圖的位置考榨。
通過padding+背景圖的position配合產(chǎn)生對(duì)齊效果。
注意精靈圖(長(zhǎng)條適合)
第二種方式:將背景圖設(shè)置到一個(gè)s標(biāo)簽上河质,讓s標(biāo)簽跟文本對(duì)齊。
精靈圖可以做的非常緊湊掀鹅。
關(guān)鍵點(diǎn):文本的對(duì)齊到middle,可以通過設(shè)置圖片的margin-top乐尊、left戚丸、right等控制圖片的顯示位置扔嵌。
第三種方式:可以同浮動(dòng)的形式實(shí)現(xiàn)
二、CSS滑動(dòng)門技術(shù)
1对人、margin負(fù)值運(yùn)用
制作網(wǎng)頁(yè)時(shí)拂共,為了拉開元素之間的距離,常常給元素設(shè)置大于0的外邊距margin宜狐。其實(shí)势告,在實(shí)際工作中抚恒,為了實(shí)現(xiàn)一些特殊的效果,經(jīng)常需要將元素的margin設(shè)置為負(fù)值俭驮,如下圖所示的元素重疊效果。
?2混萝、消除inline-block中的空隙
行內(nèi)塊之間會(huì)有縫隙,去掉的方法
1. 去除空格逸嘀,把代碼放在一行上。
2. 使用margin負(fù)值崭倘。
3.給父級(jí)添加font-size:0类垫;
4.使用letter-spacing或者word-spacing
5、使用float的方式
三琅坡、樣式表總結(jié)
樣式表 ? ? ? ? ? 優(yōu)點(diǎn) ? ? ? ? ? ? ? ? ? ? ? ? 缺點(diǎn) ? ? ? ? ? ? ? ? ? ? ? ? ? 使用情況 ? ? ? ? ? 控制范圍
行內(nèi)樣式表 ? 書寫方便 ? ? ?沒有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離 ? 極少 ? ? ? ?控制一個(gè)標(biāo)簽
內(nèi)嵌樣式表 ?結(jié)構(gòu)和樣式相分離 ? ? 沒有徹底分離 ? ? ? ? ? ? ? 較多 ? ? ? ?控制一個(gè)頁(yè)面
外部樣式表 ? 完全實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離 ? 需要引入 ? ? ? ?最多 ? ? ? ? ? 控制整個(gè)站點(diǎn)