css 盒子模型(box model)
每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括：外邊距（margin）、邊框（border）、內邊距（padding）、實際內容（content）四個屬性。
由於目前大部分主流的瀏覽器支援的是w3c標準盒模型（標準盒模型），也有保留對怪異盒子樣式的解析，當然ie沿用的是自己標準的盒模型（怪異盒子模型）
用兩個簡單的例子分別介紹下這兩個盒子模型：
標準盒模型：
這裡外層盒子的width和height都是：10 + 150 + 10 = 170px。
怪異盒模型:
這裡外層盒子的width和height都是：10 + 130+ 10 = 150px。
這裡得出乙個結論：
標準盒模型，乙個塊的總寬度 = width（content的寬度） + margin（左右）+ padding（左右）+ border（左右）
怪異盒模型，乙個塊的總寬度 = width（content + border + padding）+ margin(左右)
據上面實驗也看到了,如果不想因為改變padding的時候盒子的大小也會跟著變化的話就可以使用怪異盒模型,而如果想讓盒子的大小被padding撐開的話就可以使用標準盒模型
標準盒模型 怪異盒模型
盒子模型的組成 盒子模型一般由 內容 content 邊框 border 左右外邊距 margin left margin right 左右內邊距 padding left padding right 這些部分組成。css中盒子模型分為兩種 w3c標準盒模型和ie標準盒模型 標準盒子模型 標準盒模型...
標準盒模型 怪異盒模型 彈性盒模型
box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...
標準盒模型和怪異盒模型
ie盒模型 怪異盒模型 和標準盒模型的區別就是，ie盒模型中width和height除了content區域外，還包含padding和border。盒子的總寬度為乙個塊的總寬度 width margin 左右 即width已經包含了padding和border值 在標準盒模型下，width和heigh...