盒模型知識點總結

1、怎麼理解盒模型？

盒子模型是樣式表（css）控制頁面的很重要的概念。全部的頁面的元素均可以當作是一個盒子，佔據必定的頁面空間。佔據的空間要比實際使用的空間要大得多。咱們能夠調整盒子的邊框和距離，來調整盒子（頁面和頁面中的元素）的位置。盒子模型是由內容、邊框、間隙（padding）、間隔（margin）組成。

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

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

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

css如何設置兩種模型：

2、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能夠用來解決邊框的衝突問題。

3、padding

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

4、margin

margin用於控制塊與塊（能夠理解成塊級元素）之間的距離。margin是與content之間的邊距。