前端學習之路之CSS （四）

 Infi-chu:

http://www.cnblogs.com/Infi-chu/

CSS盒子模型
    概念：CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
    如下所示：
    
    不同部分的說明：
        Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
        Border(邊框) - 圍繞在內邊距和內容外的邊框。
        Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
        Content(內容) - 盒子的內容，顯示文本和圖像。

    元素的寬度和高度：
        例子：300px (寬)+ 50px (左 + 右填充)+ 50px (左 + 右邊框)+ 50px (左 + 右邊距)= 450px
        總結：
            最終元素的總寬度計算公式是這樣的：總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
            元素的總高度最終計算公式是這樣的：總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
    
CSS邊框：
    邊框樣式：
        border-style屬性用來定義邊框的樣式。
        常用的值：
            none: 預設無邊框
            dotted: 定義一個點線邊框
            dashed: 定義一個虛線邊框
            solid: 定義實線邊框
            double: 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
            groove: 定義3D溝槽邊框。效果取決於邊框的顏色值
            ridge: 定義3D脊邊框。效果取決於邊框的顏色值
            inset:定義一個3D的嵌入邊框。效果取決於邊框的顏色值
            outset: 定義一個3D突出邊框。 效果取決於邊框的顏色值
            
    邊框寬度：
        通過 border-width 屬性為邊框指定寬度。
        為邊框指定寬度有兩種方法：
            可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)；
            或者使用 3 個關鍵字之一，它們分別是 thick 、medium（預設值） 和 thin。
        註：CSS 沒有定義 3 個關鍵字的具體寬度，所以一個用戶可能把 thick 、medium 和 thin 分別設置為等於 5px、3px 和 2px，而另一個用戶則分別設置為 3px、2px 和 1px。    
        

        p.one
        {
            border-style:solid;
            border-width:5px;
        }
        p.two
        {
            border-style:solid;
            border-width:medium;
        }

    
    邊框顏色：
        border-color屬性用於設置邊框的顏色。可以設置的顏色：
            name - 指定顏色的名稱，如 "red"
            RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
            Hex - 指定16進位值, 如 "#ff0000"
        註： border-color單獨使用是不起作用的，必須得先使用border-style來設置邊框樣式。
            

        p.one
        {
            border-style:solid;
            border-color:red;
        }
        p.two
        {
            border-style:solid;
            border-color:#98bf21;
        }

        
    單獨設置各個邊：
    border-style屬性可以有1-4個值：
        border-style:dotted solid double dashed;
            上邊框是 dotted
            右邊框是 solid
            底邊框是 double
            左邊框是 dashed

        border-style:dotted solid double;
            上邊框是 dotted
            左、右邊框是 solid
            底邊框是 double

        border-style:dotted solid;
            上、底邊框是 dotted
            右、左邊框是 solid

        border-style:dotted;
            四面邊框是 dotted
    
    常用邊框屬性：
        border     簡寫屬性，用於把針對四個邊的屬性設置在一個聲明。
        border-style     用於設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。
        border-width     簡寫屬性，用於為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。
        border-color     簡寫屬性，設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色。
        border-bottom     簡寫屬性，用於把下邊框的所有屬性設置到一個聲明中。
        border-bottom-color     設置元素的下邊框的顏色。
        border-bottom-style     設置元素的下邊框的樣式。
        border-bottom-width     設置元素的下邊框的寬度。
        border-left     簡寫屬性，用於把左邊框的所有屬性設置到一個聲明中。
        border-left-color     設置元素的左邊框的顏色。
        border-left-style     設置元素的左邊框的樣式。
        border-left-width     設置元素的左邊框的寬度。
        border-right     簡寫屬性，用於把右邊框的所有屬性設置到一個聲明中。
        border-right-color     設置元素的右邊框的顏色。
        border-right-style     設置元素的右邊框的樣式。
        border-right-width     設置元素的右邊框的寬度。
        border-top     簡寫屬性，用於把上邊框的所有屬性設置到一個聲明中。
        border-top-color     設置元素的上邊框的顏色。
        border-top-style     設置元素的上邊框的樣式。
        border-top-width     設置元素的上邊框的寬度。
        
CSS輪廓：
    CSS輪廓：
        輪廓（outline）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用；CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
        如圖所示：
    
    所有屬性：
        屬性                             說明                                             值                                         CSS
        outline             在一個聲明中設置所有的輪廓屬性     outline-color、outline-style、outline-width、inherit                 2
        outline-color             設置輪廓的顏色                 color-name、hex-number、rgb-number、invert、inherit                     2
        outline-style             設置輪廓的樣式         none、dotted、dashed、solid、double、groove、ridge、inset、outset、inherit     2
        outline-width             設置輪廓的寬度                 thin、medium、thick、length、inherit                                 2
        
CSS外邊距：
    margin：
        margin 清除周圍的（外邊框）元素區域。margin 沒有背景顏色，是完全透明的；margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。
        如圖所示：
    
        可以輸入的值：
            值             說明
            auto     設置瀏覽器邊距，這樣做的結果會依賴於瀏覽器
            length     定義一個固定的margin（使用像素，pt，em等）
            %         定義一個使用百分比的邊距
    
    單邊 外邊距屬性：
        margin-top:100px;
        margin-bottom:100px;
        margin-right:50px;
        margin-left:50px;
    
    簡寫：
        margin:25px 50px 75px 100px;
            上邊距為25px
            右邊距為50px
            下邊距為75px
            左邊距為100px

        margin:25px 50px 75px;
            上邊距為25px
            左右邊距為50px
            下邊距為75px

        margin:25px 50px;
            上下邊距為25px
            左右邊距為50px

        margin:25px;
            所有的4個邊距都是25px
            
