CSS屬性用法總結

soasme 發布于2019-08-29 12:57 / 2033人閱讀

摘要：輪廓不被視為頁面的一部分，因此在應用它們時不會導致頁面布局被調整。

1.background系列屬性

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

1.1 背景顏色

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

    /* CSS */
    .box {
        width: 200px;
        height: 200px;
        background-color: #666;
    }
    a {
        background-color: #999;
    }
    /* HTML */
    
    這是一個a標簽

1.2 背景圖片

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

    /* CSS */
    .box {
        width: 200px;
        height: 200px;
        background-image: url(./圖片);
    }

1.3 背景圖片重復

通過background-repeat屬性設置背景圖片是否可重復：

    /* 不平鋪 */
    background-repeat: no-repeat;
    /* 橫向平鋪 */
    background-repeat: repeat-x;
    /* 縱向平鋪 */
    background-repeat: repeat-y;

1.4 背景定位

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

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

其參數也可以是像素值

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

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

為容器設置寬高，即將要引入的圖標的大小

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

1.5 背景圖像是否固定

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

1.6 綜合屬性

當要對background的多個屬性進行設置的時候可以使用縮寫的方式．

/* 引入圖片　圖片不重復　圖像左右定位中間，圖像上下定位中間　背景圖像固定 */
background: url(./a.jpg) no-repeat center center fixed;

2 position系列屬性 2.1 相對定位

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

2.2 絕對定位

設置方法：position:absolute;
絕對定位根據參考點進行位移，唯一方式于相對定位相同．
參考點:

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

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

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

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

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

2.3 固定定位

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

2.4 z-index

z-index的值表示誰壓著誰．數值大的壓著數值小的．

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

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

2.5 static

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

3 文本系列屬性

color 文本顏色

direction 設置文本方向參數rtl表示從右向左，參數ltr表示從左向右

letter-spacing 設置字符間距 normal為默認值，沒有間隙．length定義字符間固定空間允許負值．

text-decoration 文本修飾 none:定義標準文本 underline:下劃線 overline:文本上的一條線 line-through:穿過文本的一條線

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

word-spacing 字間距　normal 定義單詞間的標準空間　length:定義單詞間的固定空間

4 字體系列屬性

font-family 設置字體集

font-size 設置字體大小

font-style 設置字體樣式　

font-weight 設置字體粗細

font簡寫

5 列表樣式

list-style-image 使用圖像替換列表標記　屬性值:url

list-style-position 列表標記位置　屬性值:inside outside

list-style-type 列表標記類型

list-style 可以通過簡寫形式設置

6 輪廓

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

outline-color 顏色

outline-style 輪廓樣式

outline-width 輪廓寬度

outline 支持使用簡寫方式

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

inline 設置元素為行內

block 設置元素為塊級元素

inline-block 設置元素為行內塊元素

none 元素消失，且不占據原來的位置

7.2 visibility

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

云服務器 GPU云服務器 css屬性 php中css的用法訪問CSS屬性 position屬性，css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112265.html

css文本屬性用法總結

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

masturbator 2019-04-23 13:28 評論0 收藏0
CSS 高度(css height)

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

sf_wangchong 2019-04-23 13:13 評論0 收藏0
CSS用法的一些總結

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

Anchorer 2019-08-28 18:10 評論0 收藏0
[面試專題]一線互聯網大廠面試總結

摘要：道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的，使用自主研發的渲染引擎，和都使用網絡用來道阻且長啊TAT(前端面試總結) 前端面試筆試面試騰訊一面 1.瀏覽器工作原理瀏覽器的主要組件包括：用戶界面－包括地址欄、后退/前...

lemanli 2019-08-02 15:57 評論0 收藏0
[面試專題]一線互聯網大廠面試總結

摘要：道阻且長啊前端面試總結前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構建的，使用自主研發的渲染引擎，和都使用網絡用來道阻且長啊TAT(前端面試總結) 前端面試筆試面試騰訊一面 1.瀏覽器工作原理瀏覽器的主要組件包括：用戶界面－包括地址欄、后退/前...

xfee 2019-08-21 11:53 評論0 收藏0