柚子快報邀請碼778899分享：前端 CSS基礎(chǔ)（4）

http://yzkb.51969.com/

文章目錄

1 定位1.1 為什么需要定位1.2 定位組成1.2.1 邊偏移（方位名詞）1.2.2 定位模式 (position)

1.3 定位模式介紹1.3.1 靜態(tài)定位(static) - 了解1.3.2 相對定位(relative) - 重要1.3.3 絕對定位(absolute) - 重要1.3.3.1 絕對定位的介紹1.3.3.2 定位口訣 —— 子絕父相

1.3.4 固定定位(fixed) - 重要1.3.5 粘性定位(sticky) - 了解1.3.6 定位總結(jié)

2 定位(position)的應(yīng)用2.1 固定定位小技巧： 固定在版心左側(cè)位置。2.2 堆疊順序（z-index）

3 定位(position)的拓展3.1 絕對定位的盒子居中3.2 定位特殊特性3.3 脫標(biāo)的盒子不會觸發(fā)外邊距塌陷3.4 絕對定位（固定定位）會完全壓住盒子

4 網(wǎng)頁布局總結(jié)4.1 標(biāo)準(zhǔn)流4.2 浮動4.3 定位

5 元素的顯示與隱藏5.1 display 顯示（重點）5.2 visibility 可見性 （了解)5.3 overflow 溢出（重點）5.4 顯示與隱藏總結(jié)

6 精靈圖（重點）6.1 為什么需要精靈圖6.2 精靈圖（sprites）的使用6.3 案例：拼出自己名字6.3.1 案例效果6.3.2 代碼參考

7 字體圖標(biāo)7.1 字體圖標(biāo)的產(chǎn)生7.2 字體圖標(biāo)的優(yōu)點7.3 字體圖標(biāo)的下載7.4 字體圖標(biāo)的引入7.5 字體圖標(biāo)的追加7.6 字體圖標(biāo)加載的原理：

8 CSS 三角8.1 介紹8.2 案例：京東三角8.2.1 效果圖8.2.2 代碼參考

9 CSS 用戶界面樣式9.1 鼠標(biāo)樣式 cursor9.2 輪廓線 outline9.3 防止拖拽文本域 resize

10 vertical-align 屬性應(yīng)用10.1 圖片、表單和文字對齊10.2 解決圖片底部默認(rèn)空白縫隙問題

11 溢出的文字省略號顯示11.1 單行文本溢出顯示省略號11.2 多行文本溢出顯示省略號（了解）

12 常見布局技巧12.1 margin負(fù)值運用12.2 文字圍繞浮動元素12.3 行內(nèi)塊巧妙運用12.4 CSS 三角強化 案例12.4.1 原理12.4.2 案例效果12.4.3 代碼參考

13 CSS 初始化

1 定位

1.1 為什么需要定位

浮動可以讓多個塊級盒子一行沒有縫隙排列顯示， 經(jīng)常用于橫向排列盒子。定位則是可以讓盒子自由的在某個盒子內(nèi)移動位置或者固定屏幕中某個位置，并且可以壓住其他盒子。

1.2 定位組成

定位：將盒子定在某一個位置，所以定位也是在擺放盒子， 按照定位的方式移動盒子。

定位也是用來布局的，它有兩部分組成：

定位 = 定位模式 + 邊偏移 。

定位模式 用于指定一個元素在文檔中的定位方式。邊偏移則決定了該元素的最終位置。

1.2.1 邊偏移（方位名詞）

邊偏移 就是定位的盒子移動到最終位置。有 top、bottom、left 和 right 4 個屬性。

邊偏移屬性示例描述toptop: 80px頂端偏移量，定義元素相對于其父元素上邊線的距離。bottombottom: 80px底部偏移量，定義元素相對于其父元素下邊線的距離。leftleft: 80px左側(cè)偏移量，定義元素相對于其父元素左邊線的距離。rightright: 80px右側(cè)偏移量，定義元素相對于其父元素右邊線的距離

