CSS3 新属性
2016-01-20 13:21
746 查看
SegmentFault
搜索问答
文章
笔记
职位
···更多
消息
注册
· 登录
笔记
笔记详情
webkit-margin-before/after/start/end
飞溪流萤 0 2015年10月22日
发布
建分支 0 分支
收藏 1 收藏
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 总的来说:这是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 4000 -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这种写法的, |
相关文章推荐
- css三角原理
- IOS 设置导航栏全局样式
- 自定义样式 实现文件控件input[type='file']
- html定义input type=file 样式的方法
- CSS基础:text-overflow:ellipsis溢出文本的显示样式
- :nth-child(css3的伪类选择器)
- css段落首行缩进,文字间距
- 终于搞懂了CSS实现三角形图标的原理
- css3动画简介以及动画库animate.css的使用
- 利用css中的em实现弹性页面布局
- Css中的px em rem区别
- 页面加载顺序及解析流程分享
- css全局样式覆盖默认的样式
- coocsstudio使用经验,导出资源
- lc_switch插件实现苹果IOS风格单复选框样式按钮
- CSS3中的rem值与px之间的换算
- CSS3网格布局基础知识 - 弹性尺寸的定义单位:fr 简介及实例
- CSS(Cascading Style Shee)
- css设置table里面单元格强制换行和强制不换行
- 【HTML打卡】0119css 文字、图片、控制器、引入方式、初始化