最近剛剛接觸到乙個新名詞：css盒子模型。一聽到盒子倆字，乙個盒子的形象就在眼前出現了，貌似這個知識點和生活聯絡起來了，也就挺容易理解的。那麼，盒子模型到底是什麼樣的呢？咱們來看一張圖。
相信接觸過盒子模型的人對這樣的圖應該是很熟悉的，而且從圖上我們也可以看出它的標註非常詳細，一目了然。而且看到這個圖的模樣，大家也就很清楚它為什麼叫盒子模型了。
現在我們對盒子模型有了乙個感性的認識。那麼盒子模型都應用到什麼地方呢？大家都知道，對於網頁設計來說，有了css可以讓我們的網頁設計錦上添花，其實說白了css就是個修飾作用，假如沒有它，網頁也是沒有什麼問題的。但是css的主要作用是讓網頁內容和樣式相分離，這樣貌似也是個解耦的過程，不知道我這樣理解是不是合適。
每乙個標籤都可以看作是乙個盒子模型，例如、等都是乙個盒子模型，我們可以對每乙個標籤或者說是盒子進行邊框（border）、外邊距（margin）、內邊距（padding）、內容（content）進行設定，而每一項設定內容有分為四個方向（順時針）：top、right、bottom、left。
通過不同方面不同方向的設定，可以讓網頁顯示不同的樣式效果。
由於剛剛接觸這個概念，理解的還不是很透徹，而且這個知識點看似簡單，但在實際應用的時候還是不太容易的，需要耐心和多多練習。
CSS盒子模式 Box Model
css 中有個重要的概念，就是盒子模式 box model 先看看下面這個圖，黑框包圍的乙個方塊，就是乙個盒子 box 盒子裡由外至裡依次是 css 邊距屬性 margin 是用來設定乙個元素所佔空間的邊緣到相鄰元素之間的距離。css 邊框屬性 border 用來設定乙個元素的邊線。css 間隙屬性...
徹底弄懂CSS盒子模式
前言 如果你想嘗試一下不用 來排版網頁，而是用css來排版你的網頁，也就是常聽的用div來編排你的網頁結構，又或者說你想學習網頁標準設計，再或者說你的上司要你改變傳統的 排版方式，提高企業競爭力，那麼你一定要接觸到的乙個知識點就是css的盒子模式，這就是div排版的核心所在，傳統的 排版是通過大小不...
CSS學習之盒子模式
從css角度來看，頁面上每個元素都是乙個盒子，不管是塊元素還是內斂元素等。而這個盒子由四個部分組成。內容區，補白，邊框，邊界，下面來介紹下這四種元素。每個元素都是以某些內容開始的，比如文字或影象，這部分內容被放置在乙個大小正好能包含它的盒子裡。任何盒子在內容區周圍都能有一層補白。補白是可選的，所以不...