CSS盒模型相關問題

css盒模型相關問題

1. 基本概念：標準模型 + ie模型

2. 標準模型和ie模型的區別

3. css如何設定這兩種模型

4. js如何設定獲取盒模型對應的寬和高

5. 例項題（根據盒模型解釋邊距重疊）

6. bfc（邊距重疊解決方案）

具體說明：

1. 標準模型和ie模型：

本質上是乙個盒子，封裝周圍的html元素，它包括：外邊距（margin），邊框（border），內邊距（padding），和實際內容（content）。

2. 區別：寬度的計算不同。

標準模型寬度僅是content部分的寬度，而ie模型的寬度指的是border+padding+content三個部分的寬度之和。

3.css如何設定這兩種模型

4. 四種方法獲取盒模型的寬和高。

5. 例項題(根據盒模型解釋邊距重疊)

(2) 浮動元素重疊問題；

解決方案：給不想與浮動元素重疊的部分建立乙個bfc。

bfc不會與float重疊--

>
"layout"
>
#layout 
#layout .left 
#layout .right 
<
/style>
="left"
>
<
/div>
="right"
>
<
/div>
<
/section>

解決方案：給父元素建立bfc。

<

!--子元素浮動時，父元素高度塌陷--
>
"float"
>
#float 
#float .float 
<
/style>
="float"
>我是浮動元素<
/div>
<
/section>

css盒模型相關知識一

1 css盒模型分類 標準盒模型，ie盒模型 2 標準盒模型與ie盒模型的區別 3 css如何設定這兩種模型 css通過box sizing來設定盒模型 box sizing屬性可以為三個值之一 content box default border box，padding box。content b...

css盒模型 標準盒模型 怪異盒模型

css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...

CSS盒模型常見問題

div.parent的margin屬性為margin 0 auto，與body之間不應該有空隙，但是由於div.child的margin屬性設定為margin top 10px，div.parent出現了乙個本不該有的margin top 10px效果。原因在於 w3c的盒模型 collapsing...