怎么理解盒子模型？

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

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

他們的關(guān)系如下圖所示：

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

content

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

border

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

計(jì)算元素的寬和高要把border加上特別是特殊網(wǎng)站頁(yè)面

border有三個(gè)主要屬性，color（顏色）、width（粗細(xì)）和style（樣式）。

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

padding

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

• padding:10px;?????????????????????????? ? ? ? ? ? ? 內(nèi)邊距四周都是統(tǒng)一值
• padding:10px 10px;???????????????????????????? 上下?? 左右
• padding:10px 10px 10px;??????????????????? 上??? 左右?? 下
• padding:10px 10px 10px 10px;?????????? 上??? 右?? 下? 左

?

margin

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

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

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

總結(jié)

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

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