CSS回顧系列0之雜談

2021-07-12 05:56:32 字數 2878 閱讀 4334

css不需要編譯,屬於瀏覽器解釋型語言,可以直接由瀏覽器執行。之前看的w3school教程入門css,這段時間我看了看doye的手冊,遇到不太理解的地方的話就去查閱一些資料並在codeopen上面做一些實踐,下面我來講講我認為一些比較重要的收穫。
position:可以取值static、absolute、relative、fixed、center、page、sticky,後三者是css3新增屬性值,center和page所有瀏覽器都暫時不支援,應該和absolute有點含義疊加,所以不被實現。

css3position含義:

css3position實現情況:

以上兩張涉及到ie方面的相容性問題,以後一系列的css問題會越來越少地兼顧ie css tricks,因為全世界包括ms自身都在盡全力加速淘汰ie。

z-index:當position的值為非static時,其層疊級別通過z-index屬性定義。auto:元素在當前層疊上下文中的層疊級別是0。有一點提一下,當z-index未定義或者值為auto時,在ie6,7下會建立新的區域性層疊上下文,而在高階瀏覽器中,按照規範不產生新的區域性層疊上下文。

display:ie6,7只支援inline元素設定為inline-block,其它型別元素均不可以。

float

如果float不是none,當display:inline-table時,display的計算值為table;當display:inline | inline-block | run-in | table-* 系時,display的計算值為block,其它情況為指定值;

float在絕對定位和display為none時不生效。

對應的指令碼特性為stylefloat(ie)或cssfloat(非ie)。(注意這裡為stylefloat或cssfloat,而不是float)。雖然說html、css、js要分離,但是有時候這些小細節可能必須要用上。

————————————-我是身材苗條的完美分割線—————————

上面的內容主要來自於手冊,我想了想,這樣講好像沒什麼意思,還是主要來講講css3以及一些自己做的慕課筆記吧。

border-color

如果你設定了border的寬度是3px,那麼你就可以在這個border上使用3種顏色,每種顏色顯示1px的寬度,如果顏色種類數量小於寬度畫素數量,那麼最後乙個顏色將被新增到剩下的寬度。目前只有ff支援,加上-moz字首可以實現邊框漸變色效果;這是我在codepen上面的乙個小demo

border-image

需要注意有個特殊的相關屬性:border-corner-image:border-top-left-image , 取值有none、(使用絕對或者相對url位址指定背景影象)、(邊框寬度用固定畫素值表示)、(邊框寬度用百分比表示)、[stretch | repeat | round](拉伸 | 重複 | 平鋪,default is stretch)

瀏覽器相容性:

這裡有張鑫旭前輩的一些使用經驗,還有這個。

border-image引數有三個:border-image-source、裁剪位置border-image-slice、重複性border-image-repeat,類似於css2的background。裁剪位置類似於css的clip屬性,重複性類似於background,但是區別較大,還有round、stretch–default,張前輩用九宮格模型來闡釋了border-image-repeat。寬度和展示方式。說實話沒想到border-image還有這麼大講究。

等同於

zxx前輩引入了乙個概念:

在html5文件宣告下,塊狀元素內部內聯元素的行為表現,就好像塊狀元素還有乙個(更有可能是兩個–前後)看不見沒有寬度沒有實體的空白節點,暫時稱之為幽靈空白節點。引入乙個下邊緣留空隙的例子:

div>說實話zxx前輩的那篇文章真是夠長的,以前他寫的文章真是夠用心的,實在佩服。前輩盡可能列出解決問題的所有辦法並試圖闡明其真正原理,實際上肯定還有更多的辦法。實際工作當中我們經常發現問題後很快找到乙個輕巧的解決辦法,但是如果該方法是沒有認真思考而得出的結果的話,實際上還是很有可能會再次出現許多bug,所以分析問題得盡量看清其本質再動手。

談到這個例子,首先我們得明確現有條件真實狀況,分兩方面乙個是明確當前dom元素特點:和文字都是內聯元素;第二個是樣式使用條件和含義,這個口說無憑,給出一些解決辦法再結合手冊看的話就更清楚許多。解決辦法有:

1. 讓vertical-align失效:vertical-align適用於這樣的內聯元素,所以可以讓去inline,不帶來其他影響的前提下,block化或者其他定位;

2. 告別vertical-align預設的baseline;

3. 告別line-height預設的normal–約為等於1.2,mdn-line-height;

4. 間接手段,font-size設為0,line-height也就跟著變為0,不過這樣文字不就消失了、、;

寫了這麼多,發現css還是得按一定順序來慢慢總結,不然思路還是有點亂,移動端布局也得抽出機會作出一定總結。

CSS3回顧系列0

查詢包括一種 型別 以及通過使用寬高,顏色等 特徵來限制樣式表作用域的表示式 作為新增在css3中的特性,可以使得內容個性定製化呈現在不同特定輸出裝置上面,而不必改變內容本身.一行 勝千言 rel stylesheet media max width 800px href example.css m...

併發系列之 sleep 0

作業系統前置知識 在講兩者的區別前,先回顧一下作業系統的知識。作業系統中,cpu競爭有很多種策略 在時間片演算法中,所有的程序排成乙個佇列。作業系統按照他們的順序,給每個程序分配一段時間,即該程序允許執行的時間。如果在時間片結束時程序還在執行,則cpu將被剝奪並分配給另乙個程序。如果程序在時間片結束...

OpenGL ES系列之0 建立Xcode專案

為iphone建立乙個opengl es的xcode專案是很容易的事,特別是在蘋果公司的sdk發布時引入了模板的概念後。我們所需要做的只是在適當的地方快速而簡單的加入 這就是我們今天的主題。好,我們假定你肯能以前已經在哪看過這個模板或執行過用這個模板建立的專案。我們說要做的就是移除那個旋轉的彩色正方...