摘要：盒模型，盒模型看待元素的一種方式，它將每個(gè)元素看作由一個(gè)盒子表示。盒子實(shí)際占用的大小是左左右右，屬性細(xì)節(jié)一個(gè)塊元素的默認(rèn)寬度是，表示它會(huì)自動(dòng)延伸占滿(mǎn)可用的空間。表示元素之間的距離，在邊框外部。不能對(duì)和指定顏色，添加任何裝飾。

CSS看待元素的一種方式，它將每個(gè)元素看作由一個(gè)盒子表示。

從內(nèi)往外：

width:內(nèi)容的寬度，而不是盒子的寬度；

height：內(nèi)容的高度，而不是盒子的高度；

padding：盒子的內(nèi)邊距；

border：盒子的邊框；

margin：盒子的外邊距

注：在css中設(shè)置了寬度width，但瀏覽器展現(xiàn)出的元素可能超出你的設(shè)置，因?yàn)樵氐倪吙蚝蛢?nèi)邊距會(huì)撐開(kāi)元素。如下圖所示。


盒子實(shí)際占用的大小是：左border + 左padding + width + 右padding +右border=302px

1） 一個(gè)塊元素的默認(rèn)寬度是”auto”，表示它會(huì)自動(dòng)延伸占滿(mǎn)可用的空間。這就是為什么塊元素默認(rèn)是占滿(mǎn)瀏覽器的整個(gè)寬度。一般，一個(gè)元素的高度也默認(rèn)是auto，在垂直方向上會(huì)延伸內(nèi)容區(qū)，使所有內(nèi)容都可見(jiàn)。

2） width：指定寬度可通過(guò)像素指定具體寬度、或使用百分?jǐn)?shù)（為元素所在容器寬度的一個(gè)百分比，容器可以是body div等）

3） padding：可看作元素的一部分。如果想保持一個(gè)盒子的真實(shí)占有寬度不變，那么加width就要減padding。加padding就要減width。

4） margin：表示元素之間的距離，在邊框外部。

5） 不能對(duì)padding和margin指定顏色，添加任何裝飾。但如果元素設(shè)置了background-color或backgroud-image，則padding區(qū)域會(huì)有背景顏色/圖像，即border以?xún)?nèi)的所有區(qū)域都有顏色。

6） padding、boder、margin 的屬性既可以寫(xiě)綜合屬性，也可以按方向分開(kāi)寫(xiě)：

綜合寫(xiě)：padding: 10px 20px 30px 40px;
如果是4個(gè)數(shù)，則是按上、右、下、左四個(gè)方向；如果只寫(xiě)3個(gè)，2個(gè)數(shù)，則按這個(gè)方向?qū)](méi)寫(xiě)的按對(duì)等的算出來(lái)。只寫(xiě)一個(gè)，表明四個(gè)方向的都一樣。

應(yīng)用：用小屬性層疊大屬性：

padding: 20px;
padding-left: 30px;

有三要素：寬度，樣式，顏色；
1）border: 1px solid red ;如果顏色不寫(xiě)，默認(rèn)是黑色。三要素順序可任意；

2）也可以按三個(gè)要素拆開(kāi)來(lái)寫(xiě)：
border-width:1px; 也可用關(guān)鍵字指定寬度：thin/medium/thick
border-style:solid;

共有8種邊框樣式：
solid（實(shí)線(xiàn)）、double（雙線(xiàn)）、dotted（虛線(xiàn)）、dashed（破折線(xiàn)）、groove、outset、inset、ridge

border-color:red; 與字體顏色設(shè)置方式類(lèi)似

3）border的三個(gè)要素可按方向拆開(kāi)寫(xiě)：

border-top-color:red;
border-bottom-style:dashed;
border-top-width:thick;

4）指定邊框?yàn)閳A角：

border-radius:15px;
border-top-left-radius:0px;
border-radius:50%; 

注：background-color和background-image都是不能繼承的，想繼承要顯式地寫(xiě)：inherit。
1、背景色：background-color: orange;
2、背景圖片：background-image: url(圖片路徑);

3、屬性細(xì)節(jié)：
1）默認(rèn)地，背景圖像會(huì)平鋪，即反復(fù)重復(fù)來(lái)填滿(mǎn)整個(gè)背景空間，background-repeat 屬性可控制這種平鋪行為。

background-repeat;   //圖像在水平和垂直方向上重復(fù)，這是默認(rèn)行為。
background-repeat: no-repeat;   //圖像顯示一次，不重復(fù)
background-repeat: repeat-x;    //x方向重復(fù)；
background-repeat: repeat-y;    //y方向重復(fù)；
background-repeat:inherit;      //按父元素的設(shè)置來(lái)處理

2） 瀏覽器默認(rèn)把圖像放在元素的左上角。background-position 能設(shè)置圖像的位置
background-position：向右移動(dòng)量 向下移動(dòng)量;
表示背景的定位，其值可以是關(guān)鍵字，如：center、 left、 right、 top、 bottom，也可以是百分比、像素值（正負(fù)都可）。

用關(guān)鍵詞描述：

左右： left、 center、right ；
上下： top 、center、bottom
例：background-position: right bottom; 如下圖所示。



應(yīng)用場(chǎng)景：大背景圖在頁(yè)面中居中：
1） 大背景圖居中: center top



2） 通欄banner : center top

用像素描述：
background-position:100px 200px;



像素值可以是負(fù)數(shù)，負(fù)數(shù)即向相反方向移動(dòng)：

應(yīng)用場(chǎng)景：
“css精靈”，英語(yǔ)css sprite，所以也叫做“css雪碧”技術(shù)。是一種CSS圖像合并技術(shù)，該方法是將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背景定位來(lái)顯示需要顯示的圖片部分。
css精靈優(yōu)點(diǎn)，就是減少了http請(qǐng)求。比如4張小圖片，原本需要4個(gè)http請(qǐng)求。但是用了css精靈，小圖片變?yōu)榱艘粡垐D，http請(qǐng)求只有1個(gè)了。

3） background-attachment:fixed；背景是否被固定，固定了，則不會(huì)被滾動(dòng)條滾走。

4） background屬性也是個(gè)綜合屬性，可將上述所有屬性寫(xiě)在一起，與border類(lèi)似
例：

background: red url(1.jpg) no-repeat 100px 100px fixed;

這些屬性不一定要寫(xiě)全，可以省略其中的任意部分。