前端復習：CSS專題3

1 行高和字號

1.1 行高

CSS中，所有的行，都有行高。盒模型的padding，絕對不是直接作用在文字上的，而是作用在“行”上。
```
line-height: 40px;
```
盱眙網站制作公司哪家好，找成都創新互聯公司！從網頁設計、網站建設、微信開發、APP開發、響應式網站設計等網站項目制作，到程序開發，運營維護。成都創新互聯公司于2013年創立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選成都創新互聯公司。
文字，是在自己的行里面居中的。比如說，現在的文字字號為14px，行高為24px。那么：
為了嚴格保證字在行里面居中，我們的工程師都有個約定：行高、字號，一般都是偶數。這樣，它們的差，就是偶數，就能夠被2整除。
1.2 單行文本垂直居中
文本在行里面居中，公式為：
```
行高:盒子高;
```
需要注意的是，這個小技巧，行高=盒子高。只適用于單行文本垂直居中，不適用于多行。如果想讓多行文本垂直居中，需要設置盒子的padding值。
1.3 font屬性
使用font屬性，能夠將字號、行高、字體一起設置。
```
font: 14px/24px “宋體”;
```

等價于三行語句：

font-size:14px;
line-height:24px;
font-family:"宋體";

font-family就是“字體”的意思。
網頁中不是所有字體都能用，因為這個字體要看用戶的電腦里面裝沒裝。比如說你設置為：
```
font-family: "華文彩云";
```
如果用戶電腦中沒有這個字體，那么就會變成宋體。頁面中，中文我們只使用：微軟雅黑、宋體、黑體。
為了防止用戶電腦里面，沒有微軟雅黑這個字體。就要用英文的逗號，隔開備選字體，就是說如果用于電腦里面，沒有安裝微軟雅黑字體，那么就是宋體：
```
font-family: "微軟雅黑","宋體";
```
備選字體可以有無數個，用逗號隔開。
我們要將英文字體，放在最前面，這樣所有的中文，就不能夠匹配英文字體，就自動的變為后面的中文字體：
```
font-family: "Times New Roman","微軟雅黑","宋體";
```
所有的中文字體，都有英文別名，我們也要知道：
微軟雅黑的英文別名為：font-family: "Microsoft YaHei"; ；宋體的英文別名為：font-family: "SimSun";。
font屬性能夠將font-size、line-height、font-family合三為一：
```
font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";
```
行高可以用百分比，表示字號的百分之多少。一般來說，都是大于100%的，因為行高一定要大于字號。
```
font:12px/200% “宋體”
```
等價于：
```
font:12px/24px “宋體”;
```
2 超級鏈接的美化
2.1 偽類
也就是說，同一個標簽，根據用戶的某種狀態不同，有不同的樣式，這就叫做“偽類”。
類就是工程師加的，比如div屬于box類，但是a屬于什么類呢？不明確，因為要看用戶有沒有點擊、有沒有觸碰，所以就叫做“偽類”。
偽類用冒號來表示，分為4種：
```
    a:link{
        color:red;
    }
    a:visited{
        color:orange;
    }
    a:hover{
        color:green;
    }
    a:active{
        color:black;
    }
```
1、link表示，用戶沒有點擊過這個鏈接的樣式，是英文中“鏈接”的意思。
2、:visited表示，用戶訪問過這個鏈接的樣式，是英文“訪問過的”意思。
3、:hover表示，用戶鼠標懸停的時候鏈接的樣式，是英文“懸?！钡囊馑?。
4、:active表示，用戶用鼠標點擊這個鏈接，但是不松手，此刻的樣式，是英文“激活”的意思。
需要記住，這四種狀態，在css中，必須按照固定的順序：a:link 、a:visited 、a:hover 、a:active。如果不按照順序，那么將失效。“愛恨準則”love hate，必須先愛后恨。
2.2 超級鏈接的美化
a標簽在使用的時候，非常的難。因為不僅僅要控制a這個盒子，也要控制它的偽類。
我們一定要將a標簽寫在前面，:link、:visited、:hover、:active這些偽類寫在后面。

a標簽中，描述盒子，偽類中描述文字的樣式、背景。

    .nav ul li a{
        display: block;
        width: 120px;
        height: 40px;
    }
    .nav ul li a:link ,.nav ul li a:visited{
        text-decoration: none;
        background-color: yellowgreen;
        color:white;
    }
    .nav ul li a:hover{
        background-color: purple;
        font-weight: bold;
        color:yellow;
    }

