盒子模型(box modle)可以用來對元素進行布局，包括內邊距(標準盒模型中盒子的大小是指：padding)，邊框(border)，外邊距(margin)，和實際內容(content)這幾個部分。
content + border + padding + margin。其中width指的是內容區域content的寬度；height指的是內容區域content的高度。下面用一段**和來讓說明乙個盒子大小的呈現方式。
在chrome裡面除錯工具樣式的最下面可以看到乙個盒子呈現出的長寬，內邊距(padding)，邊框(border)和外邊距(margin)。滑鼠移動到dom上，可以看到盒子實際呈現出的長寬分別為140px,140px。這是因為我們的width為100px,height為100px,padding上下左右均為10px,border上下左右均為10px。所以我們看到的我們盒子的長寬為140px。由於是塊級元素，實際盒子會獨佔一行，這裡的140px沒有算是margin。標準模式下，最直觀的特點是widith和height的值決定了盒子的內容區域(content)的大小。而盒子實際呈現的大小並不一定是你設定的widith和height的值。因為還有padding,border,margin等來影響它。
怪異盒模型中的width指的是內容、邊框、內邊距總的寬度(content + border + padding);height指的是內容、邊框、內邊距總的高度。怪異盒模型下盒子的大小=width(content + border + padding) + margin。下面用一段**和來讓說明乙個盒子大小的呈現方式。
widht和height為100px，那麼盒子實際呈現的大小也為100px(這裡是width和height的值，沒算margin)。那麼內容區域(可以放文字，div標籤的區域)content的大小為width - padding - border = 60。
在html頂部加上doctype宣告，大多數瀏覽器就會預設採用標準盒模型。上面的**也可以看出，通過css的屬性box-sizing能改變盒模型。
解決img標籤自帶外邊距問題
三種方法去除img標籤自帶外邊距。目錄 頁面效果 圖1 img的高度是100px 圖2 父容器div的高度卻是104px 第乙個div中包裹img標籤，img標籤的高度設定為100px，但是第乙個div的高度卻是104px。上面圖1中可以看到兩個div之間出現了一條 白邊 這個邊距並不是我們設定的，...
絕地求生 想知道你有多少種死法嗎？
絕地求生，是一款開放世界策略射擊遊戲，採用虛幻4引擎製作。是一款大逃殺型別的遊戲，每一局遊戲將有100名玩家參與，他們將被投放在絕地島 battlegrounds 的上空，遊戲開始跳傘時所有人都一無所有。遊戲展開的方式是 玩家赤手空拳地分布在島嶼的各個角落，利用島上多樣的 與道具。隨著時間的流逝，島...
你知道嗎？字型會讓產品有不同的氣質
當我們拿到一款產品的包裝或者登入了乙個 的時候，你是否會有意或者無意地留意到屬於這個產品的特定的字型設計或者使用，從而影響到你對這個產品最直觀的感受。精緻 優雅 科幻 古典或者是覺得粗糙難看呢?比如當我把蘋果 上 iphone 的字型換掉以後，你一定或多或少的察覺到了什麼不一樣的地方，也許你無法表達...