* 盒子的寬度 = content的寬度
* 盒子的高度 = content的高度
* 盒子的寬度 = 左右border + 左右padding + content的寬度
* 盒子的高度 = 上下border + 上下padding + content的高度
* border-box、content-box、inherit、initial
* content-box：預設值，寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。
* border-box：為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
* inherit：規定應從父元素繼承box-sizing屬性的值。
前端 盒子模型
盒模型分為兩種 標準模型和ie模型,主要了解標準模型 盒模型示意圖 盒子模型的屬性 width 內容的寬度 height 內容的高度 padding 內邊距,邊框到內容的距離 border 邊框,就是指盒子的寬度 margin 外邊距,盒子邊框到附近最近盒子的距離 盒模型的計算 盒子的真實寬度 wi...
css盒子模型 前端系列 css盒子模型
1 盒子模型 下圖中可以看到，在設定width的時候，標準的盒子模型是不包括border和padding的，而在ie瀏覽器中是包括這兩項的。盒模型是有兩種標準的，乙個是標準模型，乙個是ie模型。標準模型中，盒模型的寬高只是內容 content 的寬高，預設正是w3c標準盒模型。而在ie模型中盒模型的...
盒子模型 筆記
images cssbase.css layout.css index.css 脫離文件流 寬度不夠會掉下來 行內元素支援寬高 塊元素會根據內容撐開寬高 文字環繞 用到浮動必須清浮動 不要用inline block，用浮動 相對定位 根據自己定位 不會脫離文件流 絕對定位 脫離文件流 根據父級定位 ...