web-02-css01

來源:互聯網
上載者:User

標籤: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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.