DIV+CSS兩種盒子模型（W3C盒子與IE盒子）
在辨析兩種盒子模型之前，先簡單說明一下什麼叫盒子模型。
原理：
先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。 這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。 特點： 每個盒子都有：邊界、邊框、填充、內容四個屬性； 每個屬性都包括四個部分：上、右、下、左；這四部分可同時設定，也可分別設定；裡的抗震輔料厚度，而邊框有大小和顏色之分，我們又可以理解為生活中所見盒子的厚度以及這個盒子是用什麼顏色材料做成的，邊界就是該盒子與其它東西要保留多大距離。（以上原理與特點摘於百度下面這幅圖裡面，分別是W3C盒子和IE盒子的模型：
大家肯定都能發現，這兩種模型整體來說非常的相似。由內到外都是content,padding,border,margin。但是仔細看的話，虛線延長出來的部分，分別標註了height和width，但是在W3C中，虛線包圍的部分只有content，而在IE中，虛線包圍的部分是content+padding+border。這是最直觀的不同，同時這也就是這兩種模型的最大不同點。
W3C 盒子模型的範圍包括 margin、border、padding、content，並且 content 部分不包含其他部分
IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding
用一個例子來實現一下W3C盒子模型:
<html> <head> <title>盒子模型</title> <style> #box{ width:100px; height:100px; padding:40px; border:solid 40px green; margin:20px; } div{ font-size:30px; color:red; background-color:gray; text-align:center; } </style> </head> <body> <div id="box"> W3C盒子模型 </div> </body> </html>
執行結果:
這張圖只能看到內容和邊框。看不到具體的分界線，也就不知道填充（padding）和內容（content）具體的排布。
這裡我就順便介紹一中除錯工具，firefox瀏覽器裡面的firebug，對於平時除錯網頁佈局各方面的有很大的幫助。
除錯介面就是這樣了。滑鼠選中<div>標籤，影象就發生變化了，整體佈局就很清晰了。（如下圖）
這就很清晰了吧。同時也說明了W3C盒子包含了content，padding，border三部分。
IE盒子的就不寫了，有需要的同學可以自己試試。目前大多的網頁佈局都是用W3C盒子，它的相容性非常好，所以是不二之選。
相關推薦
DIV+CSS兩種盒子模型（W3C盒子與IE盒子）
在辨析兩種盒子模型之前，先簡單說明一下什麼叫盒子模型。 原理： 先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。 這些屬性我們可以把它轉移到我們日常生活中的盒子（
CSS-兩種盒模型 box-sizing
CSS-兩種盒模型 box-sizing: content-box （W3C盒子）| border-box (IE盒子); 區別： 設定為 border-box 後，width包含padding，border，整個盒子大小為 margin + wi
SpringBoot中使用AMQ的兩種方式二（Java配置、註解方式）
使用@JmsListener註解方式 1. 工程目錄
自動補全、自動提示的兩種實現方式（前端實現與後端實現）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="style
sqart平方根計算的兩種方法實現（累加逼近和二分法）
sqart函式是c/c++數學計算的一個常用函式，sqart開方的主要思路是利用逼近的方法進行實現，精度最低，計算效率最低的方式是直接累加逼近；精度較高而且使用範圍較廣的方法是牛頓迭代法
六種SOCKET模型（好文章必須要收藏）
一：select模型 二：WSAAsyncSelect模型 三：WSAEventSelect模型 四：Overlapped I/O 事件通知模型 五：Overlapped I/O 完成例程模型 六：IOCP模型 老陳有一個在外地工作的女兒，不能經常回來，老陳和她通過信件聯絡。他們的信會被郵遞員投遞到他們的信箱
android------引導頁兩種實現方式（原生和WebView網頁實現）
有的App當你第一次開啟的是和常常會有引導頁來描述一些App資訊（功能，特點），當然也要做驗證，驗證第二次進入不進入引導頁，直接進入App，此部落格藉助ViewPager來實現引導頁， ViewPager類提供了多介面切換的新效果，是谷歌在3.0之後加入的新特性，所以需要引
二級指標做輸入的三種記憶體模型（學習筆記與記錄）
一：二級指標做輸入的第一種記憶體模型#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <string.h> //void prin
HTML學習筆記 w3sCss盒子模型（陰影）（div的一些使用）案例 第十節 （原創） 參考使用表
idt pac cin head src 模型圖 div 盒子模型 樣式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
（九）JMS的兩種訊息模型(Point-to-Point（P2P）和Publish/Subscribe（Pub/Sub）)應用舉例
1、P2P模型在P2P模型中，有下列概念：訊息佇列(Queue)、傳送者(Sender)、接收者(Receiver)。每個訊息都被髮送到一個特定的佇列，接收者從佇列中獲取訊息。佇列保留著訊息，直到它們被消費或超時。 每個訊息只有一個消費者(Consumer)（即一旦被消費
主題：JMS的兩種訊息模型(Point-to-Point（P2P）和Publish/Subscribe（Pub/Sub）)應用舉例...
1、P2P模型 在P2P模型中，有下列概念：訊息佇列(Queue)、傳送者(Sender)、接收者(Receiver)。每個訊息都被髮送到一個特定的佇列，接收者從佇列中獲取訊息。佇列保留著訊息，直到它們被消費或超時。 每個訊息只有一個消費者(Consumer)（即一旦被消
PPP的兩種配置方法（pap和chap）
pap chapPAP的配置R1上的配置[R1]int s4/0/0[R1-Serial4/0/0]ppp authentication-mode pap[R1-Serial4/0/0]q[R1]aaa[R1-aaa]local-user huawei password cipher 123456Info:
java打印等腰三角形的兩種方法！（根據行數，根據底邊長度）
triangle class [] 執行 next() result scanner 1-1 next 首先來看根據用戶輸入的底邊的長度判斷： 1 package cn.edu.nwpu.java; 2 3 import java.util.Scanner; 4
MySQL數據庫root賬戶密碼忘記兩種處理方法（保有效）
mysql mysq 密碼忘記 方法1：1.停止MySQL服務# kill `cat /var/run/mysqld/mysqld.pid`或者# pkill mysqld2.創建一個密碼賦值語句的文本文件# vi mysql-init ALTER USER ‘root‘@‘localhost‘
mybatis的sql中字段兩種映射（映射到實體）方式
tina 文件中 gpo entity 實體 body 映射 from tap mybatis的xml配置文件中，字段映射的兩種方式： 1.resultMap標簽中將數據庫的字段與實體類中的字段對應： <resultMap id="BaseResultMap" ty
快速排序的兩種實現方法（js）
while 交換 splice rt+ dex 進行 return ont mat 快速排序的基本思想：通過一趟排序，將待排記錄分割成獨立的兩部分，其中一部分記錄的關鍵字均比另外一部分記錄的關鍵字小，則可分別對著兩部分記錄繼續進行排序，以達到整個序列有序的目的。------
盒子模型（包含級元素分類）
pan color 盒子模型 inpu 首字母 tex 寬度 NPU 鍵盤 一、CSS的盒子模型 1、CSS標準盒子模型：寬度 = 內容寬度（content）+ border + padding + margin 2、低版本IE盒子模型：寬度 = 內容寬度（content
數據庫設計的兩種過程模型
版權 https 文檔 str -s 水平 .com 從數據 過程 文前小敘 做完畢業實習的項目以後，思考過很多。個人覺得，軟件過程和把控不當是，目前對個人而言，最影響項目成果的因素。這一點，讓我想起了軟件能力成熟度模型（CMM）：一級為初始級，二級為可重復級，三級為已
xml兩種解析方式（封裝了獲得文件和回寫）
開始時間：2018年10月6日13:16:37 結束時間：2018年10月6日14:26:25 累計時間：1 xml解析： 這一篇挺好 https://blog.csdn.net/CristianoJason/article/details/51777853
java中代理，靜態代理，動態代理以及spring aop代理方式，實現原理統一彙總 Spring中AOP的兩種代理方式（Java動態代理和CGLIB代理）
若代理類在程式執行前就已經存在，那麼這種代理方式被成為 靜態代理 ，這種情況下的代理類通常都是我們在Java程式碼中定義的。 通常情況下， 靜態代理中的代理類和委託類會實現同一介面或是派生自相同的父類。 一、概述1. 什麼是代理我們大家都知道微商代理，簡單地說就是代替廠家賣商品，廠家“委託”代理為