定位的盒子有了邊偏移才有價值。 一般情況下，凡是有定位地方必定有邊偏移。

1.2.2 定位模式 (position)

在 CSS 中，通過 position 屬性定義元素的定位模式，語法如下：

選擇器 {

position: 屬性值;

}

定位模式是有不同分類的，在不同情況下，我們用到不同的定位模式。

定位模式?jīng)Q定元素的定位方式 ，它通過 CSS 的 position 屬性來設(shè)置，其值可以分為四個：

值語義static靜態(tài)定位relative相對定位absolute絕對定位fixed固定定位

1.3 定位模式介紹

1.3.1 靜態(tài)定位(static) - 了解

靜態(tài)定位是元素的默認(rèn)定位方式，無定位的意思。它相當(dāng)于 border 里面的none，靜態(tài)定位static，不要定位的時候用。 語法： 選擇器 {

position: static;

}

靜態(tài)定位 按照標(biāo)準(zhǔn)流特性擺放位置，它沒有邊偏移。 靜態(tài)定位在布局時我們幾乎不用的。

1.3.2 相對定位(relative) - 重要

相對定位是元素在移動位置的時候，是相對于它自己原來的位置來說的（自戀型）。語法：

選擇器 {

position: relative;

}

相對定位的特點：（務(wù)必記住）

1.它是相對于自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）。 2.原來在標(biāo)準(zhǔn)流的位置繼續(xù)占有，后面的盒子仍然以標(biāo)準(zhǔn)流的方式對待它。（不脫標(biāo)，繼續(xù)保留原來位置） 因此，相對定位并沒有脫標(biāo)。它最典型的應(yīng)用是給絕對定位當(dāng)?shù)?。?！? 效果圖：

1.3.3 絕對定位(absolute) - 重要

1.3.3.1 絕對定位的介紹

絕對定位是元素在移動位置的時候，是相對于它祖先元素來說的（拼爹型）。 語法： 選擇器 {

position: absolute;

}

完全脫標(biāo) —— 完全不占位置；父元素沒有定位，則以瀏覽器為準(zhǔn)定位（Document 文檔）。

父元素要有定位

元素將依據(jù)最近的已經(jīng)定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

絕對定位的特點總結(jié)：（務(wù)必記?。?1.如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為基準(zhǔn)定位（Document 文檔）。 2.如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置。 3.絕對定位不再占有原先的位置。所以絕對定位是脫離標(biāo)準(zhǔn)流的。（脫標(biāo)）

1.3.3.2 定位口訣 —— 子絕父相

弄清楚這個口訣，就明白了絕對定位和相對定位的使用場景。

這個“子絕父相”太重要了，是我們學(xué)習(xí)定位的口訣，是定位中最常用的一種方式這句話的意思是：子級是絕對定位的話，父級要用相對定位。

因為絕對定位的盒子是拼爹的，所以要和父級搭配一起來使用。

①子級絕對定位，不會占有位置，可以放到父盒子里面的任何一個地方，不會影響其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子內(nèi)顯示。

③父盒子布局時，需要占有位置，因此父親只能是相對定位。

這就是子絕父相的由來，所以相對定位經(jīng)常用來作為絕對定位的父級。

總結(jié)： 因為父級需要占有位置，因此是相對定位， 子盒子不需要占有位置，則是絕對定位

當(dāng)然，子絕父相不是永遠(yuǎn)不變的，如果父元素不需要占有位置，子絕父絕也會遇到。

疑問：為什么在布局時，子級元素使用絕對定位時，父級元素就要用相對定位呢？

觀察下圖，思考一下在布局時，左右兩個方向的箭頭圖片以及父級盒子的定位方式。

分析：

方向箭頭疊加在其他圖片上方，應(yīng)該使用絕對定位，因為絕對定位完全脫標(biāo)，完全不占位置。父級盒子應(yīng)該使用相對定位，因為相對定位不脫標(biāo)，后續(xù)盒子仍然以標(biāo)準(zhǔn)流的方式對待它。

