CSS3 Box-sizing屬性以及解決相容性的一些做法。
box-sizing是CSS3的box屬性之一。一說到CSS的盒模型（Box model）我想很多人都會比較煩，特別是對於新手，然而這個Box model又是我們CSS運用中比較重要的一個屬性。那麼CSS3的跟盒模型有什麼關係呢？第一句話就說了，Box-sizing是CSS3的Box屬性之一，那他當然也遵循CSS的Box model原理，為了能更好的學習和理解這個Box-sizing屬性，我們有必要先了解一下CSS中Box model的原理。
CSS中Box model是分為兩種，第一種是W3C的標準模型，另一種是IE的傳統模型，他們相同之處都是對元素計算尺寸的模型，具體說就是對元素的width,height,padding,border以及元素實際尺寸的計算關係；他們不同之處呢？兩者的計算方法不一至：
1、W3C的標準Box Model:
/*外盒尺寸計算（元素空間尺寸）*/ Element空間高度 = content height + padding + border + margin Element 空間寬度 = content width + padding + border + margin /*內盒尺寸計算（元素大小）*/ Element Height = content height + padding + border （Height為內容高度） Element Width = content width + padding + border （Width為內容寬度）
2、IE)傳統下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:
/*外盒尺寸計算（元素空間尺寸）*/ Element空間高度 = content Height + margin (Height包含了元素內容寬度，邊框寬度，內距寬度) Element空間寬度 = content Width + margin (Width包含了元素內容寬度、邊框寬度、內距寬度) /*內盒尺寸計算（元素大小）*/ Element Height = content Height(Height包含了元素內容寬度，邊框寬度，內距寬度) Element Width = content Width(Width包含了元素內容寬度、邊框寬度、內距寬度)
其實原則上來說Box Model是分得很細的，我們這裡主要分了兩個比較明顯的地方，就是外盒模型和內合模型，如上面計算公式所示（後面我將會詳細介紹一下CSS中的Box Model）。這樣說大家可能還不太好理解，下面我們一起來看一個實際的例子，比如說現在有一個叫boxtest的Div，其具有下面一個屬性
.boxtest { border: 20px solid; padding: 30px; margin: 30px; background: #ffc; width: 300px; }
我們先來看一下W3C標準瀏覽器（Firefox,Safari,Chrome,Opera,IE6+）和傳統瀏覽器(IE6以下版本瀏覽器)的Layout截圖
上圖中明顯可以看出IE6以下版本瀏覽器的寬度包含了元素的padding,border值，換句話來說在IE6以下版本其內容真正的寬度是(width-padding-boder)。用內外盒來說的話，W3C標準瀏覽器的內盒寬度等於IE6以下版本瀏覽器的外盒寬度。這樣下來我們就需要在IE6下的版本寫Hack統一其內外盒的寬度，關於如何處理這樣的相容問題，我在這裡不多說，感興趣的朋友可以點選這裡。那麼瀏覽器發展到今天，世面上用IE6以下的瀏覽器應該所佔比例相當的少，但不排除沒有人不在用。所以目前瀏覽器大部分元素都是基於W3C標準的Box Model上，但對於form中的有部分元素還是基於傳統的Box Model上，比如說input中的submit,reset,button和select等元素，這樣如果我們給其設定border和padding他也只會往內延伸。關於如何處理form中的這些元素，今日將會藉此機會和大定一起探討一下，那麼現在我們還是先回到今天的正題上。
上面簡單讓大家對CSS的Box Model有了一個初步的概念（如果想了解更多的Box Model相關知識，可以點選W3C Box Model，另外在這裡有中文版）。下面開始我們今天的主題——CSS3的Box-sizing。
語法：
box-sizing ： content-box || border-box || inherit
取值說明
1、content-box:此值為其預設值，其讓元素維持W3C的標準Box Model，也就是說元素的寬度/高度（width/height）等於元素邊框寬度（border）加上元素內邊距（padding）加上元素內容寬度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。
2、border-box:此值讓元素維持IE傳統的Box Model（IE6以下版本），也就是說元素的寬度/高度等於元素內容的寬度/高度。（從上面Box Model介紹可知，我們這裡的content width/height包含了元素的border,padding,內容的width/height【此處的內容寬度/高度=width/height-border-padding】）。
為了更能形像看出box-sizing中content-box和border-box兩者的區別，我們先簡單來看一人示例圖，如下所示：
相容瀏覽器
box-sizing現代瀏覽器都支援，但IE家族只有IE8版本以上才支援，雖然現代瀏覽器支援box-sizing，但有些瀏覽器還是需要加上自己的字首，Mozilla需要加上-moz-，Webkit核心需要加上-webkit-，Presto核心-o-,IE8-ms-，所以box-sizing相容瀏覽器時需要加上各自的字首：
Element { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; } Element { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
上面主要介紹了box-sizing的理論知識，我們還是理論和實踐結合吧，下面就一起先來看一個簡單點的例子：
HTML Code:
<<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="imgBox" id="contentBox"><<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">img src="/images/header.jpeg" alt="" /></<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="imgBox" id="borderBox"><<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">img src="/images/header.jpeg" alt="" /></<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
CSS Code:
.imgBox img{ width: 140px; height: 140px; padding: 20px; border: 20px solid orange; margin: 10px; } #contentBox img{ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; } #borderBox img{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
效果：
上面效果圖讓大家很明顯的區分開了content-box和border-box的區別了，為了更好的理解，我截了一份他們在Firebug下的一layout分析圖：
Layout分析圖再次證明了box-sizing:content-box是維持了W3C的標準Box Model，而box-sizing:border-box是維持了IE傳統（IE怪異模式）下的Box Model。其兩者區別我在這就不多說了，因為前面說的很清楚了，如果還有不清楚的同學，只要仔細看一下上面那張Layout分析圖，我想你會恍惚大悟的。那麼box-sizing主要運用在哪些方面呢？我總結了一下，第一點就是我們佈局上，第二點就是表單元素上。為什麼呢？我想大家在平時佈局中都有碰到當兩個塊元素的寬度剛好是其父元素總寬度時我們佈局不會有任何問題，但當你在其中一個塊加上padding或border時（哪怕是1px）整個佈局就會完全打亂，因為其總寬度超過了父元素的寬度。第二點表單元素，前面我提到過，form有很多元素還是使用的IE傳統Box Model，針對這兩點，box-sizing將在其身上發揮強大的作用，下面我們分別來看看box-sizing在這兩方面的運用：
一、box-sizing拯救我們的佈局
為了能更好的說明問題，我們先來模仿一個兩欄佈局，先來看其HTML Code:
<<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="layoutDemo"> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div id="header" class="innerPadding border">Header Content</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div id="content" class="clearfix"> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div id="left" class="aside innerPadding border">Left Sidebar</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>; <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div id="main-content" class="article innerPadding border">Main Content</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div> </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div id="footer" class="innerPadding border"> Footer Content</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div> </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div>
簡單的分析一下，這裡把LayoutDemo的div當作我們頁中的body，而div#header是頁面頭部，div#left是頁面左邊欄，div#main-content是頁面主內容，div#footer是頁面的頁尾，下面我們來模仿一個960的佈局(比例縮小一半)，我們加上平時佈局的樣式上去：
.layoutDemo { width: 960px; background: #000; } #header { width: 100%; background: orange; } #left { width: 220px; float: left; margin-right: 20px background: green; } #main-content { width: 720px; float: left; background: gray; } #footer { width: 100%; background: red; }
效果：
到目前佈局來說一點問題都沒有，那是因為我們子元素寬度加起來剛好與元素的是相等，那麼我們現在來變動一下，如果根據設計需要，每個塊中內容都離邊緣有10px的距離，那麼我們先來看看基header,left,main-content,footer這幾個塊加一個padding:10px，看看有什麼變化：
.innerPadding { padding: 10px; }
效果：
上圖清晰告訴我們，加了一個padding,惡夢就開始來了，header,footer撐破容器伸出去了，main-content也被掉到left的下面了。跟剛才當初的效果可是完全不一樣的呀，有人可能會問，如果我不使用padding我只使用border什麼怎麼樣呢？大家猜猜會怎麼樣？不用猜了，馬上換個程式碼給大家看看，我們只要把剛才的padding注掉換成border，如下所示：
.border { border: 10px solid yellow; }
效果：
上圖是去掉了padding只加了10px的邊框,同樣把佈局給打亂了。接著把padding和border同時加進去，反正都撐破了佈局，就破罐子破摔。加上的效果如下：
不上我說，大家都知道上圖是因為加上了padding和border把佈局給打亂了，下面主要看如何用box-sizing來修復這個撐破的佈局，前面介紹了，上圖中box-sizing是取了其預設值content-box，其Box Model完全符合W3C的標準，為了修復這樣的佈局，我們需要把Box Model改用IE傳統下的解析，這樣一加，我們給他加上下面box-sizing屬性：
.box-sizing { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
效果：
通過box-sizing:border-box改變了Box Model後，佈局神奇般的好了，記得以前為了處理這樣的問題，我們需要改變box的寬度或者在box裡面在巢狀一個div，在裡面的div中增加padding和border來達到這樣的效果。從今天開始，我們不需要那樣做了，我們只要通過box-sizing:border-box來改變Box Model回到IE的傳統模式下，就可以實現了，只是有一點遺憾的是，我們IE6和IE7不支援，如果為了達到一致的效果，在加上你知道CSS Hack如何寫，這樣也並不難，你只要讓IE6和IE7的寬度改變一下，也能達到效果：
#left { *width:180px; } #right { *width: 680px; }
通過上面的hack，我們在IE6和IE7下也能正常顯示我們的佈局需求。但是大家說討厭CSS Hack，不想寫，那麼大家在專案中運用時不得不要考慮一下，但對於我們學習CSS3的box-sizing來說是沒有大礙的。
二、Box-sizing統一form元素風格
前面簡單提到form有些input還是支援IE傳統下的Box Model標準，比如說【type="submit"】、【type="reset"】、button、select等，然在搜尋box-sizing屬性使用時偶爾發現Roger Johansson早在2004年就發表了一篇關於表單元素樣式測試的文章《Styling form controls》。他告訴我們如果用樣式來控制表單元素在各瀏覽器下的顯示效果是很難，如果還要相容各系統下的效果更是難上加難。除非使用UI去製作。那麼今天我們就要來看看用box-sizing如何來讓他們達到一致效果：今天我們只要來測試一下submit,reset,button,section,input[type="text"]幾個元素，下面我們先來看其預設狀態下的效果（模式是在）：
Html Code:
<<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">form action="#" method="post"> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field"> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">input type="submit" value="submit" class="submit" /> </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field"> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">input type="reset" value="reset" class="reset" /> </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field"> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">button class="button">button</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">button> </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field"> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">input type="text" value="text" class="text" /> </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field"> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">select name="select" id="select" class="select"> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">option value="1">1980</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">option> </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">select> </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field"><<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">input type="checkbox" class="checkbox" />checkbox</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field"><<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">input type="radio" class="radio" />radio</<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div> <<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div class="form-field"><<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">textarea name="textarea" id="" cols="30" rows="3" class="textarea"></<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">textarea></<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">div> </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">form>
CSS Code
<<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">style type="text/css"> body { font-size: 12px; } form { width: 200px; margin: 20px auto; padding: 10px; border: 1px solid #ccc; } .form-field { margin-bottom: 5px; background: #cdcdcd; padding: 2px; } .submit, .reset, .button, .text, .select, .textarea { width: 80px; border-color: red; } .textarea { resize: none; } </<span class="title" style="margin-left: 60px; color: rgb(38, 139, 210);">style>
我們來看其效果，我在效果截圖中附上各個部分在firebug下的layout圖：
DOM元素的Layout圖明顯告訴我們：
1、【type="submit"】、【type="reset"】、button、【type="text"】、select、textarea預設情況下都帶有2px的border;
2、【type="submit"】、【type="reset"】、button預設情況下會有6px的左右padding；height在mac系統下會比在winxp win7系統下少1px,只有16px,（12px的字型時高度為17px）;
3、【type="text"】預設情況下會有1px的上下padding；WinXP和Win7下高度為15px，Mac系統下為14px
4、【type="checkbox"】預設情況下會有margin：3px 3px 3px 4px,並且寬/高度預設為13px(IE6，IE7預設大約是15px，Mac系統下只有9px)
5、【type="radio"】預設情況下會有margin: 3px 3px 0 5px的外邊，並且寬/高度預設為13px（IE6,IE7預設大約是15px,Mac系統下只有9px）
6、textarea預設情況帶有1px的上下margin；
最後要說的一點是，上面那些常用的form元素只有【type="text"】和textarea兩者是遵循W3C的標準Box Model，而其他幾個都是還是遵循IE傳統下的Box Model。下面我們在把CSS修改一下，我們把margin、padding和border都統一一下。
.submit, .reset, .button, .text, .select, .textarea, .checkbox, .radio { margin: 0; padding: 0; border-width: 1px; }
同樣我們來看看其各元素在firebug下的Layout分析圖：
Layout圖告訴我們，其margin,border,padding現在都統一了，寬度只有【type="checkbox"】和【type="radio"】在不同的系統和瀏覽器會解析不一樣，最明顯的上面也說過了，這兩個表單元素在IE6和IE7下的寬、高度都是15px,而在Mac系統下是9px,但在WinXP/Win7的Firefox下又是13px，這樣給我們在線上的顯示效果完全帶來了不一樣的風格，這也是大家頭痛的一個地方；另外還有一點需要說明的一點是，別然在上面的Layout中分析【type="submit"】、【type="reset"】、button的寬度一樣，但是在IE6-7之中會隨著內容顯示不同而寬度不同，關於這個問題大家可以參考前面我寫的另一篇文章《input 按鈕在IE下相容問題》。然而最讓我們頭痛的是表單元素的高度問題，前面也提到過了，在Mac系統下各種表單元素的高度都會比Win系列下少1px，這樣給我們也帶來很大的煩惱。我在網站搜尋，看到nwind寫了一篇《如何更好地控制input輸入框的高度》,作者拿了【type="text"】做了很仔細的分析，另外Roger Johansson的《Controlling width with CSS3 box-sizing》一文也做過詳細的分析。從這兩篇文章得知解決這樣的相容問題我們可以使用CSS3的box-sizing的border-box屬性。下面我擷取【type="text"】的解決高度不一到致的方法，運用到表單元素上來
.submit, .reset, .button, .text, .select, .textarea, .checkbox, .radio { margin: 0; padding: 0; border-width: 1px; height: 17px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .checkbox, .radio { width: 13px; height: 13px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
我們來看看加上了box-sizing:border-box的layout分析圖：
從Layout圖明顯的可以看出，現在元素的引數都統一了，但是IE6和IE7是不支援box-sizing的屬性，所以為了相容我們還需要為他們寫一個hack:
.submit, .reset, .button, .text,相關推薦
CSS3 Box-sizing屬性以及解決相容性的一些做法。
box-sizing是CSS3的box屬性之一。一說到CSS的盒模型（Box model）我想很多人都會比較煩，特別是對於新手，然而這個Box model又是我們CSS運用中比較重要的一個屬性。那麼CSS3的跟盒模型有什麼關係呢？第一句話就說了，Box-sizing是C
CSS盒模型全面講解，怪異模式盒模型，CSS3 box-sizing屬性
今天學習了一下css3的box-sizing屬性，順便又溫習了一下css的盒模型，最後覺得有必要對盒模型做一個全面整理。 先不考慮css3的情況，盒模型一共有兩種模式，一種是標準模式，另一種就是怪異模式。 當你用編輯器新建一個html頁面的時候你一定會發現最頂上都會有一個DOCTYPE標籤，例如： &
css3 box-sizing屬性（width,padding,border）
box-sizing屬性可以為三個值之一：content-box（default），border-box，padding-box。 content-box，border和padding不計算入width之內 padding-box，padding計算入width內 border-box，border和pad
淺談CSS3 box-sizing 屬性 有趣的盒模型
css 樣式 boot 適用於 兩種 參考 理想 設置 寬高 增加 盒模型的組成大家肯定都懂，由裏向外content,padding,border,margin. 盒模型是有兩種標準的，一個是標準模型，一個是IE模型。 從上面兩圖不難看出在標準模型中，盒模型的
CSS3中box-sizing屬性的作用以及應用場景
盒模型box-sizing: 取值 1.content-box 預設值，標準盒模型，設定寬度為內容寬度，實際寬度為左右邊距加上左右邊框加上左右填充再加上內容寬度 2.border-box 設定寬度等於元素內容寬度，content包含了元素的border和padding 3.inherit 繼承父元素的
使用 CSS3 的 box-sizing 屬性設置元素大小包含 border 與 padding
lang htm tle 內部 p s itl css3 div char 默認情況下，內部元素（如：input）的寬度或高度，是不會包含元素的邊框和內邊距的，這是就需要使用 box-sizing 屬性設置該元素。 box-sizing 是 CSS3 的屬性，可以設置以
CSS3 中的 box-sizing屬性
9.png androi 應用 css com webkit -m -1 img 語法： box-sizing: content-text | border-box | inherit; content-box（默認）： 寬度和高度分別應用元素的內容框；在寬度和高度之外繪制
css3中的box-sizing屬性的使用
.net font content mage css3 模型 盒子模型 它的 span box-sizing屬性用來定義元素的width和height所表示的區域,該屬性一般有三種值：content-box、border-box、inherit。 其中inherit表示bo
【CSS】css 盒子模型 以及 box-sizing屬性
css 盒子模型 以及 box-sizing屬性 在標準的盒子模型下，css中 width，padding以及border的關係 關於css中的width和padding以及border的關係。 在css中，width和height指的是內容區域的寬度和高度，增加pad
CSS解決border影響元素寬高的問題（box-sizing屬性）
問題 我們在用 CSS 進行頁面佈局時，經常會給元素指定寬高。在沒有邊框時（border為0）往往父元素的寬高是子元素寬高的和。但是在新增邊框寬度後如果不調整元素寬度，會導致佈局錯亂。 例如我們想要下面這樣的效果： 一個寬度為 600px 的父元素下有三個 200px 的子元素。
CSS3之calc()和box-sizing屬性
box-sizing 屬性 規定兩個並排的帶邊框的框： 例子： box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素。 例如，假如您需要並排放置兩個帶邊框的框，可通過將 box-sizing 設定為 "border-box"。這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放
使用 CSS3 的 box-sizing 屬性設定元素大小包含 border 與 padding
預設情況下，內部元素（如：input）的寬度或高度，是不會包含元素的邊框和內邊距的，這是就需要使用box-sizing 屬性設定該元素。 ? box-sizing 是 CSS3 的屬性，可以設定以上值： 1. content-box: 元素 size 不包含 b
CSS3 box-reflect 屬性
direction 百分比 放射性 投影 語法：box-reflect：包括3個值。1. direction 定義方向，取值包括 above 、 below 、 left 、 right。above：指定倒影在對象的上邊below：指定倒影在對象的下邊left：指定倒影在對象的左邊right：
box-sizing屬性
3.5 borde nbsp containe left border 大小 也不會 class box-sizing這個屬性可規定盒子大小是否包含padding和border 1.以下三個值: box-sizing:content-box;/*盒子寬度就是內容的
CSS3 box-sizing的作用
pad 計算 lis list clas 屬性 css 寬度 borde 設置CSS盒模型為標準模型或IE模型。標準模型的寬度只包括content，二IE模型包括border和padding box-sizing屬性可以為三個值之一： content-box，默認值，b
CSS box-sizing屬性
分享圖片 瀏覽器 公式 lan nat tricks tro unset ini 全文摘抄自 https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing box-sizing 屬性用於更改用於計算元素寬度和
#css3# box-sizing
box 默認 數學計算 -s png 怎樣 add mode con box-sizing屬性讓css布局更容易並且更直觀。但是為什麽它有效又被熱愛，先讓我們看下它的歷史。 盒子模型歷史 自從css誕生，盒子模型就這樣默認的工作： width + padding + bor
W3c盒子模型+IE盒子模型+box-sizing屬性
fault 部分 col 公式 就是 space 內容 高度 增加 1.盒子模型有兩種，標準盒模型和IE盒模型，其中W3C標準的盒模型就是在網頁的頂部加上 DOCTYPE 聲明。 （1）W3C標準的盒模型 W3C盒子模型包括4部分：margin，border，padding
淺談box-sizing屬性
前言 初學 css 的時候 div 的一些寬高問題經常會引起一些不好理解的問題，這裡做一個關於css盒模型的分享。 問題 下面的程式碼可以直接複製出去執行哦 <!DOCTYPE html> <html lang="en"> &
CSS對box-sizing屬性理解
正常盒模型 IE盒模型：一般較多出現在大部分瀏覽器中 正常盒模型：又叫w3c盒模型。即塊狀元素box-sizing屬性為content-box的盒模型。w3c盒模型是指：盒模型的大小包括content，padding，border，並且先做content，由內向外擴充套件。w3c盒模型的大小