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浏览网页的时候都能够正确显示。
margin-before: 1em; margin-after: 1em;margin-start:0px;margin-end: 0px;的更多相关文章
- margin 依附与可见的内容,不能为margin而写margin
margin 依附于可见的内容,不能为margin而写margin <!DOCTYPE html><html><head><style> p{marg ...
- margin和padding那点事及常见浏览器margin padding相关Bug
用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...
- CSS 之 内层div填充margin,外层div的背景色不会覆盖该margin
外层元素(如div)中只有一个非空子元素,此时margin是被折叠了.两者之间取最大的margin值,表现在外层父元素上,而不是内层子元素. 注意: (1)只有垂直方向上才会出现此现象,水平方向不会出 ...
- 用margin还是用padding?(3)—— 负margin实战
看过一篇文章是关于我知道你不知道的负Margin,里面对margin做了总结: 当margin四个值都为正数值的话,那么margin按照正常逻辑同周围元素产生边距.当元素margin的top和left ...
- CSS margin 属性
设置外边距的最简单的方法就是使用 margin 属性. margin 属性接受任何长度单位,可以是像素.英寸.毫米或 em. margin 可以设置为 auto.更常见的做法是为外边距设置长度值.下面 ...
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
- 深入理解CSS中的margin
1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...
- 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...
- 详述盒子模型(包含padding、border、margin的详细用法和描述)
提起盒子模型,我想无论是对于一个前端资深开发人员还是前端入门开发人员来说都不陌生,这是CSS最基础的知识. 但是惭愧地说,我之前理解的盒子模型,只是文字上的理解.我知道定义一个元素的宽度和高度时,设置 ...
- margin属性总结,你想知道的这里都有
一.前言 在学习CSS时,遇到的很多问题都是和margin有关,这个小怪兽总是出其不意的让我的界面排版变的混乱,还让人摸不着头脑,原因还是在于我对他的一些属性没有进行一个深入的了解,导致我在设计之初就 ...
随机推荐
- 用Jedis连接Redis
jedis中的方法名,和Redis的命令几乎一样 1.jar包,作为测试只需要一个jar 2.代码 package com; import java.util.HashMap; import java ...
- 为Debian/Ubuntu的apt-get install添加自动补齐/完成功能
Debian/Ubuntu的apt-get太常用了,不过偶尔可能也会碰到不太熟悉,想不起来的包的名称,除了去debian packages去查找,另外的方法就是给Debian/Ubuntu添加自动补齐 ...
- 一、Daily Scrum Meeting【Alpha】------Clover
[Alpha]Daily Scrum Meeting 第一次 [Alpha]Daily Scrum Meeting 第二次 [Alpha]Daily Scrum Meeting 第三次 [Alpha] ...
- ubuntu下升级R版本
ubuntu下升级R版本 在测试<机器学习 实用案例解析>一书的邮件分类代码时,windows系统下rstudio中无法读取特殊字符,在ubuntu下可以.在ubuntu虚拟机下安装t ...
- Ubuntu 14.04 LTS 安装 spark 1.6.0 (伪分布式)-26号开始
需要下载的软件: 1.hadoop-2.6.4.tar.gz 下载网址:http://hadoop.apache.org/releases.html 2.scala-2.11.7.tgz 下载网址:h ...
- Python Day3
一.set集合 集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 # 创建数值集合 list_1 = ...
- 11月8日PHP练习《留言板》
一.要求 二.示例页面 三.网页代码及网页显示 1.denglu.php 登录页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- 10月24日下午PHP封装
class Ren { private $name; private $sex; private $age;//年龄必须在18-50岁之间 function __construct($n) { $th ...
- IO
文件过滤 http://codego.net/9245/ C# 文件处理 http://wenku.baidu.com/link?url=yXKiIA_OZYR4MIynDgz-qhOnfJoCyOQ ...
- SQL Server附加数据库时报1813错误的解决方案
SQL Server附加数据库时报1813错误的解决方案 无法打开新数据库 'ASR'.CREATE DATABASE 中止. 文件激活失败.物理文件名称'E:\SqlServer\MSSQL\D ...