如果父級盒子也使用絕對定位，會完全脫標(biāo)，那么下方的廣告盒子會上移，這顯然不是我們想要的。

結(jié)論：父級要占有位置，子級要任意擺放，這就是子絕父相的由來。

1.3.4 固定定位(fixed) - 重要

固定定位是元素固定于瀏覽器可視區(qū)的位置。（認(rèn)死理型） 主要使用場景： 可以在瀏覽器頁面滾動時元素的位置不會改變。 語法： 選擇器 {

position: fixed;

}

固定定位的特點：（務(wù)必記?。?1.以瀏覽器的可視窗口為參照點移動元素。

跟父元素沒有任何關(guān)系。不隨滾動條滾動。 2.固定定位不在占有原先的位置。 固定定位也是脫標(biāo)的，其實固定定位也可以看做是一種特殊的絕對定位。（認(rèn)死理型）

完全脫標(biāo)—— 完全不占位置；只認(rèn)瀏覽器的可視窗口 —— 瀏覽器可視窗口 + 邊偏移屬性 來設(shè)置元素的位置；

跟父元素沒有任何關(guān)系；單獨使用的。不隨滾動條滾動。

固定定位舉例：

提示：IE 6 等低版本瀏覽器不支持固定定位。

固定定位 小技巧：固定在版心右側(cè)位置。

小算法：

讓固定定位的盒子 left:50% 。走到瀏覽器可視區(qū)（也可以看做版心）的一半位置。 讓固定定位的盒子 margin-left:版心寬度的一半距離。多走版心寬度的一半位置。 就可以讓固定定位的盒子貼著版心右側(cè)對齊了。

1.3.5 粘性定位(sticky) - 了解

粘性定位可以被認(rèn)為是相對定位和固定定位的混合。 Sticky 粘性的 語法： 選擇器 {

position: sticky;

top: 10px;

}

粘性定位的特點： 1.以瀏覽器的可視窗口為參照點移動元素（固定定位特點）。 2.粘性定位占有原先的位置（相對定位特點）。 3.必須添加 top 、left、right、bottom 其中一個才有效。 跟頁面滾動搭配使用。 兼容性較差，IE 不支持。

1.3.6 定位總結(jié)

定位模式是否脫標(biāo)移動位置是否常用static 靜態(tài)定位否不能使用邊偏移很少relative 相對定位否 (占有位置)相對于自身位置移動基本單獨使用absolute絕對定位是（不占有位置）帶有定位的父級要和定位父級元素搭配使用fixed 固定定位是（不占有位置）瀏覽器可視區(qū)單獨使用，不需要父級sticky 粘性定位否 (占有位置)瀏覽器可視區(qū)當(dāng)前階段少

一定記住 相對定位、固定定位、絕對定位 兩個大的特點： 1. 是否占有位置（脫標(biāo)否） 2. 以誰為基準(zhǔn)點移動位置。 學(xué)習(xí)定位重點學(xué)會子絕父相。 注意：

邊偏移需要和定位模式聯(lián)合使用，單獨使用無效；top 和 bottom 不要同時使用；left 和 right 不要同時使用。

2 定位(position)的應(yīng)用

2.1 固定定位小技巧： 固定在版心左側(cè)位置。

小算法：

1.讓固定定位的盒子 left: 50%. 走到瀏覽器可視區(qū)（也可以看做版心） 的一半位置。

2.讓固定定位的盒子 margin-left: 版心寬度的一半距離。 多走 版心寬度的一半位置

就可以讓固定定位的盒子貼著版心右側(cè)對齊了。

案例效果：

2.2 堆疊順序（z-index）

在使用定位布局時，可能會出現(xiàn)盒子重疊的情況。此時，可以使用 z-index 來控制盒子的前后次序 (z軸) 語法： 選擇器 {

z-index: 1;

}

z-index 的特性如下：

