css中塊狀結構類似於盒子模型，如下圖：
從左至又分別是外邊距，邊框，內邊距，內容，下面我們來分別測試這幾個屬性。
我先做乙個沒有任何修飾的盒子模型：
**如下：
盒子模型測試
盒子模型測試
盒子模型測試
盒子模型測試
盒子模型測試
盒子模型測試
盒子模型測試
盒子模型測試
顯示效果如圖：
首先我加內邊距：padding:100px 0px 50px 100px;
可以看到裡面的文字向中靠攏，同時盒子也變大了，如下圖：
再設定外邊距：marign:100px 150px;
這時，可以看到網頁中顯示的仍然是上圖，沒有變化，
但我們這時如果再加如一段文字，
這是一段文字；
就會顯示如下所示的樣式：
可見，這段文字與盒子間有一段距離，這就是外邊距了。
最後我們測試乙個行高屬性：line-height:50px;
效果：
可見，行高並不會影響盒子的寬度！
css盒子模型 CSS 盒子模型詳解（一）
在網頁布局中，一定離不開盒子模型這個東西。今天就來說一下這個概念。所謂盒子模型 box model 就是把 html 頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。或者說，每乙個可見的 html 元素都是乙個盒子。每個矩形都由元素的內容 content 內邊距 padding 邊框 b...
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...