css box模型content-box 和border-box
因為剛開始學，用了bootstrap的框架，有些東西可以用現成的，不用自己布局，後來發現如果要調比較精細的布局還是得自己寫css，然後就開始一點點去掉bootstrap的布局，不然在原來bootstrap的css上改，沒有完全理解bootstrap這個效果是怎麽弄出來的話想去掉某個效果也很難，某些樣式會和自己調的樣式沖突，最終決定直接把整個bootstrap框架卸掉，全部用原來的
但是一卸調之後布局全變了，控件各種錯位，完全想不明白為什麽，width調的50%卻占了70+%，於是去看了一下css box模型,最低下的兼容性註意事項說到
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
瀏覽器的兼容性問題
一旦為頁面設置了恰當的 DTD，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規範，元素內容占據的空間是由 width 屬性設置的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE5.X 和 6 在怪異模式中使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。
雖然有方法解決這個問題。但是目前最好的解決方案是回避這個問題。也就是，不要給元素添加具有指定寬度的內邊距，而是嘗試將內邊距或外邊距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持 填充的寬度和邊框的寬度屬性設。
解決IE8及更早版本不兼容問題可以在HTML頁面聲明 <!DOCTYPE html>即可。
然後搜了一下bootstrap的box模型，搜到使用Bootstrap v3.3.4註意細節box-sizing,說到bootstrap用的是box-sizing: border-box;，個人也是覺得這個調控件位置調起來比較方便，所以采用的博主的做法，原來用bootstrap的排版撤掉bootstrap後還是沒什麽大問題的
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
css box模型content-box 和border-box