CSS盒狀模型

在平時(shí)的開發(fā)過程中還是經(jīng)常得寫博客，這2天有個(gè)公司找我面試，在面試當(dāng)中提到了CSS中的盒狀模型。這個(gè)東西在平時(shí)的前端開發(fā)經(jīng)常用到。以下簡(jiǎn)單介紹一下：

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

content:內(nèi)容，它可以是文字和圖片等；

padding:內(nèi)邊距，空白和內(nèi)補(bǔ)丁，用于設(shè)置內(nèi)容和邊框之間的距離，就像一個(gè)緩沖帶；

border:邊框，用于設(shè)置內(nèi)容邊框的粗線和樣式等 ；

margin:外邊框，是一塊內(nèi)容與另一塊內(nèi)容之間的間距；

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

從以上的盒狀模型介紹中可以看出，一個(gè)盒狀模型應(yīng)該將這4個(gè)方面的尺寸全部加起來計(jì)算：

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/chengbing2011/p/4190107.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。