成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS屬性用法總結(jié)

soasme / 2043人閱讀

摘要：輪廓不被視為頁面的一部分，因此在應(yīng)用它們時不會導(dǎo)致頁面布局被調(diào)整。

1.background系列屬性

在為元素設(shè)定樣式的時候，往往需要為該元素設(shè)置背景，一般有顏色，背景圖片等．

1.1 背景顏色

在CSS類中使用background-color屬性為元素設(shè)置背景顏色：

    /* CSS */
    .box {
        width: 200px;
        height: 200px;
        background-color: #666;
    }
    a {
        background-color: #999;
    }
    /* HTML */
    

    這是一個a標(biāo)簽
1.2 背景圖片

通過background-image屬性為元素設(shè)置背景圖片：

    /* CSS */
    .box {
        width: 200px;
        height: 200px;
        background-image: url(./圖片);
    }
1.3 背景圖片重復(fù)

通過background-repeat屬性設(shè)置背景圖片是否可重復(fù)：

    /* 不平鋪 */
    background-repeat: no-repeat;
    /* 橫向平鋪 */
    background-repeat: repeat-x;
    /* 縱向平鋪 */
    background-repeat: repeat-y;
1.4 背景定位

當(dāng)背景圖片大小大于容器的時候使用background-position屬性設(shè)置背景圖顯示的位置，其參數(shù)可以是表示位置的參數(shù)由＂左右＂，＂上下＂兩部分組成．

/* 前一個參數(shù)可以為left center right,表示左右 */
/* 后一個參數(shù)可以為top center bottom,表示上下 */
    background-position: center top;

其參數(shù)也可以是像素值

/* 第一個參數(shù)表示向左移動的值，第二個參數(shù)表示向右移動的值，并且支持負(fù)值 */
    background-position: 100px, -100px;

雪碧圖
網(wǎng)頁中往往存在大量的小圖標(biāo)，如果每個小圖標(biāo)多帶帶一個文件會導(dǎo)致單個頁面進(jìn)行過多的網(wǎng)絡(luò)請求，性能地下．所以我們可以把頁面中使用的圖標(biāo)放在一張圖片中，通過定位圖標(biāo)在圖片中的位置來過去圖標(biāo)，這樣每個頁面獲取多個圖標(biāo)只需要一個網(wǎng)絡(luò)請求了．
雪碧圖的使用方法，(假設(shè)我們有一張集成了多個圖標(biāo)的圖片icon.jpg)

為容器設(shè)置寬高，即將要引入的圖標(biāo)的大小

通過background-position屬性設(shè)置圖標(biāo)在圖片中左上角的坐標(biāo)值并取負(fù)(假設(shè)圖標(biāo)為矩形)

1.5 背景圖像是否固定

使用background-attachment:fixed;設(shè)置，將背景圖片固定．

1.6 綜合屬性

當(dāng)要對background的多個屬性進(jìn)行設(shè)置的時候可以使用縮寫的方式．

/* 引入圖片　圖片不重復(fù)　圖像左右定位中間，圖像上下定位中間　背景圖像固定 */
background: url(./a.jpg) no-repeat center center fixed;
2 position系列屬性 2.1 相對定位

設(shè)置方法：position:relative;
什么是相對定位？相對定位可以對元素進(jìn)行微調(diào)，相對自己原來的位置進(jìn)行移動，位置的移動方向通過設(shè)置left,right,top,bottom的值來進(jìn)行移動．
相對定位和下面要說的絕對定位不同，它不會脫標(biāo)．這種形式的移動相當(dāng)于形影分離，身體留在原來的位置（本體看不見但還是占有位置），影子移動．
相對定位的常見用途 微調(diào)元素或做絕對定位的參考：子絕父相．

2.2 絕對定位

設(shè)置方法：position:absolute;
絕對定位根據(jù)參考點進(jìn)行位移，唯一方式于相對定位相同．
參考點:

如果絕對定位的元素沒有父元素，則定位元素的參考點是這樣的，如果使用top描述，參考點為頁面左上角如果使用bottom描述，參考點的是瀏覽器首屏窗口的左下角

如果絕對定位的元素有父元素，則定位元素參考點這樣找，如過父級有定位屬性就以父元素為參考，如果父級沒有定位，就繼續(xù)往上層找．

如果一個盒子設(shè)置了絕對定位，并且往一個方向上位移，那么與這個方向相同的padding會失效．

絕對定位會使元素脫離標(biāo)準(zhǔn)文檔流，如果父元素沒有相對定位，那么脫標(biāo)帶來的影響將無法解決．
絕對定位之后，所有標(biāo)準(zhǔn)流的規(guī)則都不再適用．所以margin: 0 auto;也會失效．

要使絕對定位的盒子居中: left: 50%; 或者 margin-left: 負(fù)的寬度的一半

2.3 固定定位

設(shè)置參數(shù)為：position:fixed;
固定定位就是相對瀏覽器窗口定位.頁面無論如何滾動，這個盒子顯示的位置不變．
并且固定定位的盒子脫標(biāo)．

2.4 z-index

z-index的值表示誰壓著誰．?dāng)?shù)值大的壓著數(shù)值小的．

只有定位了元素，才能有z-index值，也就是說相對定位，絕對定位，固定定位都可以使用z-index值．但是浮動的東西不能使用．

從父現(xiàn)象：子元素的z-index再大，如果父元素的z-index小，還是要被壓在身下．

