css有3種定位機制:普通流,浮動和絕對定位.
除非專門指定,否則所有框都在普通流中定位,即普通流中的元素位置由元素在(x)html中的位置決定.
通過使用position屬性,可以選擇4種不同型別的定位:
static 元素框正常生成
relative 元素框偏移某個距離:正常元素可以通過設定垂直或水平位置,讓這個元素"相對於"它的起點進行移動.若將相對定位中的top設為20px,則框將在原位置下面20畫素地方,類似如果left設為30畫素,則會在元素左邊建立30畫素的空間,即元素會向右移動.
absolute 元素框從文件完全刪除,並相對於其包含塊定位:絕對定位使元素位置和文件流無關,因此不佔據空間.絕對定位位置相對於最近的已定位祖先元素,如果沒有,則位置相對於最初的包含塊.因為絕對定位框與文字流無關,所以可以覆蓋頁面上的其他元素,通過設定z-index屬性來控制這些框的堆放次序.
fixed 元素框表現類似於將position設定為absolute,不過包含塊是視窗本身
浮動的框可以向左或向右移動,直到其外邊緣碰到另乙個元素框為止,浮動框不在文件的普通流中,所以文件的普通流中的塊框表現的就像浮動框不存在一樣.
css中通過float屬性實現元素的浮動
css2中引入一種新的簡單選擇器-統配選擇器,顯示為*,該選擇器可以與任何元素匹配: *
在html中class值可能包含多個類名,比如:,多個類名順序無關緊要.假設aaa元素都是粗體,bbb元素都為斜體,而同時包含aaa和bbb的所有元素還有乙個銀色的背景,則可以寫作:
.aaa
.bbb
.aaa.bbb
通過把2個類選擇器鏈結在一起,僅可以選擇同時包含這些類名的元素.
類選擇器和id選擇器可能區分大小寫,這取決於文件的語言.html和xhtml將類和id值定義為區分大小寫.
ccs2引入了屬性選擇器,屬性選擇器根據元素的屬性及屬性值來選擇元素.
把含有title屬性的所有元素變為紅色: *[title]
對擁有href屬性且僅僅位錨a元素應用樣式:a[href]
對帶有alt屬性的img元素應用樣式: img[alt] 注意屬性值是可以虛構的.
選擇特定屬性值的元素: a[href=www.abc.com/index.asp]
多條件匹配:a[href="***"][title="zzz"]
根據部分屬性值進行匹配:p[class~="imp"]
下表是對這些選擇器的簡單總結： 型別
描述[abc^="def"]
選擇 abc 屬性值以 "def" 開頭的所有元素
[abc$="def"]
選擇 abc 屬性值以 "def" 結尾的所有元素
[abc*="def"]
選擇 abc 屬性值中包含子串 "def" 的所有元素
下面**只會選擇lang屬性值等於en或以en-開頭的所有元素.
*[lang|="en"]
後代選擇器可以作為某元素後代的元素.
只對h1元素中的em元素應用樣式:h1 em
有關後代選擇器乙個易忽視的方面是2個元素間層次間隔可以是無限的.比如ul em,則會選擇ul中的em元素,而不管em巢狀的層次多深.
如果不希望選擇任意的後代,只選擇某個元素的子元素,可以使用子元素選擇器.例如,如果希望選擇只作為h1元素子元素的strong元素:h1 > strong
下面**會選擇td元素子元素的所有p元素,該td元素從table繼承,該table元素有乙個包含company的類屬性.
相鄰兄弟選擇器可選擇緊接在另一元素後的元素,且二者有相同的父元素.如要增加緊接在h1元素後面出現的p元素的上邊距:h1 + p .注意h1和p不是包含關係,二是接壤關係.該選擇器選擇緊接在h1元素後出現的p元素,h1和p擁有共同的父元素.
css偽類用於向某些選擇器新增特殊的效果.
偽類可以和css類配合使用:a.red : visited
css2的first-child偽類可以來選擇元素的第乙個子元素:
p:first-child
上行**將作為某個元素第乙個子元素的所有p元素設定位粗體.必須宣告,first-child才能在ie中生效.
css2的lang偽類使你有能力為不同語言定義特殊規則,以下**為屬性值為no的q元素定義引號的型別:
q:lang(no)
first-line偽元素用於向文字首行設定特殊樣式,只能用於塊級元素.
first-letter偽元素用於向文字首字母設定特殊樣式
before偽元素在元素內容前面插入新內容:h1:before 在每個前插入一幅
after偽元素在元素內容後插入新內容
使用/* */可以在css檔案中插入注釋
惡補web之二 css知識 3
css有3種定位機制 普通流,浮動和絕對定位.除非專門指定,否則所有框都在普通流中定位,即普通流中的元素位置由元素在 x html中的位置決定.通過使用position屬性,可以選擇4種不同型別的定位 static 元素框正常生成 relative 元素框偏移某個距離 正常元素可以通過設定垂直或水平...
WEB前端效能優化之二 css優化
1 把樣式表置於頂部 2 避免使用css表示式 expression 表示式的問題就在於它的計算頻率要比我們想象的多。不僅僅是在頁面顯示和縮放時，就是在頁面滾動 乃至移動滑鼠時都會要重新計算一次。給css表示式增加乙個計數器可以跟蹤表示式的計算頻率。在頁面中隨便移動滑鼠都可以輕鬆達到10000次以上...
CSS3屬性之二 box shadow
box shadow 陰影水平偏移值 可取正負值 陰影垂直偏移值 可取正負值 陰影模糊值 陰影顏色 設定塊陰影 box shadow這個屬性應用的非常普遍，可以使你的元素立刻變得漂亮起來，只是記得不要把值設得太離譜。box shadow的四個引數 x offset x軸偏移 y offset y軸偏...