學習完了CSS世界的總結

因為預設的box-sizing:為content-box寬度作用在內容             所以當出現             .box{width: 100px; border:1px solid red; }或.box{width: 100px ; padding:20px}border/padding會影響寬度的屬性共存的時候.box的寬頻就不是我們所設定的那樣             而是 實際寬度 = width + border + padding             實際的內容寬度 content=width；              那該變的方法是什麼             一.css流體佈局下的寬度分離原則             給box在設定一個父級的DIV用他來放寬度這樣box就可以流動性在內部了width:auto，當在給box在設定border，padding就會在div內部改變，而不會改變box的寬度這個時候box的寬度等於父級元素的寬度就固定了；             .father{                 width:180px;             }             .box{                 margin:0 20px;                 padding:0 20px;                 border:1px solid;             }             實際的寬度為 = 父級的寬度180px；             實際的內容寬度 content=180-40-40-2px；              改變方法二             用box-sizing，box-sizing的作用也叫width的細節(IE8要加-ms-字首)           因為預設的box-sizing:為content-box寬度作用在內容，所以當我們改變其屬性值的時候padding-box其width就作用在padding box上面了就可以出現了想流動性自適應一樣的現象;             content = width - padding - border;             其他：為何box-sizing不支援margin-box因為沒有價值，margin只有在width：auto的時候才有用，但這個時候元素已經是處於流動性了，有沒有設定box-sizing都一樣