1. 程式人生 > >4-基本佈局+CSS樣式屬性+盒子模型

4-基本佈局+CSS樣式屬性+盒子模型

***********************回顧一下*****************************
---行級佈局----
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等)