屬性值：正整數(shù)、負(fù)整數(shù)或 0，默認(rèn)值是 0，數(shù)值越大，盒子越靠上；如果屬性值相同，則按照書寫順序，后來居上；數(shù)字后面不能加單位；只有定位的盒子才有 z-index 屬性。 注意：z-index 只能應(yīng)用于相對定位、絕對定位和固定定位的元素，其他標(biāo)準(zhǔn)流、浮動和靜態(tài)定位無效。 應(yīng)用 z-index 層疊等級屬性可以調(diào)整盒子的堆疊順序。如下圖所示：

案例演示：堆疊順序。

3 定位(position)的拓展

3.1 絕對定位的盒子居中

注意：加了絕對定位/固定定位的盒子不能通過設(shè)置 margin: auto 設(shè)置水平居中。

但是可以通過以下計算方法實現(xiàn)水平和垂直居中，可以按照下圖的方法：

left: 50%;：讓盒子的左側(cè)移動到父級元素的水平中心位置；margin-left: -100px;：讓盒子向左移動自身寬度的一半。

盒子居中定位示意圖

3.2 定位特殊特性

絕對定位和固定定位也和浮動類似。

1.行內(nèi)元素添加絕對或者固定定位，可以直接設(shè)置高度和寬度。

2.塊級元素添加絕對或者固定定位，如果不給寬度或者高度，默認(rèn)大小是內(nèi)容的大小。

前面我們講過， display 是 顯示模式， 可以改變顯示模式有以下方式:

可以用inline-block 轉(zhuǎn)換為行內(nèi)塊可以用浮動 float 默認(rèn)轉(zhuǎn)換為行內(nèi)塊（類似，并不完全一樣，因為浮動是脫標(biāo)的）絕對定位和固定定位也和浮動類似， 默認(rèn)轉(zhuǎn)換的特性 轉(zhuǎn)換為行內(nèi)塊。

所以說， 一個行內(nèi)的盒子，如果加了浮動、固定定位和絕對定位，不用轉(zhuǎn)換，就可以給這個盒子直接設(shè)置寬度和高度等。

3.3 脫標(biāo)的盒子不會觸發(fā)外邊距塌陷

浮動元素、**絕對定位(固定定位）**元素的都不會觸發(fā)外邊距合并的問題。 （我們以前是用padding border overflow解決的）

也就是說，我們給盒子改為了浮動或者定位，就不會有垂直外邊距合并的問題了。

3.4 絕對定位（固定定位）會完全壓住盒子

浮動元素不同，只會壓住它下面標(biāo)準(zhǔn)流的盒子，但是不會壓住下面標(biāo)準(zhǔn)流盒子里面的文字（圖片）。

但是絕對定位（固定定位） 會壓住下面標(biāo)準(zhǔn)流所有的內(nèi)容。

浮動之所以不會壓住文字，因為浮動產(chǎn)生的目的最初是為了做文字環(huán)繞效果的。 文字會圍繞浮動元素。

4 網(wǎng)頁布局總結(jié)

通過盒子模型，清楚知道大部分 html 標(biāo)簽是一個盒子。

通過 CSS 浮動、定位 可以讓每個盒子排列成為網(wǎng)頁。

一個完整的網(wǎng)頁，是標(biāo)準(zhǔn)流、浮動、定位一起完成布局的，每個都有自己的專門用法。

4.1 標(biāo)準(zhǔn)流

可以讓盒子上下排列或者左右排列，垂直的塊級盒子顯示就用標(biāo)準(zhǔn)流布局。

4.2 浮動

可以讓多個塊級元素一行顯示或者左右對齊盒子，多個塊級盒子水平顯示就用浮動布局。

4.3 定位

定位最大的特點是有層疊的概念，就是可以讓多個盒子前后疊壓來顯示。如果元素自由在某個盒子內(nèi)移動就用定位布局。

5 元素的顯示與隱藏

目的（本質(zhì)） ? 讓一個元素在頁面中消失或者顯示出來 場景 ? 類似網(wǎng)站廣告，當(dāng)我們點擊關(guān)閉就不見了，但是我們重新刷新頁面，會重新出現(xiàn)！

5.1 display 顯示（重點）

display 設(shè)置或檢索對象是否及如何顯示。 display: none; 隱藏對象

display：block; 除了轉(zhuǎn)換為塊級元素之外，同時還有顯示元素的意思。

特點： display 隱藏元素后，不再占有原來的位置。 后面應(yīng)用及其廣泛，搭配 JS 可以做很多的網(wǎng)頁特效。實際開發(fā)場景：

配合后面js做特效，比如下拉菜單，原先沒有，鼠標(biāo)經(jīng)過，顯示下拉菜單， 應(yīng)用極為廣泛。

5.2 visibility 可見性 （了解)

