遇到怪異盒模型怎麼辦
我們做網頁經常會遇到標準盒模型,如下圖這樣
我們可以看到外邊距，內填充和框邊的區別，padding內填充在盒子內部，增加內填充大小，盒子大小也會發生改變,邊框靠近內填充增加邊框也會增加增加盒子的大小,但是我們遇到怪異盒模型就不是這樣了,比如
這個例子中我們建了乙個表單，然後表單中新增了兩個元素
乙個text文字， 乙個submit提交按鈕然後給他們定義了同樣高度和不同背景色便於區分，text文字為黃色區域高度100px，submit按鈕則為紅色，高度為100px，初始樣子如圖所示，執行狀態也在上面，然後我們來增加這個文字框和按鈕同時加上下padding值，比如給他個padding:50px 0;我們只給高度發生變化
然後效果圖在上面，我們發現同樣是加上下兩個50px的padding值，text文字確實是按照標準盒模型來的高度多了100畫素，但是這個submit按鈕卻沒有，然後我們開啟頁面的控制台，按f12
滑鼠滑過這兩個區域會看到這樣的：
然後我們從控制台發現了原因：text文字框和submit按鈕有預設樣式
即都有個2畫素的邊框，我們給text文字框加的上下padding值確實加在高度上面了text 100+50（上）+50（下）+2（上邊框）+2（下邊框）=204
那submit 100+50+50+2+2怎麼等於104？？？
這裡其實submit就是乙個怪異盒模型，原來的submit定義的是100px高就是內容區100px，然後乙個預設的邊框上下都是2個畫素變成104px，接著加了padding之後為了保持原來的模型高度，padding值就「擠占」了內容區，故我們發現內容區高度為0了，只剩上下padding，submit高度為0（內容）+100（padding）+4（邊框）=104px
如果我們非要讓text和submint一樣高度的話，可以直接定義這個怪異盒模型的高度等於標準盒模型增加padding值後的高度這樣可以「繞過」兩個盒模型不一樣的難題。
怪異盒模型
一 怪異盒模型 一 box sizing content box 標準盒模型 border box 怪異盒模型 ie盒模型 允許以特定的方式定義匹配某個區域元素的特定元素 1.content box這是由css2.1規定的寬度高度行為 寬度和高度分別應用到元素的內容框 在寬度和高度之外繪製元素的內邊...
怪異盒模型 彈性盒模型
標準盒模型 我們平常狀態下所寫的，即為標準盒模型狀態下的css樣式 box怪異盒模型 ie盒模型 p box兩種模式的區別標準模式會被設定的padding撐開，而怪異模式則相當於將盒子的大小固定好，再將內容裝入盒子。盒子的大小並不會被padding所撐開。標準模式 box sizing conten...
標準盒模型 怪異盒模型
盒子模型的組成 盒子模型一般由 內容 content 邊框 border 左右外邊距 margin left margin right 左右內邊距 padding left padding right 這些部分組成。css中盒子模型分為兩種 w3c標準盒模型和ie標準盒模型 標準盒子模型 標準盒模型...