一、怎么理解盒模型？

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

盒模型是有兩種標(biāo)準(zhǔn)的，一個(gè)是標(biāo)準(zhǔn)模型，一個(gè)是IE模型。 如下圖所示：

在標(biāo)準(zhǔn)模型中，盒模型的寬高只是內(nèi)容（content）的寬高，

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

css如何設(shè)置兩種模型：

二、border

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

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

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

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

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

三、padding

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

四、margin

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

總結(jié)

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

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