visibility 屬性用于指定一個元素應(yīng)可見還是隱藏。 visibility：visible; 　元素可視

visibility：hidden; 　 元素隱藏

特點：visibility 隱藏元素后，繼續(xù)占有原來的位置。（停職留薪） 如果隱藏元素想要原來位置， 就用 visibility：hidden

如果隱藏元素不想要原來位置， 就用 display：none (用處更多 重點）

5.3 overflow 溢出（重點）

overflow 屬性指定了如果內(nèi)容溢出一個元素的框（超過其指定高度及寬度） 時，會發(fā)生什么。

屬性值描述visible不剪切內(nèi)容也不添加滾動條hidden不顯示超過對象尺寸的內(nèi)容，超出的部分隱藏掉scroll不管超出內(nèi)容否，總是顯示滾動條auto超出自動顯示滾動條，不超出不顯示滾動條

一般情況下，我們都不想讓溢出的內(nèi)容顯示出來，因為溢出的部分會影響布局。但是如果有定位的盒子， 請慎用overflow:hidden 因為它會隱藏多余的部分。

實際開發(fā)場景：

清除浮動隱藏超出內(nèi)容，隱藏掉, 不允許內(nèi)容超過父盒子。

5.4 顯示與隱藏總結(jié)

屬性區(qū)別用途display 顯示 （重點）隱藏對象，不保留位置配合后面js做特效，比如下拉菜單，原先沒有，鼠標(biāo)經(jīng)過，顯示下拉菜單， 應(yīng)用極為廣泛visibility 可見性 （了解）隱藏對象，保留位置使用較少overflow 溢出（重點）只是隱藏超出大小的部分1. 可以清除浮動 2. 保證盒子里面的內(nèi)容不會超出該盒子范圍

6 精靈圖（重點）

6.1 為什么需要精靈圖

一個網(wǎng)頁中往往會應(yīng)用很多小的背景圖像作為修飾，當(dāng)網(wǎng)頁中的圖像過多時，服務(wù)器就會頻繁地接收和發(fā)送請求圖片，造成服務(wù)器請求壓力過大，這將大大降低頁面的加載速度。

為什么使用精靈圖（目的）：

? 為了有效地減少服務(wù)器接收和發(fā)送請求的次數(shù)，提高頁面的加載速度，出現(xiàn)了 CSS 精靈技術(shù)（也稱 CSS Sprites、CSS 雪碧）。

核心原理：

? 將網(wǎng)頁中的一些小背景圖像整合到一張大圖中 ，這樣服務(wù)器只需要一次請求就可以了。

精靈圖舉例:

6.2 精靈圖（sprites）的使用

使用精靈圖核心：

精靈技術(shù)主要針對于背景圖片使用。就是把多個小背景圖片整合到一張大圖片中。這個大圖片也稱為 sprites 精靈圖 或者 雪碧圖。移動背景圖片位置， 此時可以使用 background-position 。移動的距離就是這個目標(biāo)圖片的 x 和 y 坐標(biāo)。注意網(wǎng)頁中的坐標(biāo)有所不同。因為一般情況下都是往上往左移動，所以數(shù)值是負(fù)值。使用精靈圖的時候需要精確測量，每個小背景圖片的大小和位置。

使用精靈圖核心總結(jié)：

精靈圖主要針對于小的背景圖片使用。 主要借助于背景位置來實現(xiàn)—background-position 。 一般情況下精靈圖都是負(fù)值。（千萬注意網(wǎng)頁中的坐標(biāo)： x軸右邊走是正值，左邊走是負(fù)值， y軸同理。）

6.3 案例：拼出自己名字

6.3.1 案例效果

6.3.2 代碼參考

結(jié)構(gòu)

p

i

n

k

樣式

span {

display: inline-block;

background: url(images/abcd.jpg) no-repeat;

}

.p {

width: 100px;

height: 112px;

/* background-color: pink; */

background-position: -493px -276px;

}

.i {

width: 60px;

height: 108px;

/* background-color: pink; */

background-position: -327px -142px;

}

.n {

width: 108px;

height: 109px;

/* background-color: pink; */

background-position: -215px -141px;

}

.k {

width: 105px;

height: 114px;

/* background-color: pink; */

background-position: -495px -142px;

}

7 字體圖標(biāo)

7.1 字體圖標(biāo)的產(chǎn)生

字體圖標(biāo)使用場景： 主要用于顯示網(wǎng)頁中通用、常用的一些小圖標(biāo)。

精靈圖是有諸多優(yōu)點的，但是缺點很明顯。

1.圖片文件還是比較大的。

2.圖片本身放大和縮小會失真。

3.一旦圖片制作完畢想要更換非常復(fù)雜。

此時，有一種技術(shù)的出現(xiàn)很好的解決了以上問題，就是字體圖標(biāo) iconfont。

字體圖標(biāo)可以為前端工程師提供一種方便高效的圖標(biāo)使用方式，展示的是圖標(biāo)，本質(zhì)屬于字體。

7.2 字體圖標(biāo)的優(yōu)點

輕量級：一個圖標(biāo)字體要比一系列的圖像要小。一旦字體加載了，圖標(biāo)就會馬上渲染出來，減少了服務(wù)器請求

靈活性：本質(zhì)其實是文字，可以很隨意的改變顏色、產(chǎn)生陰影、透明效果、旋轉(zhuǎn)等兼容性：幾乎支持所有的瀏覽器，請放心使用注意： 字體圖標(biāo)不能替代精靈技術(shù)，只是對工作中圖標(biāo)部分技術(shù)的提升和優(yōu)化。

總結(jié)：

1.如果遇到一些結(jié)構(gòu)和樣式比較簡單的小圖標(biāo)，就用字體圖標(biāo)。

2.如果遇到一些結(jié)構(gòu)和樣式復(fù)雜一點的小圖片，就用精靈圖。

使用步驟

字體圖標(biāo)是一些網(wǎng)頁常見的小圖標(biāo)，我們直接網(wǎng)上下載即可。 因此使用可以分為：

1.字體圖標(biāo)的下載

2.字體圖標(biāo)的引入 （引入到我們html頁面中）

3.字體圖標(biāo)的追加 （以后添加新的小圖標(biāo)）

7.3 字體圖標(biāo)的下載

推薦下載網(wǎng)站：

icomoon 字庫 http://icomoon.io 推薦指數(shù) ★★★★★

IcoMoon 成立于 2011 年，推出了第一個自定義圖標(biāo)字體生成器，它允許用戶選擇所需要的圖標(biāo)，使它們成一字型。該字庫內(nèi)容種類繁多，非常全面，唯一的遺憾是國外服務(wù)器，打開網(wǎng)速較慢。

阿里 iconfont 字庫 http://www.iconfont.cn/ 推薦指數(shù) ★★★★★

這個是阿里媽媽 M2UX 的一個 iconfont 字體圖標(biāo)字庫，包含了淘寶圖標(biāo)庫和阿里媽媽圖標(biāo)庫?？梢允褂?AI制作圖標(biāo)上傳生成。 重點是，免費！

7.4 字體圖標(biāo)的引入

下載完畢之后，注意原先的文件不要刪，后面會用。

把下載包里面的 fonts 文件夾放入頁面根目錄下

字體文件格式

不同瀏覽器所支持的字體格式是不一樣的，字體圖標(biāo)之所以兼容，就是因為包含了主流瀏覽器支持的字體文件。

1).TureType( .ttf )格式.ttf字體是Windows和Mac的最常見的字體，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2).Web Open Font Format( .woff )格式woff字體，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

