CSS2盒模型的3D示意圖_網(wǎng)站重構(gòu)教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
CSS2中的盒模型是關(guān)系到我們排版定位的要害,例如<div>就遵循盒模型規(guī)范。盒模型定義的margin,background-color,background-image,padding ,content,border,初學(xué)者經(jīng)常會(huì)搞不清楚它們之間的層次、關(guān)系和相互影響。這里提供一張盒模型的3D示意圖,希望便于你的理解和記憶。
原圖出自:hicksdesign
需要說明的是:IE和Mozilla瀏覽器對(duì)盒模型的解釋不一致,造成我們定位上的困難,主要差別是:
- IE計(jì)算2個(gè)div之間的距離時(shí)候,會(huì)把1px的border計(jì)算在內(nèi),而mozilla沒有;
- 設(shè)定div的寬度后,假如給padding加一個(gè)值,IE會(huì)在寬度內(nèi)減去這個(gè)值,而M ozilla會(huì)在寬度基礎(chǔ)上加上這個(gè)值。
相關(guān)網(wǎng)站重構(gòu)教程:
- 網(wǎng)站重構(gòu)CSS的優(yōu)化技巧
- 無延遲翻滾的圖形/CSS混合風(fēng)格的按鈕
- 用CSS floats創(chuàng)建三欄頁布局
- 相冊(cè)的自動(dòng)播放效果SlideShow
- 一個(gè)簡(jiǎn)單又不簡(jiǎn)單的Css設(shè)計(jì)實(shí)例
- 深入CSS結(jié)構(gòu):合理運(yùn)用div和span
- 深入CSS結(jié)構(gòu):div再議以及對(duì)span的迷惑
- 談?wù)剎html的結(jié)構(gòu)標(biāo)簽
- CSS中expression使用簡(jiǎn)介
- 從GMail認(rèn)識(shí)的W3C網(wǎng)頁標(biāo)準(zhǔn)和Ajax
- 符合WEB標(biāo)準(zhǔn)的導(dǎo)航菜單
- 用UL實(shí)現(xiàn)非Table四行三列布局
- 相關(guān)鏈接:
- 教程說明:
網(wǎng)站重構(gòu)教程-CSS2盒模型的3D示意圖
。
