css原始碼筆記(六) 愛創課堂專業前端培訓

2021-09-26 06:08:12 字數 4278 閱讀 9674

複習:

雪碧圖使用:

ps切圖 à 應用

雪碧圖又叫csssprite 或 css精靈

將頁面中碎小的集中在一張比較大的進行載入,這樣的目的是為了減少http請求,增加頁面載入的速度

雪碧圖的實現關鍵在於 background-position的調整

雪碧圖分為標準的雪碧圖和不標準的雪碧圖

定位position

static 靜態定位(預設)

relative 相對定位 相對於本身的移動,並沒有脫離文件流,還占有原來的位置

absolute 絕對定位 和浮動一樣,脫離了標準流;相對於祖先元素中第乙個具有定位的元素來進行偏移

fixed 固定定位 脫離了標準流,不管什麼情況下,都是相對於頁面進行定位

sticky 粘性定位

配合定位的四個方向值

topright

bottom

left

壓蓋效果

定位 relative position fixed sticky

浮動 left right

壓蓋順序

z-index 沒有單位,純數字,數值越大,優先順序越高(顯示在上層)

當存在巢狀關係的情況下,根據父元素的z-index顯示壓蓋順序,子元素設定無效(相對于父元素的同級元素設定無效)

父子巢狀盒,都有z-index

父盒子的z-index決定壓蓋順序;不管子盒子設定的z-index多大

一、 兩種輪播圖介紹

呼吸輪播圖:京東

所有摞在一起

滾動輪播圖:**

所有併排顯示

二、 css常用單位

em 相對單位:相對于父盒子字型大小的比值

rem 相對單位:相對於根元素(html)字型大小的比值

px 畫素,是螢幕上顯示資料的最基本的點。用於網頁設計,直觀方便,相對單位

畫素是相對於顯示器螢幕解析度而言的。

譬如,windows的使用者所使用的解析度一般是96畫素/英吋。而mac的使用者所使用的解析度一般是72畫素/英吋。

pt 是印刷行業常用單位,1pt = 1/72英吋。絕對單位

in 英吋,絕對單位

mm 絕對單位,公釐

cm 絕對單位,厘公尺

1in = 2.54cm = 25.4 mm = 72pt = 6pc

deg 度

turn 圈

1turn = 360deg

四、hack

hacker黑客

因為瀏覽器的相容性問題,我們針對不同的瀏覽器書寫不同html或者css**,以便達到不同瀏覽器檢視效果相同。

html hack 和css hack

4.1 html hack

ie瀏覽器相容有很大問題,給我們提供了很多埠,書寫hack。

1 2 內容部分

3 針對不同的瀏覽器在同乙個html檔案裡,去寫不同的html結構。

ie瀏覽器有很多相容性問題,給我們提供了一些介面。

表示hack符裡面的內容只在ie9及以下的瀏覽器內顯示,ie10及以上或者高階瀏覽器會認為這是注釋。

if是如果,lte是less than or equal,小於或者等於,ie瀏覽器,9代表版本。

lte : less than or equal , 表示小於或等於。

lt : less than , 表示小於。

gt : greater than , 表示大於。

gte:表示大於或者等於

應用:可以針對低版本瀏覽器書寫特定的**。

針對某乙個特定的 ie版本有特殊寫法:

1 2

3 只給ie6瀏覽器加說明 **,

4 5

6 4.2 css hack

css hack :值的hack 和選擇器hack

ø css值的hack

/* ie 6 */

.selector

.selector

hack符:-、_

在屬性名的前面加下劃線或橫線。

表示這個屬性只有ie6認識,其他的都不認識這個屬性。

hack符:! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > |

表示這個屬性只有ie6/7認識,其他的都不認識這個屬性。

/* ie 8/9 */

.selector

hack符:\0/。

需要寫在屬性值的後面。

只在ie8、9裡認識。

/* ie 6/7/8/9/10 */

.selector

hack符:\9.

需要寫在屬性值的後面,分號前。

ø css選擇器hack

/* ie 6 and below */

這種選擇器只在ie6裡載入,其他的瀏覽器認為你的選擇器是錯的。

高階瀏覽器認為html已經是根標籤,*不是他的祖先元素。

這種選擇器只在ie7及以下版本裡載入,其他的瀏覽器認為你的選擇器是錯的。

1 .box,

/* 除了ie 6 */

html > body .selector {}

子級選擇器:只選擇兒子級,後代其他級別不選。

ie6不認識子級選擇器。

除了ie6都能正常載入。

1 html > body .box

五、ie6的相容

5.1 選擇器的相容

ie6不相容交集選擇器裡的類選擇器連寫。

div.box 可以相容

div.box.cl 不相容

解決辦法:

使用標籤和乙個類的交集。

其他的7種選擇器完美的相容:

標籤、id、類、交集(div.box)、後代、並集、萬用字元

1 div.box.cl

6 div.box

9 //高階瀏覽器中.box.cl權重比.box高渲染為橘色

10 //ie6中.box 和.box.cl權重相同,css書寫後面的層疊掉前面的顏色渲染為紅色。

5.2 盒模型的相容

ø 如果不寫dtd,ie6裡的盒子是內減的,其他瀏覽器是外擴。

解決方法:

必須寫dtd。

ø 如果盒子高度小於預設字型大小,不會正常顯示。高度會是預設的字型大小。

解決方法:

單獨給ie6瀏覽器,強制給個很小的字型大小。

1 .box

5.3 浮動的相容

ø 不浮動的盒子不會鑽到底下

情況:乙個盒子浮動,乙個盒子不浮動,在ie6裡,不浮動的盒子不會鑽到浮動盒子的下面占領它原來的標準流位置。

解決辦法:製作壓蓋效果用定位。同一級的盒子要浮動都浮動,要不浮動都不浮動。

ø 3px bug

情況:乙個浮動,乙個不浮動,ie6裡兩個盒子之間會出現3px的間距。

解決方法:(不允許這麼寫)。

必須解決:給左邊的浮動盒子加乙個-3px的右margin。

只給ie6瀏覽器加,注意hack符。

ø 雙倍margin問題

情況:一些元素浮動,有乙個與浮動方向相同的方向的margin,第乙個元素會出現雙倍邊距的問題。

解決辦法:①用父親的padding去擠

1 .box

8 .box p.first

②給第乙個浮動的元素margin減半(只有ie6新增)

1 .box p.first

HashMap原始碼(六)

final v putval int hash,k key,v value,boolean onlyifabsent,boolean evict 分析 1 每次put了乙個key value對後,就會size 且會比較size和threshold 陣列的長度 負載因子 resize 方法就是在擴容 ...

nginx 原始碼安裝(六)

root z wget 2.安裝 root z nginx 1.0.9 configure with file aio user nginx group nginx prefix usr nginx conf path etc nginx sbin path usr bin pid path var...

WINVNC原始碼閱讀(六)

vnc客戶端原始碼 windows版本的vnc客戶端原始碼閱讀筆記。while hosts.empty 跟進去cconnthread的構造類,cconnthread cconnthread const char hostorconfig bool isconfig thread cconnthrea...