3).Embedded Open Type( .eot )格式.eot字體是IE專用字體，支持這種字體的瀏覽器有IE4+；

4).SVG( .svg )格式.svg字體是基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

2.在 CSS 樣式中全局聲明字體： 簡單理解把這些字體文件通過css引入到我們頁面中。

一定注意字體文件路徑的問題

@font-face {

font-family: 'icomoon';

src: url('fonts/icomoon.eot?7kkyc2');

src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),

url('fonts/icomoon.ttf?7kkyc2') format('truetype'),

url('fonts/icomoon.woff?7kkyc2') format('woff'),

url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');

font-weight: normal;

font-style: normal;

}

html 標(biāo)簽內(nèi)添加小圖標(biāo)。

給標(biāo)簽定義字體。

span {

font-family: "icomoon";

}

注意：務(wù)必保證 這個字體和上面@font-face里面的字體保持一致

7.5 字體圖標(biāo)的追加

如果工作中，原來的字體圖標(biāo)不夠用了，我們需要添加新的字體圖標(biāo)到原來的字體文件中。

把壓縮包里面的 selection.json 從新上傳，然后選中自己想要新的圖標(biāo)，從新下載壓縮包，并替換原來的文件即可。

7.6 字體圖標(biāo)加載的原理：

8 CSS 三角

