一、怎么理解盒模型？

盒子模型是樣式表（css）控制頁面的很重要的概念。所有的頁面的元素都可以看成是一個盒子，占據一定的頁面空間。占據的空間要比實際使用的空間要大得多。我們可以調整盒子的邊框和距離，來調整盒子（頁面和頁面中的元素）的位置。盒子模型是由內容、邊框、間隙（padding）、間隔（margin）組成。

盒模型是有兩種標準的，一個是標準模型，一個是IE模型。 如下圖所示：

在標準模型中，盒模型的寬高只是內容（content）的寬高，

而在IE模型中盒模型的寬高是內容(content)+填充(padding)+邊框(border)的總寬高。

css如何設置兩種模型：

二、border

border是元素的外圍，計算元素的寬和高要把border加上。

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

1、color主要是指定border的顏色，一共有256的3次方種顏色供我們選擇。通常是16進制的值，比如紅色是“#FF0000”。

2、width是border粗細程度，可以設置為thin、thick和length，length為具體數值，比如說border:1px #CCC solid;其中1px指的是border的width，默認值是medium，一般瀏覽器解析為2像素。

3、style屬性可以設為none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等，其中none和hodden是不顯示border，hidden可以用來解決邊框的沖突問題。

三、padding

padding用于控制content與border之間的距離，同時設置上下左右的padding時，可以這樣寫padding:10px 20px 10px 10px;分別對應上、右、下、左四個方向的padding，逆時針排序，margin屬性也可以這樣書寫。

四、margin

margin用于控制塊與塊（可以理解成塊級元素）之間的距離。margin是與content之間的邊距。

總結

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

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