***********************回顧一下*****************************
---行級佈局----
1. div是塊級元素，獨佔一行空間，寬度預設沾滿父級元素
2. div的高度由子級元素來決定
---列級佈局---
1. 浮動元素與兄弟元素之間的關係
    1）a浮動，b不浮動，b鑽到a下面
    2）a不浮動，b浮動，b的上邊界和a的下邊界重疊
    3）a浮動，b浮動，a,b一行顯示，當行內放不下的時候b另起一行

2. 浮動元素的邊距
    1) a,b不浮動，a設定外邊距-下，b設定外邊距-上，共用（誰大用誰的）
    2) a,b浮動，a設定外邊距-右，b設定外邊距-左，不共用（兩者和是他們的邊距）

    margin上下值在行佈局時共用，浮動後不再共用

3. 浮動元素與父級元素之間的關係
    1) 層級關係
        <div class="outer">
            <div class="inner"></div>
            <div class="inner"></div>
        </div>
        <div class="outer2">
        
        </div>
    2) 高度寬度的問題？
        1.高度應該由子級元素來指定
            當子級浮動的時候，無法撐開父級的高度。只能由父級自己指定（overflow:hidden）
        2.寬度應該由父級元素來指定
**********************************************************        
CSS    
    1, 基本佈局
        佈局順序
            由上至下，由左至右，由內至外
        塊居中
            1）不能浮動
            2）要居中的塊必須小於父級元素
            3）利用margin-left margin-right的自動值來居中
        佈局級別：
            1）行佈局級（橫排）
            2）列布局級（浮動佈局）
                1.設定浮動 float
                    任何元素都可以浮動，可以改變普通文件流的排列方式，可以使得塊元素在同一行中排列，使我們的佈局更加方便，浮動是脫離文件流的，也就是其他元素視而不見。

                    浮動何時停止？
                        1. 當遇到一個浮動元素後
                        2. 當遇到父級元素後
                    多個盒子都浮動後，就產生了塊級元素水平排列的效果
                    多個浮動元素不會相互覆蓋
                    若包含的容器太窄，無法容納水平排列的多個浮動元素，那麼最後的浮動盒子會向下移動，但如果浮動元素的高度不同，那麼它們向下移動時可能會被卡住。
                    float:
                    left     元素向左浮動。
                    right     元素向右浮動。
                    none     預設值。元素不浮動，並會顯示在其在文字中出現的位置。
                2. 清理浮動
                    clear
                    left     在左側不允許浮動元素
                    right     在右側不允許浮動元素
                    both     在左右兩側均不允許浮動元素
                        
                3. 最佳實踐：
                    1) 假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。div的順序是HTML程式碼中div的順序決定的
                    2) 高度儘量給子級，父級高度自動
                    3) 子級浮動，父級未浮動，父級高度無法依賴子級，這時父級需要自己新增高度（overflow:hidden）。
                    4) margin上下值在行佈局時共用，浮動後不再共用
                    5) clear 清除浮動物件對當前物件的影響


        PS切片
             裁切工具->切片工具


    2，CSS常見的樣式屬性和值 (dreamweaver)
          1）CSS 尺寸屬性
             height    設定元素高度。    
             width    設定元素的寬度。
             max-height    設定元素的最大高度。    
             max-width    設定元素的最大寬度。    
             min-height    設定元素的最小高度。    
             min-width    設定元素的最小寬度。    

        2） 字型屬性
            font-family字型族科
                宋體 SimSun    黑體 SimHei
                微軟雅黑 Microsoft YaHei
                微軟正黑體 Microsoft JhengHei
                新宋體 NSimSun
                新細明體 PMingLiU
                細明體 MingLiU
                標楷體 DFKai-SB
                仿宋 FangSong
                仿宋_GB2312 FangSong_GB2312
                楷體_GB2312 KaiTi_GB2312
             font-size    字型大小
            font-style    字型風格
                normal    正常;italic  斜體;oblique  傾斜
            font-weight字型加粗
                normal  正常;bold  粗體;bolder 更粗;lighter  更細
            text-decoration 規定新增到文字的修飾 ：
                none         預設。定義標準的文字。
                underline     定義文字下的一條線。
                overline     定義文字上的一條線。
                line-through定義穿過文字下的一條線。
                blink         定義閃爍的文字。

        3） 顏色
            color    設定文字的顏色
            opcity    設定透明度
            所有瀏覽器都支援 opacity 屬性。
            註釋：IE8 以及更早的版本支援替代的 filter 屬性。
            例如：filter:Alpha(opacity=50)。
            一般兩個屬性一起寫，保證相容性
            opacity：0.5;
            filter:Alpha(opacity=50)
        4） 背景
            設定元素的背景顏色。background-color:#CCC;
            background-image    
                設定元素的背景影象。
                url(bgimage.gif);
            background-repeat    
                設定是否及如何重複背景影象。
                repeat     預設。背景影象將在垂直方向和水平方向重複。
                repeat-x     背景影象將在水平方向重複。
                repeat-y     背景影象將在垂直方向重複。
                no-repeat     背景影象將僅顯示一次。
                inherit     規定應該從父元素繼承 background-repeat 屬性的設定。    
            background-attachment
                設定背景影象是否固定或者隨著頁面的其餘部分滾動。
                fixed    固定    
                scroll    滾動
            background-position    
                設定背景影象的開始位置。這個屬性設定背景原影象（由 background-image 定義）的位置，    背景影象如果要重複，將從這一點開始。您需要把 background-attachment屬性設定為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作。
                  橫向關鍵字： left center right
                  縱向關鍵字： top center bottom
                百分比：
                  左上角是 0% 0%。右下角是 100% 100%。
            background
                簡寫屬性在一個宣告中設定所有的背景屬性。如果不設定其中的某個值，也不會出問題，比如 background:#ff0000 url('smiley.gif'); 也是允許的。

            圖片精靈技術：
                也叫CSS背景圖片精靈技術，是將多張背景圖片放到一個圖片中，通過定位的方式來獲取響應位置的圖片，使得一個圖片一次載入，多次使用，使得頁面下載速度加快

        5） 邊框屬性
            border-style  設定4個邊框的樣式
                dotted     定義點狀邊框。在大多數瀏覽器中呈現為實線。
                solid     定義實線。
                double     定義雙線。
                none     定義無邊框
                ...
                如果4個值都給定了，分別應用於上，右，下;
                左如果給定1個值，應用於各邊;
                如果給定2個值，第一個值應用於上下邊，第二個值應用於左右邊
            border-width  設定4個邊框的寬度
                值為關鍵字或者長度  medium,thin,thick
            border-color  設定邊框顏色
            border  在一個宣告設定所有的邊框屬性。
            border:1px solid #ff0000
        6） 滑鼠游標屬性
            cursor    屬性規定要顯示的游標的型別（形狀）。
                none    無
                auto     預設。瀏覽器設定的游標。
                pointer 游標呈現為指示連結的指標（一隻手）
                wait     此游標指示程式正忙（通常是一隻表或沙漏）。
                help     此游標指示可用的幫助（通常是一個問號或一個氣球）。
        7） 列表屬性
            list-style         在一個宣告中設定所有的列表屬性。
            list-style: square inside url('/i/eg_arrow.gif')
            list-style-image     將圖象設定為列表項標記。
            list-style-image:url("/i/arrow.gif");
            list-style-position 設定列表項標記的放置位置。
            inside     列表專案標記放置在文字以內，且環繞文字根據標記對齊。
            outside 預設值。保持標記位於文字的左側。列表專案標
                記放置在文字以外，且環繞文字不根據標記對齊。
            list-style-type     設定列表項標記的型別。
                none     無標記。
                disc     預設。標記是實心圓。
                circle     標記是空心圓。
                square     標記是實心方塊。
                decimal 標記是數字。
                ower-roman    小寫羅馬數字(i, ii, iii, iv, v, 等。)
                upper-roman    大寫羅馬數字(I, II, III, IV, V, 等。)
                lower-alpha    小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
                upper-alpha    大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
                lower-latin    小寫拉丁字母(a, b, c, d, e, 等。)
                upper-latin    大寫拉丁字母(A, B, C, D, E, 等。)
        8）表格
            優先順序：
                td,th-->tr-->tbody,thead,tfoot-->table
            color,font-size
            text-align    文字對齊
            background
            border         邊框，只能用於table,th,td
            margin         間距，只能用於table,caption
            padding     內間距，只能用於th,td
            width         寬，只能用於table,td,th
            height         高，只能用於table,td,th、可以用於tr並且優先順序高於td
            border-collapse:
                separate     預設值，分開
                collapse     邊框合併
                inherit        從父元素中繼承該屬性
            table-layout 寬度型別：
                fixed    固定寬度
                auto    自動寬度
            caption-side 標題位置：
                top/left/right/botton
    3. div+css
        div+css是一種網頁的佈局方法。
        標籤div span無特殊含義，配合css才具有特殊的樣式
        網頁就是由許多個盒子通過不同的排列方式堆積而成，網頁上每個元素都被瀏覽器看成是一個矩形的盒子，這個盒子由元素的內容，填充，邊框，邊界組成。預設盒子邊框無，背景色透明，預設看不到盒子
        1） 盒子模型
            margin  外邊距，定義區塊外邊界與上級元素距離的屬性，值為長度
            padding 內邊距（填充），是設定區塊的內邊距的屬性，是邊框和元素內容之間的間隔距離
            border  邊框，在一個宣告設定所有的邊框屬性。
            width   盒子的寬度
            height  盒子的高度
            內容    盒子裡面所包含的元素和內容

            屬性值：
                1個：上下左右都是該值
                2個：前者表示上下的值，後者表示左右的值
                3個：前者表示上邊的值，中間表示左右的值，後者表示下邊的值
                4個：上右下左，順時針排序
        2） 不同瀏覽器解析盒子模型的差異：
            IE5盒子  width = 內容 + border + padding
                盒子佔據的寬度 = margin*2+width
                盒子佔據的高度 = margin*2+height
                盒子實際的寬度 = width
                盒子實際的高度 = height

            W3C盒子 width = 內容
                盒子佔據的寬度 = margin*2+border*2+padding*2+width
                盒子佔據的高度 = margin*2+border*2+padding*2+height
                盒子實際的寬度 = border*2+padding*2+width
                盒子實際的高度 = border*2+padding*2+height
        3） 設定瀏覽器去遵循w3c標準
            只需要在網頁的頂部加上DOCTYPE宣告即可
            !important的使用
            p{
                color:red !important;
                color:blue;
            }
            當不加!important;的時候，後者覆蓋前者，當加上之後說明第一個,樣式優先順序更高，採用前者，但是Ie6不支援!important;
        4）其他屬性
            border-width    邊框高度
            border-color    邊框顏色
            border-style    邊框樣式
                none    無樣式
                dotted    點線
                dashed    虛線
                solid    實線
                double    雙線
                groove    槽線
                ridge    脊線
                inset    內凹
                outset    外凸
        5）關於填充和邊框的常見問題
            1. 大部分的html元素的盒子屬性（margin,padding）預設值為0，有少數html元素的（marigin，padding不為0）例如：body,p,ul,li,form等標籤，有時需要將其先設定為0
            2. 相鄰兩個兄弟元素的外邊框會發生合併，一般佈局會設定他們的外邊距
            3. 如果沒有設定父級元素的內邊距或邊框，那麼它的子元素的邊界會和其合併。
            4. 設定一個塊元素居中： marigin:0 auto;
            5. margin可以設定負值，padding不可以設定
            6. 行內元素的margin值，只有左右值，沒有上下值
        6）行內元素與塊級元素
            行內元素
                行內元素不可以設定寬（width）和高（height【但是可以通過line-height設定】），但可以與其他行內元素位於同一行，行內元素內一般不可以包含塊級元素。行內元素的高度一般由元素內部的字型大小決定，寬度由內容的長度控制。常見的行內元素有:em,font,b,span,a,strong
            塊級元素
                塊狀元素排斥其他元素與其位於同一行，可以設定元素的寬（width）和高（height），塊級元素一般是其他元素的容器，可容納塊級元素和行內元素。常見的塊級元素有div, p ,h1~h6等

                IE6/7及IE8混雜模式中，text- align:center可以使塊級元素也居中對齊。其他瀏覽器中，text-align:center僅作用於行內內容上。
            改變元素型別：
                display
                    可以將一個行級元素轉換為塊級元素，但是這種轉換並不能改變元素本質，轉換的只是CSS的盒子的外觀
                    需要轉換盒子型別的情況：
                    水平的列表選單，不斷行的標題，隱藏元素
                    none     隱藏元素。不會被顯示，不佔空間
                    block    塊級元素。獨佔一行空間
                    inline  預設。此元素會被顯示為內聯元素，元素前後沒有換行符。
                    inline-block    兼有塊級和行級元素特性，在行內顯示但是可以設定寬高

                    list-item         此元素會作為列表顯示。

                    table     此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。
                    inline-table     此元素會作為內聯表格來顯示（類似 <table>），表格前後沒有換行符。
                    table-row-group     此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。
                    table-header-group     此元素會作為一個或多個行的分組來顯示（類似 <thead>）。
                    table-footer-group     此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。
                    table-row         此元素會作為一個表格行顯示（類似 <tr>）。
                    table-column     此元素會作為一個單元格列顯示（類似 <col>）
                    table-cell         此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）
                    table-caption     此元素會作為一個表格標題顯示（類似 <caption>）
                    inherit         規定應該從父元素繼承 display 屬性的值。
                float,position
                    應用了浮動和絕對定位的元素，變成了塊級元素，因此display屬性一般被忽略
                如果元素應用了display:none，該元素（以及子元素）被隱藏起來，對其再使用float,position將不再有意義



    4.和頁面佈局相關的CSS屬性
        1）定位屬性：
            絕對定位 absolute:
                是元素完全脫離文件流，頁面中的其他元素視它不存在，絕對定位元素不會影響到其他元素。絕對定位是參照距離他最近的父級有定位屬性的元素，如果父級元素沒有定位屬性，則會參照文件
            相對定位 relative:
                是參照元素原來的位置進行移動，元素原來的空間位不變，元素在移動時會覆蓋其他元素。
            固定定位 fixed:
                將元素固定在視窗中的某個位置，絕對定位是相對於元素的，固定定位是相對於視窗的，會隨著視窗的一定而移動。在低版本IE中不支援該屬性
            預設定位 static:
                預設屬性，指定了元素按照常規的文件流進行定位，靜態定位元素不允許使用top,left和類似其他屬性定位。position的值為static為非定位元素，為其他值時候為定位元素，因為static元素不能自定義元素的位置，而其他可以

        top:  層距離頁面頂點縱座標的距離
        left: 層距離頁面定點橫座標的距離
        text-align:    橫向排列 left right center
        line-height:行高，內容都在行的中間，可以使用這個屬性設定內容垂直居中
        z-index ：  第三個維度 ，值高的元素會覆蓋值低的元素。該屬性可以使得元素脫離文件流，可能會覆蓋其他元素。
        
        
       
        float:  設定區塊浮動屬性
        clear:  指定一個元素是否允許有元素漂浮在它的旁邊

    4，盒子模型的浮動
        

    5，css規範
        1）overflow:    設定層內的內容超出層所能容納的範圍處理方式。
            visible :預設值，如果需要，內容可以溢位並繪製在元素的邊框的外面
            hidden  :裁剪掉和隱藏溢位的內容。
            scroll  :元素一直顯示水平和垂直滾動條，如果內容超出元素尺寸，允許使用者通過滾動來檢視額外的內容。
            auto    :滾動條只在內容超出元素尺寸時顯示，而非一直顯示。
        2）display :   屬性設定元素如何顯示。
            none     此元素不會被顯示【瀏覽器會認為這個元素不存在】
            block     此元素將顯示為塊級元素，此元素前後會帶有換行符。
            inline     預設。此元素會被顯示為行內元素，元素前後沒有換行符。
            inline-block    行內塊級元素
            table     此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。
            table-row 此元素會作為一個表格行顯示（類似 <tr>）。
            table-cell此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）
        3）visiblity:  設定元素是否可見
            visible 預設。元素框是可見的。
            hidden     元素框不可見，但仍然影響佈局【瀏覽器認為該元素存在，但是不顯示】
        4）具有padding,margin值的元素
            1. h1~h6
            2. dl,dd
            3. ol,ul
            4. form
                在Chrome,Firefox,Safari,Opera,IE8中沒有預設的margin,padding。但是在IE7以及以下版本有預設margin:19px 0px
                表單控制元件一般都有預設的padding和marigin
            5. p
            6. body
        5）IE瀏覽器需要注意的相容性問題
            1. IE6雙倍邊距（？）
                在一排浮動的元素中，如果一個元素設定了margin-left在ie瀏覽器中就會顯示第一個塊有雙倍的邊距。
               解決方案：
                   1）給第一個子元素設定display:inline
                   2）利用CSS hack單獨設定在ie6下的左邊距
            2. IE瀏覽器中會自動給添加了連線的圖片加邊框
        6）頁面佈局中規範
            頁面佈局中所有的塊級元素必須要設定寬高
            文字和圖片在一行佈局時可以統一採用塊元素的方式進行佈局
            標籤不能隨意巢狀
            控制頁面樣式時，儘量少用標籤選擇器
            圖片必須設定寬高屬性
        7）CSS命名規範
            通用基類：
                base.css
                或者
                base.atom.css
                base.reset.css
                base.layout.css
            公共模型
                model.css
                或者
                model.box.css
                model.list.css
                model.form.css
                model.content.css
            頁面樣式
                page.ccss
                或者
                page.index.css
            整體結構
                頭        head/header
                內容      content/container
                導航    nav
                    主導航    mainnav
                    邊導航    sidebar
                    左右導航    leftsidebar.rightsidebar
                    頂導航    topnav
                    子選單    submenu
                欄目    column
                左右中     left,right,center
                頁面主體main
                尾        footer/foot
                側欄    sidebar
        8）屬性書寫順序
              定位屬性（比如：display， position， float， clear， visibility， table-layout等）
              自身屬性（比如：width， height， margin， padding， border等）
              文字屬性（比如：font， line-height， text-align， text-indent， vertical-align等）
              其他屬性（比如：color， background， opacity， cursor，content， list-style， quotes等）