8.1 介紹

網(wǎng)頁中常見一些三角形，使用 CSS 直接畫出來就可以，不必做成圖片或者字體圖標(biāo)。

一張圖， 你就知道 CSS 三角是怎么來的了, 做法如下：

div {

width: 0;

height: 0;

border: 50px solid transparent;

border-color: red green blue black;

line-height:0;

font-size: 0;

}

我們用css 邊框可以模擬三角效果寬度高度為0我們4個邊框都要寫， 只保留需要的邊框顏色，其余的不能省略，都改為 transparent 透明就好了為了照顧兼容性 低版本的瀏覽器，加上 font-size: 0; line-height: 0;

8.2 案例：京東三角

8.2.1 效果圖

8.2.2 代碼參考

9 CSS 用戶界面樣式

什么是界面樣式

所謂的界面樣式，就是更改一些用戶操作樣式，以便提高更好的用戶體驗。

更改用戶的鼠標(biāo)樣式表單輪廓防止表單域拖拽

9.1 鼠標(biāo)樣式 cursor

li {

cursor: pointer;

}

設(shè)置或檢索在對象上移動的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。

屬性值描述default小白 默認(rèn)pointer小手move移動text文本not-allowed禁止

9.2 輪廓線 outline

給表單添加 outline: 0; 或者 outline: none; 樣式之后，就可以去掉默認(rèn)的藍色邊框。

input {

outline: none;

}

9.3 防止拖拽文本域 resize

實際開發(fā)中，我們文本域右下角是不可以拖拽的。

textarea{

resize: none;

}

10 vertical-align 屬性應(yīng)用

