-webkit-margin-before

原文：https://www.cnblogs.com/guyw/p/4369653.html

-----------------------------------------------

-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浏览网页的时候都能够正确显示。