1偏窝、頁面的背景是固定的收恢，不隨頁面的滾動而滾動

背景固定有兩種實現(xiàn)方式武学，一種是元素 fixed，其背景不做特殊處理伦意；另一種是背景固定火窒，元素不做特殊處理。

2驮肉、同時放大和縮小窗口可以發(fā)現(xiàn)頁面背景也會隨之放大和縮小

第二種實現(xiàn)方式

3熏矿、居中外包圍框

頁面的外包圍框有幾個作用：

（1）居中內(nèi)容

（2）圍框里所有 block 元素的默認寬度是充滿父容器的寬度，不需要個別為每個元素設置寬度离钝。

我們之后支持響應式布局只需要調(diào)整外包圍框的寬度即可改變內(nèi)部所有元素的寬度票编，非常方便。

居中外包圍框

width:960px;設置外包圍框的寬度卵渴。之所以設置為960px,是因為一般瀏覽器寬為1024慧域，加上滾動條就為1000-1004。960給滾動條和其他瀏覽器UI預留了足夠的空間浪读，并且960這個數(shù)字可以被2,3,4,5,6,8,10,12等數(shù)字除盡昔榴，方便做網(wǎng)絡。

margin:0 auto;讓瀏覽器自動計算左右邊距碘橘，使外包圍框居中互订。這個居中技巧這能在設置了寬度的容器時使用。

3痘拆、針對塊級元素仰禽，行元素的不同居中技巧。

塊級元素：p, div, h1, h2, table, ol 等等错负。

行元素：在文字流里面顯示坟瓢，瀏覽器不會添加斷行。默認寬度剛好適應內(nèi)容犹撒。span, img, a, button, input 等等折联。

居中

centered-image是將一個行元素居中，首先將img用display:block;變?yōu)閴K級元素识颊，再用margin: 0 auto;居中塊元素（元素一定要有width屬性）诚镰。如果想要居中一個行元素（比如img），但不影響同個容器里面的其他元素祥款，那你可以選擇把它設定為塊元素來居中清笨。

centered-container使用text-align居中,必須經(jīng)過一個元素的父元素來居中(這里的父元素為contianer,子元素是包含在里面的p,h,img，進過對父元素設置center來使p,h,img居中刃跛，所以text-aligh是設置在父元素上的屬性)抠艾，這會影響在這個容器里所有的元素。?

4桨昙、text-shadow屬性

? ? ? text-shadow:h-shadow?v-shadow?blur?color检号；

? ? ? border-radius屬性

? ? ? border-radius:1-4 length|%/1-4 length|%;

如果省略 bottom-left腌歉，則與 top-right 相同。如果省略 bottom-right齐苛，則與 top-left 相同翘盖。如果省略 top-right，則與 top-left 相同凹蜂。

5馍驯、用 margin 調(diào)整間距（解決 margin collapse 的問題）

margin調(diào)整間距

在 .container 上面加上的padding: 1px;有點神奇。假如沒有加上這個padding: 1px;玛痊，你會發(fā)現(xiàn)效果變成了這樣：

沒有padding:1px;

這是因為容器本身的 margin-top 會和第一個子元素的 margin-top 折疊在一起汰瘫。在容器和top這個字符之間的空白其實是 子元素的 margin-top。同樣的卿啡，父元素的 margin-bottom 會和最后一個子元素的 margin-bottom 也折疊一起了吟吝。

6、CSS屬性排列順序規(guī)則

定位屬性: position, float, z-index, clear

盒模型相關(guān)屬性: padding, margin, display, width, height, border

字體相關(guān)

CSS2 視覺相關(guān)屬性 (background)

CSS3 屬性 (border-radius, box-shadow)

7颈娜、

分頁

8剑逃、

面包屑

9、

下拉菜單

10官辽、去除列表風格蛹磺，且同行展示

列表

list-style是針對整個列表樣式而言的，display針對ul里的li而言的同仆。li默認是塊元素萤捆，需要元素在同行顯示的把它們變成行元素即可。

11俗批、inline-block

?inline 元素只能設置左右內(nèi)邊距和外邊距俗或，而不能設置其高度和上下內(nèi)外邊距。和垂直高度有關(guān)的 padding, margin, height 都無效岁忘。這時可以使用display: inline-block辛慰。inline-block元素可以簡單理解為對外表現(xiàn)為行元素，而對內(nèi)表現(xiàn)為塊元素干像。上下 padding, margin 有效,容器的 text-align 會對它居中帅腌。

12、用 Float 布局來占滿父容器的寬度

html部分

CSS部分

overflow: hidden 強制容器有足夠的高度包圍飄動元素.

13麻汰、clearfix

overflow:visible

上圖是將overflow的屬性設置為visible的效果速客，此時容器高度為0。另外一個常見的解決方案 clearfix五鲫。

clearfix

content:""在 clearfix 這個元素內(nèi)部最后加上一個空的偽元素該元素與.child類并列

clear:both使偽元素清除飄動元素

這里display:table是為了處理margin collapse溺职，參考這篇文章http://nicolasgallagher.com/micro-clearfix-hack/

想要撐高容器的話，我們可以在飄動元素后面加上一個普通元素。clearfix 利用 :after 偽元素創(chuàng)建了一個看不到的元素辅愿。clearfix 和之前介紹的overflow: hidden效果一模一樣智亮，但背后的原理其實不一樣。你在實現(xiàn)的時候可以按情況選一個方便的來使用点待。

偽元素：CSS 偽元素用于向某些選擇器設置特殊效果。":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容弃舒。

偽元素的用法

使用偽類

14癞埠、float 布局避免內(nèi)容包圍飄動元素

文字部分包圍了圖片

想要的效果

實現(xiàn)

html部分

CSS樣式

15、全局使用 border-box 簡化布局

border-box的特性是 padding 和 border 算在你指定的寬度里面聋呢，所以寬度你說多少就是多少苗踪。下面這張圖對比兩個寬度同樣是 '200px' 的盒子：

正常情況下的盒模型

border-box下的盒模型

html{

box-sizing: border-box

}/*設定 html 為 border-box，通常在圖片布局的時候使用*/

16削锰、使用絕對定位

絕對定位的的適用情況大概是

有一個主要組件通铲，在文件流里面正常布局；這個組件有一個附屬組件 (它的小伙伴)器贩；這個附屬組件的位置相對于主要組件的位置颅夺。

使用絕對定位的例子

按鈕是正常布局的主要組件（relative），菜單附屬在按鈕上用絕對定位(absolute)蛹稍。給絕對定位元素加上寬度就可以避免奇怪的坑吧黄。