用css來排版網頁,即用div編排網頁結構,由此會接觸到乙個知識點----[b][size=xx-large]css的盒子模式[/size][/b]。
盒子模式具備的屬性:內容(content)、填充(padding)、邊框(border)、邊界(margin)
[img]
一般盒子模型的width屬性只包括content 部分。
[img]
ie 盒子模型的[color=blue]width屬性包括了content、border 和 padding[/color]部分。
值得注意的是:[b]ie8以下[/b]瀏覽器的盒模型中定義的元素的寬高[b]不包括內邊距和邊框[/b]
寬度width = 自身寬度content+左內邊距+右內邊距+左邊框+右邊框
高度height = 自身高度content+上內邊距+下內邊距+上邊框+下邊框
**盒子的浮動:
乙個div範圍是由它裡面的標準流內容決定的,與它裡面的浮動內容無關。
此時若希望浮動內容被父div包含,可在浮動內容後清除浮動。
關於相對定位:(position:relative)
使用相對定位的盒子,會相對它原本的位置偏移指定的距離,而對其父塊和兄弟塊沒有任何影響。
關於絕對定位:(position:absolution)
使用絕對定位的盒子以它最近的乙個已經定位的(即設定了position屬性)祖先元素為基準進行指定的偏移,而對其後面的兄弟盒子無影響,對於其他盒子該盒子如同不存在。
如果設定了絕對定位,而未設定偏移屬性,則它仍將在原來的位置。
設計導航選單時便遇到盒子的浮動這個問題啦~
擴充套件:[url]
[url]
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題,因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調,其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型,你可能會說我知道呀,就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候,瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
css 盒子模型 ie盒子模型
css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型,ie盒子模型,注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...