盒子模型
盒子模型的寬度屬性
寬度 width：畫素值/百分比/auto(自動)
最大寬度 max-width：畫素值/百分比/auto(自動)
最小寬度 min-width：畫素值/百分比/auto(自動)
其中百分比是根據父元素的值進行寬度設定
ie6下不支援 max-width min-width兩個屬性
盒子模型的高度屬性
高度 height：畫素值/百分比/auto(自動)
最大高度 max-height：畫素值/百分比/auto(自動)
最小高度 min-height：畫素值/百分比/auto(自動)
說明：設定塊級元素和替換元素的內容高度和寬度
ie6下不支援 max-width min-width兩個屬性
哪些html元素可設定高和寬屬性
塊級元素
、、~、、、、、、、、、等
替換元素
html標籤分類
1.塊級標籤：佔據一行，換行
2.行內標籤：在一行，不換行,元素排滿之後換行
非替換元素：、、、......
替換元素：
盒子模型邊框屬性
邊框寬度：border-width：thin/medium/thick/長度值
邊框顏色：border-color：顏色/transparent透明
邊框樣式：border-style(必寫)：solid/dotted/duble.....
border屬性不同方向設定：
border-top/right/left/bottom-width
....-color
....-style
邊框屬性簡寫：
border：寬度、樣式、顏色(空格分隔，順序無關)
border-top/right/left/bottom：寬度、樣式、顏色(空格分隔，順序無關)
盒子模型內邊距padding
padding-top/right/left/bottom：長度值/百分比(值不能為負值)
內邊距簡寫
padding：值1；(4個方向都為值1)
padding：值1 值2；(上下=值1，左右=值2)
padding：值1 值2 值3；(上=值1，左右=值2，下=值3)
padding：值1 值2 值3 值4；(上=值1，右=值2，下=值3，左=值4)
盒子模型外邊距margin
margin-top/right/bottom/left:長度值/百分比/auto(實現水平方向居中)
值可以為負值
margin屬性也可簡寫，同padding簡寫規則
預設情況，相應html塊級元素，存在外邊距：body、h1~h6、p...，可宣告margin屬性，覆蓋預設樣式
p垂直方向，兩個相鄰元素都設定外邊距，外邊距會發生合併，合併後的外邊距高度=兩個發生合併外邊距的高度種的最大值
（標準）盒子模型計算
1.若有頁面宣告則是標準盒子模型
盒子在頁面中所佔的寬度：
左邊距+左邊框+左填充+內容寬度+右填充+右邊框+右邊距組成
盒子在頁面中所佔的高度：
上邊距+上邊框+上填充+內容高度+下填充+下邊框+下邊距組成
2.若沒有宣告，各瀏覽器按自己的方式解析
如ie盒子模型：height=邊框+內邊距+內容高度
盒子模型的應用
display屬性：
inline ，元素將顯示為內聯元素，元素前後沒有換行符
block，元素將顯示為塊級元素，元素前後會帶有換行符
inline-block，行內塊元素，元素呈現為inline，具有block相應特性
none 此元素不會被顯示
如：div
相應內聯元素及使用display：inline設定成內聯元素的元素width和height屬性無效。
水平方向margin-left/margin-right/padding-left/padding-right有效
垂直方向margin-top/margin-bottom/padding-top/padding-bottom無效
塊級元素及使用display：block設定成塊級元素的元素width、height、margin、padding屬性都生效
可以使用inherit使盒子模型的屬性得到繼承，如：div下有p，div div p
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盒...