CSS填充：
    Padding：
        當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充；單獨使用 padding 屬性可以改變上下左右的填充。
        如圖所示：
    
        可以輸入的值：
            值             說明
            length         定義一個固定的填充(像素, pt, em,等)
            %             使用百分比值定義一個填充
    
    填充 單邊內邊距：
        padding-top:25px;
        padding-bottom:25px;
        padding-right:50px;
        padding-left:50px;
        
    簡寫：
        padding:25px 50px 75px 100px;
            上填充為25px
            右填充為50px
            下填充為75px
            左填充為100px

        padding:25px 50px 75px;
            上填充為25px
            左右填充為50px
            下填充為75px

        padding:25px 50px;
            上下填充為25px
            左右填充為50px

        padding:25px;
            所有的填充都是25px

CSS分組和嵌套：
    分組選擇器：
        在樣式表中有很多具有相同樣式的元素；為了儘量減少代碼，你可以使用分組選擇器；每個選擇器用逗號分隔。

        
        h1,h2,p
        {
            color:green;
        }

    
    嵌套選擇器：
        它可能適用於選擇器內部的選擇器的樣式。

        
        /*
        p{ }: 為所有 p 元素指定一個樣式。
        .marked{ }: 為所有 class="marked" 的元素指定一個樣式。
        .marked p{ }: 為所有 class="marked" 元素內的 p 元素指定一個樣式。
        p.marked{ }: 為所有 class="marked" 的 p 元素指定一個樣式。
        */
        p
        {
            color:blue;
            text-align:center;
        }
        .marked
        {
            background-color:red;
        }
        .marked p
        {
            color:white;
        }
        p.marked{
            text-decoration:underline;
        }

CSS尺寸：
    常用屬性：
        屬性                 描述
        height             設置元素的高度。
        line-height     設置行高。
        max-height         設置元素的最大高度。
        max-width         設置元素的最大寬度。
        min-height         設置元素的最小高度。
        min-width         設置元素的最小寬度。
        width             設置元素的寬度。

CSS Display(顯示) 與 Visibility（可見性）：
    隱藏元素 - display:none或visibility:hidden：
        隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"。但是請註意，這兩種方法會產生不同的結果；visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。
        display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面佈局中消失。
        
        h1.hidden {visibility:hidden;}
        h1.hidden {display:none;}
        
    CSS Display - 塊和內聯元素：
        塊元素是一個元素，占用了全部寬度，在前後都是換行符。
        塊元素的例子：
            <h1>
            <p>
            <div>
        內聯元素只需要必要的寬度，不強制換行。
        內聯元素的例子：
            <span>
            <a>

    如何改變一個元素顯示：
        可以更改內聯元素和塊元素：
            把列表項顯示為內聯元素：
            li {display:inline;}
            
            把span元素作為塊元素：
            span {display:block;}
            
CSS定位：
    五大屬性：static、relative、fixed、absolute、sticky
    
    static定位：
        HTML元素的預設值，即沒有定位，元素出現在正常的流中；靜態定位的元素不會受到 top, bottom, left, right影響。    

        div.static {
            position: static;
            border: 3px solid #73AD21;
        }

        
    fixed定位：
        元素的位置相對於瀏覽器視窗是固定位置；即使視窗是滾動的它也不會移動    
      

 p.pos_fixed
        {
            position:fixed;
            top:30px;
            right:5px;
        }

        註：Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持；Fixed定位使元素的位置與文檔流無關，因此不占據空間；Fixed定位的元素和其他元素重疊。
        
    relative 定位：
        相對定位元素的定位是相對其正常位置。

        h2.pos_left
        {
            position:relative;
            left:-20px;
        }
        h2.pos_right
        {
            position:relative;
            left:20px;
        }

    absolute 定位：
        絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於<html>:

h2{
            position:absolute;
            left:100px;
            top:150px;
        }

    註：absolute 定位使元素的位置與文檔流無關，因此不占據空間；absolute 定位的元素和其他元素重疊。
    
    sticky 定位
        position: sticky; 基於用戶的滾動位置來定位；粘性定位的元素是依賴於用戶的滾動，在 position:relative 與 position:fixed 定位之間切換；它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed；它會固定在目標位置；元素定位表現為在跨越特定閾值前為相對定位，之後為固定定位；這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
       

div.sticky {
            position: -webkit-sticky; /* Safari */
            position: sticky;
            top: 0;
            background-color: green;
            border: 2px solid #4CAF50;
        }

    
    重疊的元素：
        元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素；z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或後面）；一個元素可以有正數或負數的堆疊順序
    
CSS Overflow：
    CSS overflow 屬性可以控制內容溢出元素框時在對應的元素區間內添加滾動條。
    
    屬性：
            值             描述
        visible     預設值。內容不會被修剪，會呈現在元素框之外。
        hidden         內容會被修剪，並且其餘內容是不可見的。
        scroll         內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。
        auto         如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。
        inherit     規定應該從父元素繼承 overflow 屬性的值。
        
CSS浮動：
    什麼是浮動：
        CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。Float（浮動），往往是用於圖像，但它在佈局時一樣非常有用。

    .eg
    {
        float:left;
        width:110px;
        height:90px;
        margin:5px;
    }