精通CSS 高階Web標準解決方式(第2版)

2021-09-08 13:16:51 字數 3000 閱讀 1659

跳轉至:

導航、

搜尋層疊重要度:(也就是說。使用者!important能夠覆蓋inline style)

!important、使用者》作者、最後是瀏覽器/使用者**

規則特殊性(次序)的計算:a,b,c,d假設同樣。後定義的優先假設是inline style,a=1

b=id選擇器(#id)的個數

c=類、偽類、屬性選擇器的個數

d=型別、偽元素選擇器的個數

=> 大站點複雜內容情況下怎樣管理規則次序???

@import比link慢?

p41 (垂直)margin疊加(=max(upper's margin-bottom, down's margin-top))

元素巢狀包括、空元素都會發生疊加

only for 普通文件流的block框。inline、float、position:absolute的不會疊加

inline:設定高度、寬度沒有作用,line-height

=> inline-block

無法直接對應用樣式

position:relative:能夠指定left、top「相對於」原來位置。元素仍然占領原來的空間

position:absolute:元素不占領文件流空間(這相當於提公升其z-index?)

相對於距離它近期的祖先元素定位(由此能夠看出css是先定位祖先元素。後子孫元素的?)

position:float:能夠(脫離文件流)左右移動,直到碰到包括框(containing box)或還有乙個浮動框假設包括塊(containing block?)無法水平容納下全部元素,其它float元素將下移

文字元素會受float的影響,造成類似於word『文字圍繞』的效果

要阻止之。對這些文字行clear float。

可使用乙個空元素clear:both,使得父容器包括浮動元素。(也能夠直接float容器。但這會影響下乙個元素)

.clearfloat:after

ie 6-中的『holly hack』

p56 利用背景圖象建立專案符號

p65 圓角框在css 3裡非常easy處理,在css 2.1時代的各種tricks略過

9切分的border-image: url(user-corner.gif) 25% 25% 25% 25% / 25px round round;

css投影:box-shadow

css視差:background-position: 20% 0;

圖象替換(css 2.1):

phark:使用text-indent:-5000px; 對於關閉圖象但開啟css的情況無效

sifr(js+flash)

p87 css 3同意:target偽類?(恩,這麼做沒有資訊洩露問題)

外鏈樣式(常見於wiki)

p92 文字在行框中總是垂直居中的(??),設定line-height就可以,使用height會導致文字不是垂直居中,從而必須設定額外的padding

css tooltip:不如最簡單的title屬性吧?

p105 在導航條中突出顯示當前頁面:使用2個id,當中乙個應用到body元素上,進行組合匹配(這樣,導航條的後台不須要特殊處理。。)酷!

p114 ie老版本號不支援在非錨元素上使用:hover。能夠用js或.htc行為檔案啟用這個功能

css圖象對映:用乙個div包住img。設定其大小等於圖象並position:relative; 然後讓各個li元素相對於div定位。用:hover顯示border線。。

p129 遠距離翻**實際上非常easy,讓錨元素包住乙個div/span/li,然後用絕對定位把這些包括元素移動到頁面其它位置,設定錨元素的:hover就可以。

p136 table元素border的2種模型:collapse|separate

表單元素

fieldset:分塊標題(group panel/box)

label的2種使用方式:巢狀包括input;使用for屬性關聯input(id)

p153 『全部css布局的根本都是3個基本概念:定位、浮動、margin操縱。』

ie 6-不支援margin:auto; 幸運的是,ie把text-align:center;誤解為讓全部東西居中,而不不過文字(。。。)

p159 在符合標準的瀏覽器中,假設元素的內容太大。它只會超出box之外。可是,ie會擴充套件整個元素(。

3列布局:分解為2個巢狀的兩列布局???

哈)p166 彈性布局:相對於字型大小(em單位)布局(對支援頁面縮放的瀏覽器而言沒有必要)

body 僅僅以em為單位設定容器的寬度。內部寬度仍然使用%

p170 faux列(略)

bug與修復bug

ie的『擁有布局』(haslayout)

設定下面屬性會使元素擁有布局:float、display:inline-block;、width/height、zoom、writing-mode:tb-rl;

ie7中新增了:overflow、min-width:不論什麼值、max-width:除none外不論什麼值

比如:ie中文字段落擁有布局。不會出現圍繞float元素的效果

又如:ie 6-中,擁有布局的元素會錯誤地擴充套件以適應內容尺寸 ...

hack和過濾器(略)

ie 6-上的常見bug:

不論什麼浮動元素的margin加倍???改為display:inline;

3px文字偏移

一系列浮動元素的最後元素的最後幾個字元反覆:刪除凝視(。

*ie6的『peek-a-boo』bug

*相對容器中的絕對定位(o, i c,****):.rel-container

案例研究

roma italia

cufon?用所選的字型顯示html。不須要不論什麼圖象或@font-face(???):所選字型的eula必須同意在web上進行字型嵌入

climb the mountains

:first-child

組合class 

精通CSS高階Web標準解決方案

內容簡介 精通css 高階web標準解決方案 將最有用的css技術彙總在一起,還總結了css設計中的最佳實踐,討論了解決各種實際問題的技術,填補了一直以來css圖書的空白。正因如此,英文版出版後,一時洛陽紙貴,多次重印,並迅速登上amazon圖書排行榜前列,最高時甚至與 哈利 波特 並駕齊驅,創造了...

精通CSS 高階Web標準解決方案(第2版)

跳轉至 導航 搜尋層疊重要度 也就是說,使用者 important可以覆蓋inline style important 使用者 作者 最後是瀏覽器 使用者 規則特殊性 次序 的計算 a,b,c,d如果相同,後定義的優先如果是inline style,a 1 b id選擇器 id 的個數 c 類 偽類...

web十五講,CSS高階

css display屬性值描述 none 此元素不會顯示。block 此元素將顯示為塊級元素,前後有換行符。inline 預設。此元素會被顯示為內聯元素,前後無換行符。inline block 行內塊元素。list item 此元素會作為列表顯示。run in 此元素會根據上下文作為塊級元素或內聯...