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

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

從內(nèi)往外：

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

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

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

border：盒子的邊框；

margin：盒子的外邊距

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


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

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

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

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

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

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

6） padding、boder、margin 的屬性既可以寫綜合屬性，也可以按方向分開寫：

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

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

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

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

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

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

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

3）border的三個要素可按方向拆開寫：

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都是不能繼承的，想繼承要顯式地寫：inherit。
1、背景色：background-color: orange;
2、背景圖片：background-image: url(圖片路徑);

3、屬性細(xì)節(jié)：
1）默認(rèn)地，背景圖像會平鋪，即反復(fù)重復(fù)來填滿整個背景空間，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è)置來處理

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

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

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



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



2） 通欄banner : center top

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



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

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

3） background-attachment:fixed；背景是否被固定，固定了，則不會被滾動條滾走。

4） background屬性也是個綜合屬性，可將上述所有屬性寫在一起，與border類似
例：

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

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