7-HTML+CSS頁面佈局重點總結

HTML
    重點：
        1）每種標籤特性
            h1
            table
            tbody
            tr
            td
            ul,ol,dl
            li,dt,dd
            p
            a    
            img

        2）將div轉換爲任意標籤元素
           將任意標籤轉換爲DIV（佈局）
            <div class="h1"></div>
            .h1{
                margin:
                font-size:
                font-weight:
            }
            <div class="a"></div>
            .a{
                text-decoration:
                color:
                cursor:pointer
            }
        3）行內元素，塊級元素
            塊級元素
                div
                h1~h6
                p
            行內元素
                span
                a
                裝飾標籤（i em b strong）

          特殊
            img
                display:block;
                border:0px;
            <a href=""><img></a>
            image
                src    地址
                alt    文字替換
                userMap    dw
            table
            tr
            td
            th
        4) 表單元素(功能)
            form
                input
                    height:    內容高度
                    內邊距:    2px
                    邊框:    1px
                select
                textarea
        功能元素    
    

    <a href="路徑">內容</a>
        相對路徑
            ../
            ./
            images/a.jpg
        決對路徑    http://www.baidu.com
        文件路徑    file:///d:/images/

    表單(功能)
        register.action
        <form action="#" method="get">
            input
                type="text"
                    password
                    radio
                    checkbox
                    button
                    submit
                    reset
                    file
                    ...
            textarea
            select
        </form>

        get
            1) 瀏覽器地址欄的地址上附帶了表單信息
            2) 攜帶數據量比較小
        post
            1) 瀏覽器地址欄的地址上不附帶了表單信息，表單信息附帶在報文中
            2) 攜帶數據量比較大    
DIV
    盒子模型（塊級元素）
        width,height
        padding    內容與邊框距離
        border    邊框
        margin    外邊框        
            
CSS
    1) 選擇器
        標籤選擇器    div li
        類選擇器    .類名  <div class="類名"></div>
        ID選擇器    #ID       <div id="ID"></div>
        層級選擇器    
            子代    父選擇器>子選擇器
                    .one>span
                <div class="one">
                    <span>
                        <strong></strong>
                    </span>
                    <em></em>
                </div>
                <ul class="one">
                
                </ul>
            後代    父選擇器 後臺選擇器
                    .one strong
        複合選擇器
            ul.one
        組合選擇器
            h1,body{}
        ----------------------
        選擇器的優先級(屬性名相同，屬性值不同)
            style="css"
            >層級
            >複合
            >id
            >class
            >tag
        *{ font-size:14px;}
        .header{}
        .header .top{}
        .top .search

        <div class="header">
            <div class="top">
                <table>
                    <tbody>
                        <tr>
                            <td class="search"></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="bottom"></div>
        </div>
        <div class="content"></div>
        <div class="footer"></div>


    2) 佈局級別（方式）
        1. 行級別佈局
            <div></div>
            .header{
                overflow:hidden;
            }
            .header .top{
                height:20px;
            }
            .header .bottom{
                hgeight:80px;
            }
                

        2. 列級別佈局
            
            float

            div 沒有浮動，寬度爲父級元素的寬度
            div 浮動，寬度由子元素決定

            1. 兄弟元素的浮動
                <div class="one"></div>
                <div class="two"></div>

                one浮動，two不浮動，two上移
                one不浮動，two浮動，two不動，two下面的不浮動元素上移
                one浮動，two浮動，onetwo位於一行

            2. 父子元素的浮動
                <div class="outer">
                    <div class="inner"></div>
                </div>
                前提：outer不指定高度
                    outer不浮動，inner不浮動，outer高度由inner決定
                    outer浮動，inner不浮動,outer高度由inner決定
                    outer浮動，inner浮動,outer高度由inner決定
                
                    outer不浮動，inner浮動，outer高度爲0.如果想要被撐，outer{overflow:hidden}
            <div >
                <div div float>
                    <div float></div>
                    <div float></div>
                </div>
            </div>    
            3. 定位佈局(position)
            相對誰？？？
            定位元素
                top
                bottom
                left
                right
            3)特殊佈局
            1.定位元素
                可以使用
                    left
                    top
                    bottom
                    right
            2.非定位元素

            position
                fixed
                    固定定位,相對點爲瀏覽器
                        <div style="position:fixed;right:0px">
                        
                        </div>
                absolute
                    絕對定位，相對點離它最近的父級定位元素
                relative
                    相對定位，相對點是它原本位置

            如果一個元素 position爲fixed,absolute,relative三者之一，那這個元素爲定位元素

    4) 改變元素的默認顯示方式 display
        none
        block    
        inline    
        inline-block(block; float:left)
        行內
            不能指定寬高
        塊級
            可以指定寬高
        元素只要浮動，這個元素肯定是塊級元素
            float:left;
            width:
            heiht:
        
    5. 經驗：
            1) 儘量用塊來包含內聯
            2) 無法確定使用哪個標籤的時候就使用div
            3) 背景與圖片的區別
                背景：爲了修飾使用背景圖像;不佔據空間
                    background-image
                圖片：通常由宣傳意義的圖;佔據空間
                    <img src="">
                    爲了避免圖像周圍有空隙，建議將圖像定義爲塊元素 img{display:block}

            4) 導航（橫向）通常使用無序列表ul li佈局（層級較多，效果好加）
            5) dl/dt/dd 菜單列表（縱向）
            6) 用語義的方式安排標籤，建議在div內包含h1,p,ul,table...標籤來佈局，將div作爲佈局的父元素
            7) div浮動後，寬度隨着內容的增加而增加


    css樣式  1.默認樣式
    儘量消除佈局元素的默認樣式，再添加新樣式
        font
            font-size
            font-family
            font-weight
        border
            border-left
            border-left-style
            border-left-color
            border-left-weith
            border-right
            border-top
            border-bottom
            border-spacing:0px
        margin
            
        padding
            
        text
            text-align
            text-indent
            text-decoration
        list
            list-style
            list-style-imgage
            list-style-position

        cursor:pointer