2.5 static

position:static;
還可以通過static參數(shù)取消定位屬性．

3 文本系列屬性

color 文本顏色

direction 設(shè)置文本方向 參數(shù)rtl表示從右向左，參數(shù)ltr表示從左向右

letter-spacing 設(shè)置字符間距 normal為默認(rèn)值，沒有間隙．length定義字符間固定空間允許負(fù)值．

text-decoration 文本修飾 none:定義標(biāo)準(zhǔn)文本 underline:下劃線 overline:文本上的一條線 line-through:穿過文本的一條線

text-indent 縮進(jìn)元素中文本的首行　length:定義固定縮進(jìn)　%:定義父元素百分比的縮進(jìn)

word-spacing 字間距　normal 定義單詞間的標(biāo)準(zhǔn)空間　length:定義單詞間的固定空間

4 字體系列屬性

font-family 設(shè)置字體集

font-size 設(shè)置字體大小

font-style 設(shè)置字體樣式　

font-weight 設(shè)置字體粗細(xì)

font簡寫

5 列表樣式

list-style-image 使用圖像替換列表標(biāo)記　屬性值:url

list-style-position 列表標(biāo)記位置　屬性值:inside outside

list-style-type 列表標(biāo)記類型

list-style 可以通過簡寫形式設(shè)置

6 輪廓

輪廓是圍繞元素邊框外繪制的線，outline 屬性與 border 屬性不同：outline不是元素尺寸的一部分，元素的總寬度和高度不受輪廓寬度的影響。
輪廓不被視為頁面的一部分，因此在應(yīng)用它們時不會導(dǎo)致頁面布局被調(diào)整。

outline-color 顏色

outline-style 輪廓樣式

outline-width 輪廓寬度

outline 支持使用簡寫方式

7 display(顯示)與visibility(可見性) 7.1 display

inline 設(shè)置元素為行內(nèi)

block 設(shè)置元素為塊級元素

inline-block 設(shè)置元素為行內(nèi)塊元素

none 元素消失，且不占據(jù)原來的位置

7.2 visibility

通過 hidden 設(shè)置元素隱藏，但元素仍然會占有原來的位置．

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112265.html

相關(guān)文章

  • css文本屬性用法總結(jié)

    摘要：稍稍總結(jié)了下文本的一些屬性用法，自己忘記的時候也可以用來查查，不用去查網(wǎng)站那么麻煩。稍稍總結(jié)了下css文本的一些屬性用法，自己忘記的時候也可以用來查查，不用去查網(wǎng)站那么麻煩。 下面是部分總結(jié)，也希望對其他人有用 ? 文本修飾 (1)text-decoration:? 文本修飾（橫線） 4個屬性值 overline?? line-through?? underline? blink (1)ov...

    masturbator 評論0 收藏0

  • CSS 高度(css height)

    摘要：同時也無需使用來實現(xiàn)高度自適應(yīng)。通常默認(rèn)情況下不用再設(shè)置高度值為，對象高度即是自適應(yīng)高度。高度不能設(shè)置百分比高度如設(shè)置百分比的高度無效。擴展閱讀寬度最小高度最大高度轉(zhuǎn)載來源網(wǎng)址DIV+CSS height高度知識教程篇 DIV CSS高度簡介這里的CSS高度是指通過CSS來控制設(shè)置對象的高度。使用CSS屬性單詞height。單位可以使用PX，em等常用使用PX（像素）為html單位。 he...

    sf_wangchong 評論0 收藏0

  • CSS用法的一些總結(jié)

    摘要：黃金檔未垂直對齊同一行的一組為的使用了或者是時，如果某個的內(nèi)部標(biāo)簽中填充一些文字等內(nèi)容，可能就會出現(xiàn)垂直不對齊的情況。解決方法倒不難的應(yīng)用會被其他一些屬性破壞，例如和，所以與或是屬性最好不要同用。 工作上，除了Django和一些并不復(fù)雜的腳本以外，其余時間寫了大量的CSS和jQuery，現(xiàn)在回頭看之前的一些代碼，寫得十分丑陋又低效，其中的CSS就有很大改進(jìn)空間。正如多數(shù)人的認(rèn)知一樣，H...

    Anchorer 評論0 收藏0

  • [面試專題]一線互聯(lián)網(wǎng)大廠面試總結(jié)

    摘要：道阻且長啊前端面試總結(jié)前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進(jìn)按鈕書簽?zāi)夸洖g覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構(gòu)建的，使用自主研發(fā)的渲染引擎，和都使用網(wǎng)絡(luò)用來 道阻且長啊TAT(前端面試總結(jié)) 前端 面試 筆試 面試 騰訊一面 1.瀏覽器工作原理 瀏覽器的主要組件包括： 用戶界面－ 包括地址欄、后退/前...

    lemanli 評論0 收藏0

  • [面試專題]一線互聯(lián)網(wǎng)大廠面試總結(jié)

    摘要：道阻且長啊前端面試總結(jié)前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進(jìn)按鈕書簽?zāi)夸洖g覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構(gòu)建的，使用自主研發(fā)的渲染引擎，和都使用網(wǎng)絡(luò)用來 道阻且長啊TAT(前端面試總結(jié)) 前端 面試 筆試 面試 騰訊一面 1.瀏覽器工作原理 瀏覽器的主要組件包括： 用戶界面－ 包括地址欄、后退/前...

    xfee 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<