我們先來寫一段**：
我是div block元素
我是span inline元素
我是span inline元素
我是span inline元素
我是span inline元素
行內元素特徵：這是執行後的瀏覽器頁面效果。(1)設定寬高無效
(2)對margin僅設定左右方向有效，上下無效；padding設定上下左右都有效，即會撐大空間
(3)不會自動進行換行
塊狀元素特徵：
(1)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)可以自動換行
(4)多個塊狀元素標籤寫在一起，預設排列方式為從上至下
html可以將元素分類方式分為行內元素、塊狀元素和行內塊狀元素三種。首先需要說明的是，這三者是可以互相轉換的，使用display屬性能夠將三者任意轉換：我們增加了兩行**(1)display:inline;轉換為行內元素
(2)display:block;轉換為塊狀元素
(3)display:inline-block;轉換為行內塊狀元素
display: inline;
display: block;
把div轉換為行內元素，把span轉換為塊狀元素後
我是div block元素
我是span inline元素
我是span inline元素
我是span inline元素
我是span inline元素
接著我們恢復起始的**，然後加一些新的**：
我是div block元素
我是span inline元素
我是span inline元素
我是span inline元素
我是span inline元素
我們發現：在更改第三個span標籤為inline-block行內塊狀元素後，它既有了行內元素不換行的特徵，又有塊狀元素可以改變寬高的特徵。
知道了這些後，我們開始進入盒子模型的學習：
起始資料：
我是div block元素
起始頁面效果
我是div block元素
margin: 0px;設定後
margin(外邊距)-清除邊框外的區域，外邊距是透明的。border(邊框)- 圍繞在內邊距和內容外的邊框。padding(內邊距)- 清除內容周圍的區域，內邊距是透明的。content(內容)- 盒子的內容，顯示文字和影象。
margin:0px;設定的目的是，清除盒子的外邊距，（外邊距一清除，頁面左邊就會頂到頭，整個content內容自然加長了，又因為此時字型的大小決定了content的height,所以我們發現，即使上邊距也頂到頭了，但是content的height並沒有變，依舊是21）所以我們看到效果圖示中藍色矩形（content）的長（也就是content的width）由779變為了795，我們看到的效果是這樣
變為這樣：
我是div block元素
margin: 0px font-size: 30px;設定後
所以接著我們設定font-size:30px後，藍色小矩形的高由起始的21變為了40，
接著我們加入border,margin,padding
我是div block元素
這時候盒子模型中的內容就都用到了，最外層的margin（外邊距）,中間的border（邊框）,內層的padding（內邊距）,加上最中間的content（內容）。
接下來我們指定乙個高度：
我是div block元素
我們發現這個height:100px;改的是盒子內容的高度。
當我們接著加入：box-sizing: border-box;
我是div block元素
後頁面變為：
這100px被分配到了boder盒子
也就是說：預設情況下box-sizing: content-box;（也就是我們不寫box-sizing時，設定的height，改變的高度是content的高度）
boder盒子（border-box）和content盒子（content-box）是盒子模型的兩種型別，它們的不同無非就是：
height width的計算不同，border盒子的height是按照border進行計算的：
如上圖中：height=40+(20+10)*2=100，width的計算同理
content盒子的height是按照content來進行計算的：（在預設情況下）我們設定的height是多少，它的content的高就是多少，width同理。
切換盒模型很簡單，只需借助css3的box-sizing屬性就可以了：
box-sizing的預設屬性是content-box
簡述對css盒子模型的理解 css 盒子模型理解
盒子模型是html css中最核心的基礎知識，理解了這個重要的概念才能更好的排版，進行頁面布局。下面是自己積累和總結的關於css盒子模型的知識 希望對初學者有用。一 css盒子模型概念 css css盒子模型 又稱框模型 box model 包含了元素內容 content 內邊距 padding 邊...
對css中盒子模型的理解
html文件中的每乙個元素在頁面布局中都會被呈現為乙個盒子模型，如下圖所示 width和height屬性用來設定內容區域的寬和高，height屬性在預設情況下和內容框的高度相同，也就是隨內容多少的變化而變化。padding為盒子模型的內邊距寬度，也就是內容到邊界 border 直接的距離。borde...
CSS 理解盒子模型
什麼是盒子模型？對於初學者來說，很難說出來，但是對於生活中的盒子大家熟悉吧，哈哈，這裡提到的盒子模型你就可以理解成現實生活中的盒子就可以了，不然怎麼能起個名字叫 盒子模型 呢 好！既然和現實生活中的盒子一樣，那我們想一下，生活中的盒子內部是不是空的好用來存放東西，而裡面存放東西的區域我們給他起個名字...