margin-before: 1em; margin-after: 1em;margin-start:0px;margin-end: 0px;

总的来说:这是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浏览网页的时候都能够正确显示。
时间: 2024-10-28 23:57:37

margin-before: 1em; margin-after: 1em;margin-start:0px;margin-end: 0px;的相关文章

用margin还是用padding?(3)—— 负margin实战

看过一篇文章是关于我知道你不知道的负Margin,里面对margin做了总结: 当margin四个值都为正数值的话,那么margin按照正常逻辑同周围元素产生边距.当元素margin的top和left是负值时会引起元素的向上或向左位置移动.而当元素margin的bottom和right是负值时会影响右边和下边相邻元素的参考线. 接下来就讲在实际开发中用到的几个比较常用的负margin实例: 1.bootstrap框架的栅格系统是一个亮点,它就用了负margin来完美的解决了container 和

深入理解CSS中的margin

1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准之中,jquery中有相对应的方法 margin与可视尺寸 1.1使用那个与没有设定width/height的普通block水平元素 2.2只适用于水平方向尺寸 <body style="background-color:#1a2b3c"> <div style=&quo

Margin的深入了解

Margin的深入了解 关于margin对于一个前端开发者是非常常见的一个CSS属性,而我今天所分享margin属性是为了更加深入的了解margin的一些特性,从而在实际应用中,减少代码量.主要内容如下: 1.关于margin的百分比特性. 2.关于margin的auto的作用机制. 3.关于margin的重叠. 4.关于margin的负值. 一.margin的百分比特性. 我们使用百分比时经常会忽略这个问题,margin的百分比相对于我们直接设置margin-top这类有所不同,margin的

【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 width: 300px; 9 height: 200px;/*浏览器默认字体大小16px*/ 10 margin:1em;/*em以父元素字体为基准*/ 1

须知的css——margin不重叠的情形

margin重叠 摘自css2.1规范中文版 CSS中,两个或者多个盒(可能但不一定是兄弟)的相邻的margin会被结合成一个margin.Margin按这种方式结合叫重叠(collapse),产生的结合的margin叫做重叠margin. margin重叠的计算规则 摘自css2.1规范中文版 当两个或者更多的margin合并时,产生的margin宽度为合并margin宽度中的最大值.至于负margin,就从正相邻margin的最大值中减去负相邻margin的绝对值的最大值.如果没有正marg

[ css 外边距 margin ] css中margin外边距合并问题讲解及实例演示

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距;合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者 外边距合并外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者.当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并.请看下图: CSS 外边距合并实例 1 亲自试一试

css007 margin padding border

css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周围环绕着装饰盒子的不同属性 Pad ding:内容和其框线之间的距离 Margin:一个标签和另一个标签之间的距离 Border:盒子周边的直线 Background-color:填充边框内部空间的间隔 2.用margin和padding控制空间 (margin控制盒子外部和其他元素之间的空间: p

padding 和 margin 不为人知的一面 ---(深度整理)

一说起盒模型,大家都会说,content+padding+margin+border. 恩,就这么几个,概念网站都写得清清楚楚了,但是你对他们的理解又有多少? 经常遇到“这里怎么回事?”“明明写了怎么会不起作用?”一找就是半天╮(╯▽╰)╭(我也发生过).归根结底还是对本质不够理解. 这里我就查找了许多资料,整理了一下,现在让我们来挖挖padding和margin的坟吧 ! 在了解padding和margin之前 ,我们先要知道什么是块元素,什么是内联元素(行内元素).一个表格搞定.   块级元

不要告诉我你懂margin

你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?-- 写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解.介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理. Margin是什么 CSS 边距属性定

[转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(padding).边界(border)和边距(margin). 对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次.关系和相互影响