今天轉(zhuǎn)牛角尖了，在做項目的時候，為了2px的差異，費了一上午的時間。我來說說事件的經(jīng)過吧。
本來今天是為了實現(xiàn)一個按鈕的樣式。我本來可以用div、a標簽這些來實現(xiàn)的結(jié)果。大腦抽風，選用了button。然后就進坑了。現(xiàn)在想起來好想哭。是蠢得哭。給大家先看看效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>button</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.btn{
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<button type="button" class="btn">Click Me</button>
</body>
</html>
代碼運行后的效果
結(jié)果出來了。我設置的width:300px，height:100px。然后少了2px。我就奇怪了。當時代碼寫的復雜，不像現(xiàn)在寫的這么簡單。我懷疑是前面的樣式，可能影響到了。就開始檢查。往往沒想到啊。就這樣浪費了好多時間。
后來我把button的標簽換掉了。換成了div。結(jié)果又對了。
我就知道了?？赡苁呛心Ｐ蜕嫌惺裁醋兓?。我簡單的回憶下盒模型
我當時就想我的button肯定用了IE的盒模型。但是我用的是谷歌瀏覽器啊。為什么會是IE的盒模型。我們接著查資料。沒事多谷歌
我查到了一個屬性可以設置盒模型的類型：box-sizing。
- box-sizing 屬性用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型?？梢允褂么藢傩詠砟M不正確支持CSS盒子模型規(guī)范的瀏覽器的行為。
正式的語法:
box-sizing:content-box | box-sizing:border-box
content-box
默認值，標準盒子模型。 width 與 height 只包括內(nèi)容的寬和高， 不包括邊框（border），內(nèi)邊距（padding），外邊距（margin）。注意: 內(nèi)邊距, 邊框 & 外邊距 都在這個盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在瀏覽器中的渲染的實際寬度將是370px;
- 尺寸計算公式：
width = 內(nèi)容的寬度，height = 內(nèi)容的高度。 - 寬度和高度都不包含內(nèi)容的邊框（border）和內(nèi)邊距（padding）。
border-box
width和height屬性包括內(nèi)容，填充和邊框，但不包括邊距。這是當文檔處于 Quirks模式 時Internet Explorer使用的盒模型。注意，填充和邊框?qū)⒃诤凶觾?nèi) , 例如, .box {width: 350px; border: 10px solid black;}
導致在瀏覽器中呈現(xiàn)的寬度為350px的盒子。內(nèi)容框不能為負，并且被分配到0，使得不可能使用border-box使元素消失。這里的維度計算為：
width = border + padding + 內(nèi)容的 width，
height = border + padding + 內(nèi)容的 height。
在html中，button元素的box-sizing屬性默認是border-box，大部分其他元素的box-sizing的屬性則都是content-box。
結(jié)束語
所以我就是踩到box-sizing這個坑了。然后找問題，花費了半天時間。當初發(fā)現(xiàn)了2px的差異。本來可以跳過去不管的，心里想的，2px差異不大。結(jié)果自己不放過自己。不過以后就有經(jīng)驗了。以后樣式初始化。要小心box-sizing
