web-02-css01

標籤：12px   必須   水平   通過   常見   ack   問題   相對   設定   

1、css常見樣式（聲明）

    1）background：色（color）圖（image）鋪（no repeat）定（fixed）位（center）

        註：顏色的表示方式

            * rgb(0,255,0)

            * rgba(0,233,0,0.3)

            * #aaffaa

    2）border：邊框粗細、形狀、顏色

       border：1px solid red;

       若用上面的合并寫法，表示四個方向的邊框一樣

       分開表示如下：

border-top:粗細 形狀 顏色;
border-right:粗細 形狀 顏色;
border-bottom:粗細 形狀 顏色;
border-left:粗細 形狀 顏色;

       大小的表示方式（單位）：

            -px：像素（指電腦螢幕上的一個點組成）

            -em：倍數（針對原來設定的值進行加倍），如1em等同於當前字型的大小

            -%：百分比

            -in：英寸；cm：厘米；mm：毫米；pt：1/72英寸

            -border-radius:5px;  邊框的邊角

 

2、盒子模型

     盒子在水平方向實際佔用大小：width+padding+border+margin

width:寬度
height:高度
padding：內邊距
margin：外邊距
border：邊框

    註：padding：上 右 下 左;（四個值順時針）

           padding：上 右左 下; （三個值）

           padding：上下 左右;

           padding：上下左右;

      兩個盒子時margin-bottom和margin-top的塌陷，大的包含小的

3、css常見屬性

    1）控制字型

font-family:"微軟雅黑";
font-size:12px;  //字型大小
font-weight:800;  //字型粗細，定義100的整數倍
font-style:italic;  //文字斜體
color:red;   //字型顏色
text-indent:2em;  //縮排兩個字元
text-align:center;  //文字置中
text-decoration:enderline;  //預設值none  文本底線
line-height:1.2em;  //文本行高（其應用情境在input裡面）

        合并寫法：

             font:斜體 粗細 大小 "family";

    2）display（控制內容的顯示方式） 隱藏/顯示

        （1）元素的顯示方式

             --塊元素（div/p/table）

                 特點：獨佔一行，相片順序從上往下，可以設定寬高

                     display:block;

             --行內元素（span/a）

                 特點：可以跟元素共用一行，排列順序從左往右，不可以設定寬高

                     display:inline;

             --行內塊（input/img）

                  特點：排列順序從左往右，可以設定寬高

                     display:inline-block;

               若需要修改元素的預設，可以通過display進行修飾

        （2）隱藏元素的方式：

                display:none;   //隱藏元素並讓出位置

                opacity:0;   //元素完全透明，不讓出位置

 

3、定位

    定義元素相對於正常位置應該出現的位置

    1）流式定位（預設定位）

        區塊層級元素從上往下

        行內元素從左往右

    2）浮動定位——是脫離標準文檔流的

        float:left|right;

         浮動會對下面的節點和父節點有影響

         清除浮動帶來的影響：

clear:left|right|both;  //表示盒子的左，右，兩邊不能有浮動

        總結；哪個元素受到了影響就在哪個元素裡面寫clear

    3）position定位

        -1、position:relative;  相對定位-不脫標（還是原來的位置）

             相當於自己原來的位置移動，結合（top right bottom left）其中的一個或多個一起使用

        -2、position:absolute; 絕對位置-脫標（脫離標準文檔流讓出原來的位置）

             子絕父相：（用於解決盒子定位水平置中問題）

                    子設定絕對位置，父設定相對定位

         -3、position:fixed;   固定定位-脫標（讓出位置）

                   如：將搜尋方塊永遠固定在那個位置

            註：1、絕對位置的參考點是祖先節點，若沒有定位了的祖先節點則相對於最初的包含塊定位

                    2、絕對位置的參考點（若用bottom），參考點是電腦螢幕的左下角

 

4、堆疊順序問題

     z-index:數值;

     註：數值越大，距離使用者越近；必須結合position一起使用

 

web-02-css01