需要記住，所有的a都不繼承text、font這些東西，因為a自己有一個偽類的權重。
最標準的，就是把link、visited、hover都要寫。但是前端開發工程師在大量的實線中，發現不寫link、visited瀏覽器也挺兼容，所以把a標簽簡化了。

a:link、a:visited都是可以省略的，簡寫在a標簽里面。也就是說，a標簽蘊含了link、visited的狀態。

.nav ul li a{
        display: block;
        width: 120px;
        height: 50px;
        text-decoration: none;
        background-color: purple;
        color:white;
    }
    .nav ul li a:hover{
        background-color: orange;
    }

3 background系列屬性

3.1 background-color屬性

背景顏色屬性。CSS2.1中，顏色的表示方法有哪些？一共有三種：單詞、rgb表示法、十六進制表示法。
3.1.1 用英文單詞來表示
能夠用英文單詞來表述的顏色，都是簡單顏色。
紅色：background-color: red; 。
3.1.2 用rgb方法來表示
紅色：background-color: rgb(255,0,0);。rgb表示三原色“紅”red、“綠”green、“藍”blue。光學顯示器，每個像素都是由三原色的發光原件組成的?？棵髁炼炔煌梢哉{成不同的顏色。
用逗號隔開，r、g、b的值，每個值的取值范圍0~255，一共256個值。
如果此項的值background-color: rgb(0,255,0); ；藍色：，是255，那么就說明是純色。
綠色：background-color: rgb(0,255,0); ；藍色：background-color: rgb(0,0,255);；黑色：background-color: rgb(0,0,0);；白色：background-color: rgb(255,255,255);。
顏色可以疊加，比如×××就是紅色和綠色的疊加：background-color: rgb(255,255,0);
3.1.3 十六機制表示法
紅色：background-color: #ff0000;。所有用#開頭的值，都是16進制的。
16進制表示法，也就是兩位兩位看，看r、g、b，但是沒有逗號隔開。
ff就是10進制的255，00就是10進制的0，所以等價于rgb(255,0,0)。
3.2 background-image
用于給盒子加上背景圖片：background-image:url(images/wuyifan.jpg);。
url()表示網址，uniform resouces locator 統一資源定位符。images/wuyifan.jpg 就是相對路徑。
背景天生就是被平鋪滿的。
3.3 background-repeat屬性
設置背景圖片是否重復，重復方式為：repeat表示“重復”。
repeat表示“重復”的意思。

也就是說，background-repeat屬性，有三種值：

background-repeat:no-repeat;   不重復
background-repeat:repeat-x;    橫向重復
background-repeat:repeat-y;    縱向重復

3.4 background-position屬性

3.4.1 屬性的意思

position就是“位置”的意思，background-position就是背景定位屬性。
```
background-position:向右移動量 向下移動量;
```
定位屬性可以是負數：
3.4.2 CSS精靈
“CSS精靈”，英文css sprite，所以也叫作“css雪碧”技術。是一種CSS圖像合并技術，該方法時將小圖標和背景圖像合并到一張圖片上，然后利用css的背景定位技術來顯示需要顯示的圖片部分。
CSS精靈有什么優點，就是減少了http請求。比如說4張小圖片，原來需要4個http請求，但是用了css精靈后，4張小圖片變成了一張圖，http請求只有1個。
如淘寶網中的精靈兔：
3.4.3 使用單詞描述屬性
background-position描述左右的詞為left、 center、right；描述上下的詞為：top 、center、bottom。
```
background-position: right bottom;
```
3.5 background-attachment
背景是否固定。
```
background-attachment:fixed;
```
背景會被固定住，不會被滾動條滾走。
3.6 background綜合屬性
background屬性和border一樣，是一個綜合屬性：
```
background:red url(1.jpg) no-repeat 100px 100px fixed;
```

等價于：

1background-color:red;
2background-image:url(1.jpg);
3background-repeat:no-repeat;
4background-position:100px 100px;
background-attachment:fixed;

可以任意省略部分：
```
background: red;
```
4 相對定位
定位有三種，分別為相對定位、絕對定位、固定定位。
相對定位為：position:relative;
絕對定位為：position:absolute;
固定定位為：position:fixed;
4.1 認識相對定位
相對定位，就是微調元素位置的。讓元素相對自己原來的位置，進行位置調整。

也就是說，如果一個盒子想要進行位置調整，那么就要使用相對定位。

position:relative;   → 必須先聲明，自己要相對定位了，
left:100px;       → 然后進行調整。
top:150px;       → 然后進行調整。

4.2 不脫標，老家留坑，形影分離

相對定位不脫離標準流，其真實的位置還是在老家里，只不過影子出去了，可以到處飄。
4.3 相對定位用途
相對定位有坑，所以一般不用于做“壓蓋”效果。頁面中，效果極小。就兩個作用：
1、微調元素；
2、做絕對定位的參考；
4.4 相對定位的定位值
可以使用left、right來描述盒子左、右的移動；可以使用top、bottom來描述盒子的下、上的移動。
5 絕對定位
絕對定位要比相對定位更靈活。
5.1 絕對定位脫標
絕對定位的盒子，是脫離標準文檔流的。所以，所有的標準文檔流的性質，絕對定位之后都不準守。絕對定位之后，標簽就不區分所謂的行內元素、塊級元素了，不需要display:block;就可以設置寬高：
```
    span{
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
```
5.2 參考點
絕對定位的參考點，如果用top描述，那么定位參考點就是頁面的左上角，而不是瀏覽器的左上角。
如果用bottom描述，那么就是瀏覽器首屏窗口尺寸，對應的頁面的左下角：
面試題：
用bottom定位的時候，參考的是瀏覽器首屏大小對應的頁面左下角：
5.3 以盒子為參考點
一個絕對定位的元素，如果父輩元素中也出現定位的元素，那么將以父輩這個元素，為參考點：

要聽最近的已經定位的祖先元素的，不一定是父親，可能是爺爺。

<div class="box1">   →  相對定位
    <div class="box2">  →  沒有定位
        <p></p>   → 絕對定位，將以box1為參考，因為box2沒有定位，box1就是最近的父輩元素
    </div>
</div>

<div class="box1">   →  相對定位
    <div class="box2">  → 相對定位
        <p></p>   → 絕對定位，將以box2為參考，因為box2是自己最近的父輩元素
    </div>
</div>

不一定是相對定位，任何定位，都可以作為參考點。

<div>  → 絕對定位
    <p></p>  → 絕對定位，將以div作為參考點。因為父親定位了。
</div>

5.4 絕對定位的盒子居中

絕對定位之后，所有標準流的規則，都不適用了，所以margin : 0 auto；失效?？梢允褂萌缦略O置使其水平居中：
```
left:50%;
margin-left:負的寬度的一半
```
6 固定定位
固定定位，就是相對于瀏覽器窗口的定位。無論頁面如何滾動，這個盒子顯示的位置不變。
固定定位脫標。
7 z-index
1、z-index值表示誰壓著誰。數值大的蓋住數值小的。
2、只有定位了的元素，才能夠有z-index值。也就是說，不管相對定位、決定定位、固定定位，都可以使用z-index值。而浮動的東西不能夠使用。
3、z-index值沒有單位，就是一個整數值。默認的z-index值為0。
4、定位了的元素，永遠能夠壓住沒有定位的元素。

本文題目：前端復習：CSS專題3
瀏覽地址：http://www.yijiale78.com/article28/pchgjp.html

成都網站建設公司_創新互聯，為您提供網站維護、虛擬主機、網站設計公司、App開發、網站建設、網站導航

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

前端復習：CSS專題3

1 行高和字號

1.1 行高

1.2 單行文本垂直居中

1.3 font屬性

2 超級鏈接的美化

2.1 偽類

2.2 超級鏈接的美化

3 background系列屬性

3.1 background-color屬性

3.1.1 用英文單詞來表示

3.1.2 用rgb方法來表示

3.1.3 十六機制表示法

3.2 background-image

3.3 background-repeat屬性

3.4 background-position屬性

3.4.1 屬性的意思

3.4.2 CSS精靈

3.4.3 使用單詞描述屬性

3.5 background-attachment

3.6 background綜合屬性

4 相對定位

4.1 認識相對定位

4.2 不脫標，老家留坑，形影分離

4.3 相對定位用途

4.4 相對定位的定位值

5 絕對定位

5.1 絕對定位脫標

5.2 參考點

5.3 以盒子為參考點

5.4 絕對定位的盒子居中

6 固定定位

7 z-index

4.2 不脫標，老家留坑，形影分離