-webkit-margin-before 及 扩展浏览器前缀内核

Posted 2021-01-08 辰辰plus

-webkit-margin-before 是CSS3.0对于文章段P容器的定义方法语句。

display：block只定义了P容器为一个块，

而：-webkit-margin-brfore/after：1em ---- 分别定义P的上边距和下边距的数值是1倍字体高度，如果是10px的字，那么边距就为10px;

-webkit-margin-start/end：0px ---- 定义P容器为左右边距都为0px。

也就是说CSS3中：

p {

display： block;

-webkit-margin-before：1em;

-webkit-margin-end：1em;

-webkit-margin-after：1em;

-webkit-margin-start：1em;

}

相当于CSS2中：

p {

display： block;

margin-top： 1em;

margin-right： 1em;

margin-bottom： 1em;

margin-left： 1em;

}

但由于CSS3要求浏览器版本较高，所以国内并没有流行CSS3样式，依然以CSS2为主流，但以后应该是CSS3的天下，因为它代表着先进。

 

浏览器内核：

　　webkit最初是Apple公司的一个开源项目，他们自家的Safari有用，之后Google也是用这个排版引擎加上自己的V8 javascript引擎建立了一个开源的浏览器项目Chromium，并且利用这个项目只做了自家的Chrome。同时这两家在移动平台上的浏览器内核都是用的webkit。得益于Chromium引擎，在PC平台上也有很多的webkit浏览器：360、世界之窗、枫树浏览器、太阳花浏览器、搜狗浏览器、遨游3、猎豹浏览器。基本上说自己是双核，有什么极速模式的，都是用的Chromium，相对应的，Microsoft（微软）的IE用的是Trident排版引擎，也就是常说的IE内核，Firefox也有自己的Gecko排版引擎。Apple的iBooks同样也使用了webkit作为排版引擎，而Sigil这个编辑软件，用的则是Chromium，因为也是webkit内核。

浏览器前缀：

　　常用：-webkit-（Chrome）、

　　　　　-moz-（Firefox）、

　　　　　-0-（Opera）、

　　　　　-ms-（IE）

　　为什么要有私有前缀呢：

　　　　制定html和CSS标准的组织W3C动作是很慢的，通常，有W3C组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但是W3C不会为这个属性制定标准，而是要走复杂的程序，经过很多的审查，而浏览器商不愿意等那么久，他们觉得一个属性已经够成熟了，就会在浏览器中加入支持，但是避免日后W3C公布了标准，border-radius的标准写法确立之后，再让新版的浏览器支持border-radius属性。

　　　　例如：Chrome10是不认border-radius这种写法的，只能用-webkit-border-radius，而Chrome12就能认了，于是在写CSS的时候，这样就能确保Chrome10和12的网页都能正常显示。