在此可以填充內容
div>
body>
html>顯示結果如下：
通過改變width、height、padding、margin的值改變顯示結果，還可以設定margin-left、margin-right等值，每乙個值下面都是一串的設定，通過除錯可以發現整個圖形的現實是有上、下、左、右不同的塊組成的，可以對不同的塊進行剪下設定，使用起來比較方便。
除錯情況如下：
可以清晰的看到除錯出來的盒子模型每個值的設定情況。
css可以用ie、和google瀏覽器進行預覽和除錯，但是除錯的過程中chrome瀏覽器的顏色可以在圖中的小方塊處直接選擇，但是ie瀏覽器需要手動設定，而且用chrome設定其他值時按回車可以直接進入下一行，但是ie瀏覽器不能直接回車進入下一行，對於初學者來說，用chrome瀏覽器進行除錯比較方便。前端的學習需要在不同的瀏覽器進行除錯，稍微熟練的話可以多加練習。
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
CSS基礎 盒子模型
width和height指內容區域的寬度和高度 元素實際寬度 左右外邊距 左右邊框 左右內邊框 width 元素實際高度 上下外邊距 上下邊框 上下內邊距 height 定義元素的寬和高需要使用下面屬性 1 width寬度 height高度 固定的寬度和高度，當內容超出寬度和高度之後，不會自動填充擴...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...