CSS 的 vertical-align 屬性使用場景： 經(jīng)常用于設(shè)置圖片或者表單(行內(nèi)塊元素）和文字垂直對齊。

官方解釋： 用于設(shè)置一個元素的垂直對齊方式，但是它只針對于行內(nèi)元素或者行內(nèi)塊元素有效。

語法：

vertical-align : baseline | top | middle | bottom

值描述baseline默認(rèn)。元素放置在父元素的基線上。top把元素的頂端與行中最高元素的頂端對齊。middle把此元素放置在父元素的中部。bottom把元素的頂端與行中最低元素的頂端對齊。

10.1 圖片、表單和文字對齊

圖片、表單都屬于行內(nèi)塊元素，默認(rèn)的 vertical-align 是基線對齊。

此時可以給圖片、表單這些行內(nèi)塊元素的 vertical-align 屬性設(shè)置為 middle 就可以讓文字和圖片垂直居中對齊了。

10.2 解決圖片底部默認(rèn)空白縫隙問題

bug：圖片底側(cè)會有一個空白縫隙，原因是行內(nèi)塊元素會和文字的基線對齊。

主要解決方法有兩種：

1.給圖片添加 vertical-align:middle | top| bottom 等。 （提倡使用的）

2.把圖片轉(zhuǎn)換為塊級元素 display: block;

11 溢出的文字省略號顯示

11.1 單行文本溢出顯示省略號

單行文本溢出顯示省略號–必須滿足三個條件：

/*1. 先強制一行內(nèi)顯示文本*/

white-space: nowrap; （ 默認(rèn) normal 自動換行）

/*2. 超出的部分隱藏*/

overflow: hidden;

/*3. 文字用省略號替代超出的部分*/

text-overflow: ellipsis;

11.2 多行文本溢出顯示省略號（了解）

多行文本溢出顯示省略號，有較大兼容性問題，適合于webKit瀏覽器或移動端（移動端大部分是webkit內(nèi)核）

/*1. 超出的部分隱藏 */

overflow: hidden;

/*2. 文字用省略號替代超出的部分 */

text-overflow: ellipsis;

/* 3. 彈性伸縮盒子模型顯示 */

display: -webkit-box;

/* 4. 限制在一個塊元素顯示的文本的行數(shù) */

-webkit-line-clamp: 2;

/* 5. 設(shè)置或檢索伸縮盒對象的子元素的排列方式 */

-webkit-box-orient: vertical;

更推薦讓后臺人員來做這個效果，因為后臺人員可以設(shè)置顯示多少個字，操作更簡單。

12 常見布局技巧

巧妙利用一個技術(shù)更快更好的布局：

margin負(fù)值的運用文字圍繞浮動元素行內(nèi)塊的巧妙運用CSS三角強化

12.1 margin負(fù)值運用

1.讓每個盒子margin 往左側(cè)移動 -1px 正好壓住相鄰盒子邊框

2.鼠標(biāo)經(jīng)過某個盒子的時候，提高當(dāng)前盒子的層級即可（如果沒有有定位，則加相對定位（保留位置），如果有定位，則加z-index）

12.2 文字圍繞浮動元素

效果

布局示意圖

巧妙運用浮動元素不會壓住文字的特性。

12.3 行內(nèi)塊巧妙運用

頁碼在頁面中間顯示:

把這些鏈接盒子轉(zhuǎn)換為行內(nèi)塊， 之后給父級指定 text-align:center;利用行內(nèi)塊元素中間有縫隙，并且給父級添加 text-align:center; 行內(nèi)塊元素會水平會居中。

12.4 CSS 三角強化 案例

12.4.1 原理

12.4.2 案例效果

12.4.3 代碼參考

13 CSS 初始化

不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，為了消除不同瀏覽器對HTML文本呈現(xiàn)的差異，照顧瀏覽器的兼容，我們需要對CSS 初始化。

簡單理解： CSS初始化是指重設(shè)瀏覽器的樣式。 (也稱為CSS reset）

每個網(wǎng)頁都必須首先進行 CSS初始化。

這里我們以 京東CSS初始化代碼為例。

Unicode編碼字體：

把中文字體的名稱用相應(yīng)的Unicode編碼來代替，這樣就可以有效的避免瀏覽器解釋CSS代碼時候出現(xiàn)亂碼的問題。

比如：

黑體 \9ED1\4F53 宋體 \5B8B\4F53 微軟雅黑 \5FAE\8F6F\96C5\9ED1

柚子快報邀請碼778899分享：前端 CSS基礎(chǔ)（4）

http://yzkb.51969.com/

相關(guān)文章