-webkit-margin-before


總的來說:這是CSS3.0的對於文章段P容器的定義方法語句!
display:block這個樣式,只定義了P容器為一個塊;
后面四句是CSS3中的樣式定義方法;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
分別定義p的上邊距和下邊距的數值是1倍字體高度,如10px像素的字,那么邊距就為10px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
上面二句則定義為左右邊距都為0PX,這個應該好理解;
所以以上
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
相當於CSS2.0中的
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-right: 0px;
margin-left: 0px;
}

但由於CSS3.0要求瀏覽器版本較高,所以國內並沒有流行CSS3.0樣式,依然以CSS2.0為主流,但以后應該是CSS3.0的天下,因為它代表着先進性。

下面是講下它的由來:

其實這就是W3C樣的CSS3的一個定義P容器內容的樣式:
“-webkit-margin-before”、“-webkit-margin-after”,“-webkit-margin-start”,“-webkit-margin-end”
這個是CSS3階段提出的一個屬性,現在甚至連草案都沒進,目前只有webkit支持。
before、after、start、end是用在對文本的。比如說,中文和英文是從左到右,從上到下閱讀的,那么,before = top, start = left,end = right,after = bottom。這叫做“writing-mode”,簡單來說就是書寫方式。
但是,日文的書寫方式就不一樣了,他們是從上至下,從右到左書寫的。那么在這種write-mode下,before = right, start = top,end = bottom,after = left。
margin-before的用意就是,不論是哪種writing-mode,我們都可以設定“開始那邊的邊距”這樣的內容,而不需要為了適應不同的writing-mode寫幾種margin。
關於writing-mode,w3c有詳細的介紹,看完就懂了。
webkit指的是一種HTML排版引擎,作用就是把根據HTML和CSS的代碼顯示出頁面。最初是Apple公司的一個開源項目,他們自家的瀏覽器Safari有用。之后Google也使用這個排版引擎加上自己的V8 Javascript引擎建立了一個開源的瀏覽器項目Chromium,並且利用這個項目只做了自家的瀏覽器Chrome。同時這兩家在移動平台上的瀏覽器也是用Webkit內核的。因此,隨着iOS和安卓移動終端的普及,用Webkit的瀏覽器也越來越多。而得益於Chromium引擎,在PC平台上也有很多Webkit瀏覽器,比如360呀,世界之窗呀,楓樹瀏覽器呀,太陽花瀏覽器呀,搜狗瀏覽器呀,遨游3呀,獵豹瀏覽器呀。基本上說自己是雙核,有什么極速模式的,都是用的Chromium。相對應的,微軟的IE瀏覽器用的是Trident排版引擎,也就是常說的IE核心,火狐瀏覽器也有自己的Gecko排版引擎。
而Apple的iBooks同樣也用了webkit作為排版引擎,所以iBooks和webkit內核的瀏覽器有很多相似之處。而Sigil這個編輯軟件,用的則是Chromium,因此也是webkit內核的。看看Sigil的預覽模式就知道它肯定是用的Chromium了。
在CSS屬性能中,我們常常能看到-webkit-,-moz-之類的前綴,這種就叫做瀏覽器私有前綴,是瀏覽器對於新CSS屬性的一個提前支持。-webkit-是webkit內核的,-moz-是Firefox Gecko內核,moz代表的是Firefox的開發商Mozilla。
為什么要有私有前綴呢?因為制定HTML和CSS標准的組織W3C動作是很慢的。通常,有w3c組織成員提出一個新屬性,比如說圓角border-radius,大家都覺得好,但是w3c不會為這個屬性制定標准,而是要走很復雜的程序,經過很多審查。而瀏覽器商不願意等那么久,他們覺得一個屬性已經夠成熟了,就會在瀏覽器中加入支持。但是避免日后w3c公布標准時有所變更,就會加入一個私有前綴,比如-webkit-border-radius,通過這種方式來提前支持新屬性,等到日后w3c公布了標准,border-radius的標准寫法確立之后,再讓新版的瀏覽器支持border-radius這種寫法。
比方說,Chrome 10是不認border-radius這種寫法的,只能用webkit-border-radius,而Chrome12就能認了。於是在寫CSS的時候,這樣寫就能確保Chrome10和Chrome12瀏覽網頁的時候都能夠正確顯示。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM