CSS基本知識3-CSS盒模型
box-sizing: content-box|border-box|inherit;
| 值 | 描述 |
|---|---|
| content-box |
這是由 CSS2.1 規定的寬度高度行為。 寬度和高度分別應用到元素的內容框。 在寬度和高度之外繪製元素的內邊距和邊框。 |
| border-box |
為元素設定的寬度和高度決定了元素的邊框盒。 就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。 通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。 |
| inherit | 規定應從父元素繼承 box-sizing 屬性的值。 |
這裡頭的問題在於，CSS2.1規定預設是content-box,即W3C標準模型，另一種為IE傳統模型也叫怪異模型border-box。
當然現實是很殘酷的，看看現在的Bootstrap或Foundation，都又使用了border-box模式，這說明什麼？說明IE一開始幹對了，W3C把這事給搞錯了。遵循W3C的佈局，帶來了很多潛在問題，這是一個巨大的災難，雖然沒有人指出這一點。
這兩者的差異主要是，W3C的Width（Height)計算，不包含Padding和Border，Border-box模式，Width包括內容，Padding，Border。
後者的好處是非常明顯的，比如我定義一個Width：200px的DIV，後來我又要給加個1px邊框，這下好了，W3C標準下，佈局亂了，要不就得重新調整Width等，變成了
Width:199px;border:1px，計算起來相當麻煩，這在多個巢狀DIV裡，加邊框及改變Padding的時候尤其麻煩。
使用傳統模式：就明顯的分佈了盒內和盒外，外邊就是Margin，裡邊就是Width，這樣計算起來簡單多了。
另一個問題是Form表單元素多使用border-box模式。
那麼，使用border-box模式來佈局，就需要注意瀏覽器相容性，考慮到Bootstrap等的應用，及移動應用，應該選擇全站border-box模式。
遺憾的是，現在的絕大多數網站使用了預設的content-box模式，而新型的Bootstrap等使用了全域性的border-box模式。
如何修復兩者的不相容？
當然全部改正也是應該的，但不想大改的情況下，在引入Bootstrap等框架後，把原來佈局出錯的部分，加上：box-sizing:content-box屬性。
更詳細的參考此文：
http://www.w3cplus.com/content/css3-box-sizing
相關推薦
CSS基本知識3-CSS盒模型
box-sizing: content-box|border-box|inherit; 值描述 content-box 這是由 CSS2.1 規定的寬度高度行為。 寬度和高度分別應用到元素的內容框。 在寬度和高度之外繪製元素的內邊距和邊框。 border-box
CSS基本知識4-CSS行模型
display:inline、block、inline-block block元素的特點是： 總是在新行上開始； 高度，行高以及頂和底邊距都可控制； 寬度預設是它的容器的100%，除非設定一個寬度 inline元素的特點是： 和其他元素都在一行上； 高，行高及頂和底邊距不可改變； 寬度就是它
CSS基本知識1-CSS基本概念
CSS基本概念： 選擇器｛屬性：值;屬性：值｝ CSS繼承：子元素繼承父元素樣式，父子關係看DOM結構。 CSS覆蓋： 瀏覽器預設設定 外部樣式表 內部樣式表（位於 <head> 標籤內部） 內聯樣式（在 HTML 元素內部） CSS優先： A：文字從上到下，後宣告的樣式
CSS基本知識2-CSS選擇
選擇就是CSS定義的第一部分，可以用面向物件的模式來理解，或者宣告式的面向物件。 標準選擇： #.E 進階選擇：“，”分隔多個相同項，相當於類的例項。 如:#btn1,#btn2,.btn {...} 後代元素選擇，相當於子類： 空格分隔: .nav p {...} #header .nav
CSS基本知識5-CSS對齊
要對齊的關鍵，在於理解塊，行的概念，塊的對齊主要靠自動計算定位，比如margin:auto，及浮動,所以最好的辦法是儘量使用行來對齊。 例項： .box { border: 1px solid #808080; height: 200
CSS基本知識6-CSS字型
首先要考慮的是文字的排版，實際上有這玩意，Word還需要嗎？不需要了。我們列下文字所涉及的操作： CSS 文字屬性 可見，以上的這些CSS文字屬性，主要就是操作文字的顯示，當然對於網頁來說，大多數不常用。但如果想做個網頁編輯器，那就都可以派上用場了。 有了文字，我們還要設下字型，先看
CSS基本知識
分開 col tle -- body 定義 type text 參考 CSS規則有兩個主要部分組成：選擇器，一條或多條聲明 選擇器通常是需要改變樣式的HTML元素 每條聲明由一個屬性和一個值組成 屬性是希望設置的樣式屬性。每個屬性有一個值。屬性和值之間用冒號分開。 CSS
CSS柵格系統與彈性盒模型：實踐比較
不久以前，所有的HTML頁面佈局都是通過table、float以及其他CSS屬性完成的，但這些方法並不適合構建複雜的web頁面。 於是，W3C推出了flexbox（彈性盒模型）——一種專門用於構建健壯的響應式頁面的佈局模式。使用flexbox可以很容易地對齊頁
js基本知識3
ren 返回結果 for 相加 獲得 數值 doc [] 3.6 1. 函數 function 函數的聲明 函數的 調用 函數的傳參 2. 函數返回值 Return 返回結果 返回給函數 Id 函數
RTL基本知識：邏輯強度模型(Logic Strength Model)
model 多個 描述 gif 並不是 用途 mode 其中 還需 本文主要介紹HDL語言中常用的邏輯強度模型,並且以Verilog示例為主,最後介紹VHDL中常用的各種邏輯值系統.Verilog中提供了大量的模型用於模擬具體的硬件電路,例如and,or,nmos等,同時為
3、盒模型新增樣式
在CSS3中盒模型新增了box-shadow樣式，該樣式可以為盒模型設定陰影，詳解見 box-shadow 示例，下面為盒模型設定陰影 <!DOCTYPE html> <html>
數據庫系統——基本知識與關系模型【一】
字段 三級 介質 結合 圖書館 har 表之間 cep 作用 對於數據庫的學習，我們要註意以下幾個方面： 對於概念：能夠明確各個概念的含義，區分相似的概念，並且能舉出相應的通俗易懂的例子 對於操作：知道操作每個操作的含義，能用韋恩圖以集合的形式表示出來，並且能夠通過說明
從零開始學習前端開發 — 3、CSS盒模型
左右 color 方法 盒子模型 圖片 enter das 設置方法 left ★ 盒子模型 （標準的盒模型） css盒模型的概念及組成 css盒模型是css的基石，每個html標簽都可以看作是一個盒模型。 css盒模型是由內容(content)，補白或填充(paddi
前端知識整理 CSS盒模型
我們先來說說 什麼是CSS的盒模型呢？ 百度一下： 想象一個盒子，它有：外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）四個屬性； 好百度是這樣解釋的。 行 但是我們還有兩個小概念 一個是標準模型（content-box） 和IE模型 （bor
HTML與CSS學習記錄（3）————CSS樣式基本知識
認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字型加粗等。如下列程式碼： p{ font-size:12px;/*設定文字字號*/ color:
css盒模型相關知識一
1:css盒模型分類 標準盒模型，IE盒模型 2：標準盒模型與IE盒模型的區別 元素框的總寬度=width+（padding-left+padding-right）+（border-left+border-right）+（margin-left+margin-right）
常見瀏覽器相容問題、盒模型2種模式以及css hack知識講解
什麼是瀏覽器相容問題？所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段程式碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者用什麼瀏覽器來檢視我們的網站或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員
前端筆記（關於css盒模型知識整理）
我以前整理的文章可能也不是特別深入。所以現在開始嘗試即使多花點時間收集整理，也不只發淺層知識，這樣對技術的深入理解是很有幫助的。 廢話不多說，我們現在開始。 說到css盒模型，這是大多面試基礎中會經常面到的。 首先我們要知道，什麼是盒模型？盒模型分為兩種：w3c盒模型和IE盒模型。 現在大多數瀏覽器預設情況下
CSS Display屬性與盒模型
鏈接 依據 使用 dem align ont 情況 rac rgb 由於HTML流式文檔的特性，頁面布局往往是新手最為頭疼的問題之中的一個。 每一個HTML元素都會渲染為一個Box，可分為inline Box和block Box。 依據display屬性的不同。Box
客戶端網頁編程----CSS盒模型
內邊距 客戶 網頁 css 元素 編程 borde 相互 模型 1、內容（content）:元素中的內容； 2、外邊距（Margin）:代表元素外邊的空間，這個控件將元素相互分開； 具體指的是元素與元素之間的間距，當前元素與border間距，只對塊級元素有效，是對外的。