CSS盒狀模型

在平時的開發過程中還是經常得寫博客，這2天有個公司找我面試，在面試當中提到了CSS中的盒狀模型。這個東西在平時的前端開發經常用到。以下簡單介紹一下：

CSS中的盒狀模型由：margin、border、padding和content幾個屬性組成，

content:內容，它可以是文字和圖片等；

padding:內邊距，空白和內補丁，用于設置內容和邊框之間的距離，就像一個緩沖帶；

border:邊框，用于設置內容邊框的粗線和樣式等 ；

margin:外邊框，是一塊內容與另一塊內容之間的間距；

在使用CSS設置盒狀模型寬度和高度時，我們只設置content區域的寬度和高度，而不是content+border+padding+margin. 如果給盒狀模型定義背景色，將會在content區域和padding區域顯示，是無法設置顏色的。

從以上的盒狀模型介紹中可以看出，一個盒狀模型應該將這4個方面的尺寸全部加起來計算：

盒狀模型的寬度=左margin寬度+左padding寬度+左border寬度+content寬度+右padding寬度+右border寬度+右margin寬度 。

盒狀模型的高度=上margin寬度+上padding寬度+上border寬度+content寬度+下padding寬度+下border寬度+下margin寬度。

轉載于:https://www.cnblogs.com/chengbing2011/p/4190107.html

總結

以上是生活随笔為你收集整理的CSS盒状模型简介的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。