濟(jì)南網(wǎng)站建設(shè)之需要掌握的八個CSS布局技巧
來源:http://www.premium-option.com 發(fā)布時間:2016-06-16
1.若有疑問立刻檢測
在出錯時若能對原始代碼做復(fù)雜檢測可以省去很多頭痛效果。W3C關(guān)于XHTML與CSS 都有檢測工具可用。請留意,在文件掃尾的錯誤,能夠由于不當(dāng)?shù)慕Y(jié)構(gòu)等要素形成更多錯誤;我們建議先修正一些清楚的錯誤之后重新檢測,這樣也許會讓錯誤數(shù)量爆減。
2.運(yùn)用浮動功用時記得適當(dāng)肅清指令
浮動是個風(fēng)險的功用,未必會發(fā)生您所希冀的結(jié)果。假設(shè)您遇到浮動元素延伸到中心容器的邊框或許其他不正常狀況,請先確定您的做法是正確的。請參閱Eric Meyer 在Complex Spiral Consulting Web 網(wǎng)站上的教學(xué)。
3.邊界重合時應(yīng)用padding或border來防止
您能夠會為了一點(diǎn)不應(yīng)該出現(xiàn)的空間而焦頭爛額,或許您需求一點(diǎn)點(diǎn)空間時,怎樣都擠不出來。假設(shè)您有用到margin,那么很容易發(fā)生邊界的重合;Andy Budd在他的網(wǎng)站上解釋了能夠的做法。
4.嘗試防止同時對元素指定padding/border以及高度或?qū)挾?/p>
Windows版IE經(jīng)常招致width與height的計(jì)算效果。有些方法可以處置此效果,但假設(shè)母元素需求指定高度與寬度時盡量在母元素之內(nèi)的子元素套用margin,或許當(dāng)子元素需求指定高度與寬度時,在母元素套用padding以達(dá)效果。
5.不要依賴min-width/min-height
Windows版IE并不援助兩種語法。但是在某種水平下,windows版IE可以到達(dá)相當(dāng)于min-width/min-height的效果,所以只需對IE做點(diǎn)過濾功用,即可到達(dá)您想要的結(jié)果。
6.若有疑問,先增加百分比
有時分某些錯誤解使50%+50%成為100.1%,使網(wǎng)頁出現(xiàn)效果。這時請嘗試將這些值改為49%,甚至49.9%。
7.記住“TRouBLed”寫法
Border,margin與padding的簡寫語法有特定順序,從上方末尾順時針方向轉(zhuǎn)動:top,right,bottom,left. 所以margin:0 1px 3px 5px;的結(jié)果是上方無邊界,左邊1像素,以此類推。記住“TRouBLe”,您就不會弄錯次第了。
8.只需不是零的值,都要指定單位
CSS需求您對每個font,Margin等各種值指定單位。(獨(dú)一的例外是line-height)
相關(guān)文章
多年
成立于2010年
多年經(jīng)驗(yàn)不斷發(fā)展
多家客戶
超過多家客戶伴隨我們成長
多家企業(yè)
服務(wù)于多家企業(yè)客戶
助力品宣的提升
幾十項(xiàng)
服務(wù)項(xiàng)目為您服務(wù)
夯實(shí)成長的基石