盒子模式：從ccs的角度，每乙個元素都是乙個盒子
（圖中藍色背景的邊界應該是邊框，圖畫錯了。。。）
很容易理解，內容區就是元素裡面的value的區域，補白就是padding控制的區域，邊框就是border控制的，而邊界就是margin控制的。
我們從外向裡看。邊界很好理解，元素與元素之間的距離，
margin的使用：
margin： 0px 10px 0px 10px；（上，右，下，左）
margin：0px 10px；（上下都是0px，左右都是10px）
margin：10px；（上下左右都是10px）
margin-left：10px；（左邊界10px）
當然還有上下右（top，bottom，right）的，此處不舉例了。
邊框就是border，可以控制設定顏色、寬度、風格，
補白和邊界差不多，這兩個都是透明的都是控制元素的空間距離，padding的用法和margin一樣
內容區：可以設定width和height控制內容區的大小
從盒子模式很容易理解width，padding，border，margin這些屬性設定的作用。
CSS盒子模式 Box Model
css 中有個重要的概念，就是盒子模式 box model 先看看下面這個圖，黑框包圍的乙個方塊，就是乙個盒子 box 盒子裡由外至裡依次是 css 邊距屬性 margin 是用來設定乙個元素所佔空間的邊緣到相鄰元素之間的距離。css 邊框屬性 border 用來設定乙個元素的邊線。css 間隙屬性...
徹底弄懂CSS盒子模式
前言 如果你想嘗試一下不用 來排版網頁，而是用css來排版你的網頁，也就是常聽的用div來編排你的網頁結構，又或者說你想學習網頁標準設計，再或者說你的上司要你改變傳統的 排版方式，提高企業競爭力，那麼你一定要接觸到的乙個知識點就是css的盒子模式，這就是div排版的核心所在，傳統的 排版是通過大小不...
CSS學習之盒子模式
從css角度來看，頁面上每個元素都是乙個盒子，不管是塊元素還是內斂元素等。而這個盒子由四個部分組成。內容區，補白，邊框，邊界，下面來介紹下這四種元素。每個元素都是以某些內容開始的，比如文字或影象，這部分內容被放置在乙個大小正好能包含它的盒子裡。任何盒子在內容區周圍都能有一層補白。補白是可選的，所以不...