怎么理解盒子模型？

盒子模型是樣式表（css）控制頁面的很重要的概念。如果理解了盒子模型和其中每個元素的用法，才能熟練使用css的定位方法和技巧。所有的頁面的元素都可以看成是一個盒子，占據一定的頁面空間。占據的空間要比實際使用的空間要大得多。我們可以調整盒子的邊框和距離，來調整盒子（頁面和頁面中的元素）的位置。

盒子模型是由內容（content）、邊框（border）、內邊距（padding）、外邊距（margin）組成

他們的關系如下圖所示：

• 盒子實際寬度（高度）=內容（content）+邊框（border）+內邊距（padding）+外邊距（margin）。
• 對于任何一個元素設置width和height控制內容大小，
• 也可以分別設置各自的邊框（border）、間隙（padding）、間隔（margin）。

content

content是盒子主要裝內容的地方。即元素、文檔流、嵌套盒子，盒模型主要組成部分之一。

border

border是元素的外圍，即元素的邊，盒模型主要組成部分之一。

計算元素的寬和高要把border加上特別是特殊網站頁面

border有三個主要屬性，color（顏色）、width（粗細）和style（樣式）。

• color主要是指定border的顏色，一共有256的3次方種顏色供我們選擇。通常是16進制的值，比如紅色是“#FF0000”。
• width是border粗細程度，可以設置為thin、thick和length，length為具體數值，比如說border:1px #CCC solid;其中1px指的是border的width，默認值是medium，一般瀏覽器解析為2像素。
• style屬性可以設為none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等，其中none和hodden是不顯示border，hidden可以用來解決邊框的沖突問題。對于groove、inset、outset、rigde、border-style，IE會出現兼容問題，使用時一定要注意。

padding

padding用于控制content與border之間的距離，即內邊距，盒模型主要組成部分之一。

• padding:10px;?????????????????????????? ? ? ? ? ? ? 內邊距四周都是統一值
• padding:10px 10px;???????????????????????????? 上下?? 左右
• padding:10px 10px 10px;??????????????????? 上??? 左右?? 下
• padding:10px 10px 10px 10px;?????????? 上??? 右?? 下? 左

?

margin

margin用于控制塊與塊（可以理解成塊級元素）之間的距離。即外邊距，盒模型主要組成部分之一。

• margin:10px;????????????????????????????????????????? 外邊距四周都是統一值
• margin:10px 10px;??????????????????????????????? 上下?? 左右
• margin:10px 10px 10px;?????????????????????? 上??? 左右?? 下
• margin:10px 10px 10px 10px;????????????? 上??? 右?? 下? 左

每日寄語-“不為失敗找理由，只為成功找方法”

總結

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

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