CSS3中新出現的技術

2022-05-05 09:18:10 字數 2886 閱讀 6315

**查詢 包含了乙個**型別和至少乙個使用如寬度、高度和顏色等**屬性來限制樣式表範圍的表示式。css3加入的**查詢使得無需修改內容便可以使樣式應用於某些特定的不同大小的裝置。即響應式布局。

在不使用 not 或 only 操作符的情況下,**型別是可選的,預設為 all 。

**查詢是大小寫不敏感的。包含未知**型別的查詢通常返回假。

操作符 not,and 和 only 可以用來構建複雜的**查詢。

若使用了 not 或 only 操作符,必須明確指定乙個**型別。

你也可以將多個**查詢以逗號分隔放在一起;只要其中任何乙個為真,整個**語句就返回真。相當於 or 操作符。

大多數**屬性帶有「min-」和「max-」字首,用於表達「小於等於」和「大於等於」。這避免了使用與html和xml衝突的「<」和「>」字元。如果你未向**屬性指定乙個值,並且該特性的實際值不為零,則該表示式被解析為真。

mozilla專有的**屬性 link

本質上css計數器是由css維護的變數,這些變數可能根據css規則增加以跟蹤使用次數。這允許你根據文件位置來調整內容表現。 css計數器是css2.1中自動計數編號部分的實現。

計數器的值通過使用counter-reset 和 counter-increment 操作,在 content 上應用 counter() 或 counters()函式來顯示在頁面上。

使用css計數器之前,必須被重置乙個值,預設是0。使用 counter() 函式來給元素增加計數器。

body 

h3:before

計數器巢狀

使用 counters() 函式,在不同級別的巢狀計數器之間可以插入字串。

ol 

li:before

有兩個主要的屬性被用來定義 css transforms:transformtransform-origin

當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。對於很多應用來講,彈性盒改進了塊模型,既不使用浮動,也不會在彈性盒容器與其內容之間合併外邊距。

許多設計師會發現彈性盒容易上手。彈性盒中的子元素通過在各個方向放置就可以以彈性的尺寸適應父元素的顯示區域。由於子元素的顯示順序和它們在**中 的順序是獨立的,通過使用彈性盒,定位子元素變得更加簡單,複雜的布局也能夠使用更清晰的**更簡單的實現。獨立顯示被設定成只針對可見元素,而不是基於**的宣告和導航順序。

彈性盒布局的定義中,它可以自動調整子元素的高和寬,來很好的填充任何顯示裝置中的可用顯示空間,收縮內容防止內容溢位。

不同於塊級元素基於垂直方向布局以及行內元素基於水平方向布局,彈性盒布局的演算法是方向無關的。

雖然塊級元素布局在頁面中工作良好,但是其定義不足以支援那種需要根據使用者**從豎直切換成水平等變化而進行方向切換、大小調整、拉伸、收縮的引用元件。

不同於將要出現的網格布局針對目標為大比例布局,彈性盒布局更適用於應用元件和小比例布局。這兩種都是css工作組為了能與不同使用者**、不同書寫模式和其他彈性需要進行協作而做出的努力。

包含在彈性容器內的文字自動成為匿名的彈性子元素。然而,只包含空白的彈性子元素不會被渲染,就好像它被設定為 display:none 一樣。

相鄰的彈性子元素不會發生外邊距合併。使用 auto 的外邊距會在垂直和水平方向上帶來額外的空間,這種性質可用於對齊或分隔臨近的彈性子元素。

為了保證彈性子元素有乙個合理的預設最小尺寸,使用min-width:automin-height:auto。對於彈性子元素,auto屬性計算其最小的寬高不小於其內容的尺寸,保證在渲染時其大小足夠容納內容。

彈性盒子的對齊會進行真正的居中,不像css的其他居中方法。這意味著即使彈性容器溢位,子元素仍然保持居中。有些時候這可能有問題,然而即使溢位了頁面的 上沿,或左邊沿(在從左到右的語言如英語;這個問題在從右到左的語言中發生在右邊沿,如阿拉伯文),因為你不能滾動到那裡,即使那裡有內容!

說起雖然元素的顯示順序與源**中的順序無關,這種無關僅對顯示效果有效,不包括語音順序和基於源**的導航。即使是 order 也不影響語言和導航序列。因此開發者必須小心排列源**中的元素以免破壞文件的可訪問性。

因為彈性盒子使用一種不同的布局邏輯,一些屬性會在彈性容器上無效。

注意不是所有的瀏覽器都支援不帶字首的屬性名。為了在大多數現代瀏覽器中應用這種特性,每個屬性必須寫三次: 一次用 -moz 字首,一次用 -webkit 字首,一次不使用字首。

@規則 是乙個css 語句,以 '@' (u+0040 commercial at)符號開頭,後面緊跟乙個標示符, 如果它在宣告塊外面則以第乙個分號';' (u+003b semicolon)結束,否則以第乙個宣告塊結束。

下面是一些@規則, 由它們的標示符指定, 每種規則都有不同的語法:

就像屬性值那樣,每條@規則都有不同的語法. 不過一些@規則可以歸為一類: 條件規則組. 這些語句使用相同的語法. 它們都巢狀語句,或者是規則或者是@規則

它們都表達: 它們所指的條件 (型別不同) 總等效於 true 或者 false,如果為 true 那麼它們裡面的語句生效。

條件規則組由css conditionals level 3 定義:

既然條件規則組可以巢狀語句, 那麼巢狀層級不定。

css3中新特性

一 背景 padding box 背景影象相對內邊距定位 預設值 border box 背景影象相對邊框定位 以邊框左上角為參照進行位置設定 content box 背景影象相對內容區域定位 以內容區域左上角為參照進行位置設定 備註 1.預設盒子的背景是在盒子的內邊距左上角對齊設定。backgrou...

富比士 區塊鏈技術新出現的13個用途

互鏈脈搏按 富比士科技委員會專家小組近日發表了一篇文章介紹了區塊鏈應用的文章,小組專家們梳理了區塊鏈13個方面的用途。值得注意的是,有些用途在中國已經開始有了用例,有些用途是過去中國區塊鏈公司很少提到的。翻譯 互鏈脈搏元尚 許多消費者可能聽說過區塊鏈技術,特別是在加密貨幣方面。然而,他們可能不知道它...

好玩的css3技術分享

開發工具與關鍵技術 dw,css3 說到css3是我學程式設計以來,最感興趣的一門技術,通過老師的學習,再自己的摸索一下。只學會css3一些簡單的技術。那我就分享一下我學習到的css3動畫吧!首先頁面布局什麼的就不多說了,定好div,弄好背景,設計好背景的尺寸,我們就開始設計動畫效果了。lizi 用...