CSS常用属性-定位(Positioning) 左手的ㄟ右手 2022-06-06 06:00 199阅读 0赞 ## 文章来自[CSS参考手册][CSS],作者:渔人码头 ## ## 1.position ## ## 语法: ## **position**:static | relative | absolute | fixed | center | page | sticky **默认值**:static **适用于**:除[display][]属性定义为`table-column-group | table-column`之外的所有元素 **继承性**:无 **动画性**:否 **计算值**:指定值 **媒体**:视觉 ## 取值: ## static: 对象遵循常规流。此时4个定位偏移属性不会被应用。 relative: 对象遵循常规流,并且参照自身在常规流中的位置通过[top][],[right][],[bottom][],[left][]这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。 absolute: 对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到`body`元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。 fixed: 与`absolute`一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。 center: 与`absolute`一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3) page: 与`absolute`一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个`absolute`模式。(CSS3) sticky: 对象在常态时遵循常规流。它就像是`relative`和`fixed`的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如`fixed`。该属性的表现是现实中你见到的吸附效果。(CSS3) \* CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新 ## 说明: ## **检索对象的定位方式。** * 当`position`的值为`非static`时,其层叠级别通过[z-index][]属性定义。 * 绝对定位的元素,在[top][],[right][],[bottom][],[left][]属性未设置时,会紧随在其前面的兄弟元素之后,但在位置上不影响常规流中的任何元素。用这个特性你或许会干这样的事:[demo][] * 对应的脚本特性为**position**。 ## 兼容性: ## * 浅绿 = 支持 * 红色 = 不支持 * 粉色 = 部分支持 <table style="color:rgb(102,102,102); border-collapse:collapse; border-spacing:0px; table-layout:auto"> <thead> <tr> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Values</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">IE</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Firefox</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Chrome</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Safari</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Opera</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">iOS Safari</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Android Browser</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Android Chrome</span></th> </tr> </thead> <tbody> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> <strong><span style="font-size:12px">Basic Support</span></strong></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+<sup><a href="http://www.css88.com/book/css/properties/positioning/position.htm#support1" style="color:rgb(0,128,0)" rel="nofollow">#1</a></sup></span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">2.0+<sup><a href="http://www.css88.com/book/css/properties/positioning/position.htm#support2" style="color:rgb(0,128,0)" rel="nofollow">#2</a></sup></span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">4.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">15.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">2.1+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">18.0+</span></td> </tr> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> <span style="font-size:12px">fixed</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">6.0</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">2.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">4.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">15.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,221,221)"> <span style="font-size:12px">2.1-2.3<sup><a href="http://www.css88.com/book/css/properties/positioning/position.htm#support3" style="color:rgb(0,128,0)" rel="nofollow">#3</a></sup></span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">18.0+</span></td> </tr> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">7.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">3.0+</span></td> </tr> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> <span style="font-size:12px"></span>center | page</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">6.0-11.0</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">2.0-42.0</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">4.0-47.0</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">6.0-9.0</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">15.0-32.0</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">6.0-9.0</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">2.1-4.4.4</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">18.0-42.0</span></td> </tr> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> <span style="font-size:12px">sticky</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">6.0-11.0</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">2.0-31.0</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">4.0-47.0</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">6.0</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">15.0-32.0</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0-9.0<sup style="margin-left:5px; padding:0px 3px; background-color:rgb(255,153,0); white-space:nowrap">-webkit-</sup></span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">2.1-4.4.4</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">18.0-42.0</span></td> </tr> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">32.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.1-9.0<sup style="margin-left:5px; padding:0px 3px; background-color:rgb(255,153,0); white-space:nowrap">-webkit-</sup></span></td> </tr> </tbody> </table> 1. IE如果在 [quirks mode][]下将不支持; 2. Firefox30.0开始支持 `tr`, `thead`, `tfoot`, `tbody` 定义 `relative`,Firefox30.0之前的版本及其它浏览器都只能给 `table` 定义 `relative` 用以约束内部元素的定位; 3. 需要定义了 <meta name="viewport" content="width=device-width, user-scalable=no"> 才生效 ## 2. z-index ## ## 语法: ## **z-index**: auto | [<integer>][integer] **默认值**:auto **适用于**:定位元素。即定义了[position][CSS]为`非static`的元素 **继承性**:无 **动画性**:当值为[<integer>][integer]时 **计算值**:指定的值 **媒体**:视觉 ## 取值: ## auto: 元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文,除非它是根元素。 [<integer>][integer]: 用整数值来定义堆叠级别。可以为负值。 ## 说明: ## **检索或设置对象的层叠顺序。** * `z-index`用于确定元素在当前层叠上下文中的层叠级别,并确定该元素是否创建新的局部层叠上下文。 * 每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定(每个元素仅属于一个层叠上下文)。 * 同一个层叠上下文中,层叠级别大的显示在上面,反之显示在下面。 * 同一个层叠上下文中,层叠级别相同的两个元素,依据它们在HTML文档流中的顺序,写在后面的将会覆盖前面的。 * 不同层叠上下文中,元素的显示顺序依据祖先的层叠级别来决定,与自身的层叠级别无关。 * 当`z-index`未定义或者值为`auto`时,在IE6,7下会创建新的局部层叠上下文,而在高级浏览器中,按照规范不产生新的局部层叠上下文,如下例: **demo:** > `` > > div {position: relative;}p {position: absolute;}.a {background: #f00;z-index: 10;}.b {background: #0ff;z-index: 3;}<div class="test"><p class="a">asdas</p></div><div class="test2"><p class="b">asdas</p></div> 细心的你会发现上述代码在IE6,7下的呈现与高级浏览器下不同。.test1和.test2未设置z-index,在高级浏览器下不会产生新的局部层叠上下文,也就是说它们的子元素没有被新的局部层叠上下文包裹,那么它们的子元素就处在同一个层叠上下文中,可以直接通过自身的层叠级别来决定显示顺序,所以结果是.a 覆盖了.b,因为.a的层叠级别比.b高;而在IE6,7下,.test1和.test2会产生新的局部层叠上下文,即它们的子元素被新的局部层叠上下文包裹,于是子元素显示顺序只能依赖.test1和.test2层叠级别来确定。所以结果是.b 覆盖了.a,因为.b的父元素.test2在HTML文档流中排在.test1之后,后来者居上覆盖前者。参见demo: [z-index创建局部层叠上下文在IE6,7下与高级浏览器下的区别][z-index_IE6_7] * 对应的脚本特性为**zIndex**。 ## 兼容性: ## * 浅绿 = 支持 * 红色 = 不支持 * 粉色 = 部分支持 <table style="border-collapse:collapse; border-spacing:0px; table-layout:auto"> <thead> <tr> <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Values</th> <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> IE</th> <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Firefox</th> <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Chrome</th> <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Safari</th> <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Opera</th> <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> iOS Safari</th> <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Android Browser</th> <th style="margin:0px; padding:6px 10px; text-align:left; font-size:13px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> Android Chrome</th> </tr> </thead> <tbody> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> <strong>Basic Support</strong></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 2.0+</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 4.0+</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 15.0+</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 2.1+</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 18.0+</td> </tr> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> 负值 <sup style="font-size:12px"><a href="http://www.css88.com/book/css/properties/positioning/z-index.htm#support1" style="color:rgb(0,128,0)" rel="nofollow">#1</a></sup></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> 1.0-2.0</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 4.0+</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 15.0+</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 6.0+</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 2.1+</td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 18.0+</td> </tr> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> 3.0+</td> </tr> </tbody> </table> 1. z-index负值是CSS2.1中定义的,在CSS2中是不被支持的; ## 3. top、right、bottom、left ## ### top ### ## 语法: ## **top**: auto | [<length>][length] | [<percentage>][percentage] **默认值**:auto **适用于**:定位元素。即定义了[position][CSS]为`非static`的元素 **继承性**:无 **动画性**:当值为[<length>][length] | [<percentage>][percentage]时 **计算值**:当[position][CSS]为`static`时,计算值是`auto`。 为`relative`时,如果`top`和`bottom`都是`auto`,则它们的计算值是`0`;如果`top`和`bottom`其中一个为`auto`,则`auto`相当于另一个的负值,即top = -bottom;如果`top`和`bottom`的值都不为`auto`,则忽略`bottom`。 否则在其它情况下,当指定值为[<length>][length]时,计算值为指定值,当指定值为[<percentage>][percentage]时,计算值为计算后的绝对值。除去这些情况,都为auto **媒体**:视觉 ## 取值: ## auto: 无特殊定位,根据HTML定位规则在文档流中分配 [<length>][length]: 用长度值来定义距离顶部的偏移量。可以为负值。 [<percentage>][percentage]: 用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。 ## 说明: ## **检索或设置对象参照相对物顶边界向下偏移位置。** * 该属性用来指定盒子参照相对物顶边界向下偏移。相对定位元素的相对物是自身,绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值 * 对应的脚本特性为**top**。 ## 兼容性: ## * 浅绿 = 支持 * 红色 = 不支持 * 粉色 = 部分支持 <table style="border-collapse:collapse; border-spacing:0px; table-layout:auto"> <thead> <tr> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Values</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">IE</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Firefox</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Chrome</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Safari</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Opera</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">iOS Safari</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Android Browser</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Android Chrome</span></th> </tr> </thead> <tbody> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> <strong><span style="font-size:12px">Basic Support</span></strong></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">2.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">4.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">15.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">2.1+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">18.0+</span></td> </tr> </tbody> </table> 1. 在IE6及以前的版本下,如果`top`和`bottom`都定义了`非auto`的值,那么 bottom 的计算值将会被设置为 -top (无论是否显式的定义了 [height][] 或 [max-height][]),它的指定值将被忽略,说白了,你将无法在不指定某个元素高度的情况,通过给元素指定`top`和`bottom`的方式来进行高度拉伸; ### right ### ## 语法: ## **right**:auto | [<length>][length] | [<percentage>][percentage] **默认值**:auto **适用于**:定位元素。即定义了 <' [position][CSS] '> 为「非static」的元素 **继承性**:无 **动画性**:当值为[<length>][length] | [<percentage>][percentage]时 **计算值**:当[position][CSS]为`static`时,计算值是`auto`。 为`relative`时,如果`right`和`left`都是`auto`,则它们的计算值是`0`;如果`right`和`left`其中一个为`auto`,则`auto`相当于另一个的负值,即left = -right;如果`right`和`left`的值都不为`auto`,则忽略`right`。 否则在其它情况下,当指定值为[<length>][length]时,计算值为指定值,当指定值为[<percentage>][percentage]时,计算值为计算后的绝对值。除去这些情况,都为auto **媒体**:视觉 ## 取值: ## auto: 无特殊定位,根据HTML定位规则在文档流中分配 [<length>][length]: 用长度值来定义距离右边的偏移量。可以为负值。 [<percentage>][percentage]: 用百分比来定义距离右边的偏移量。百分比参照包含块的宽度。可以为负值。 ## 说明: ## **检索或设置对象参照相对物右边界向左偏移位置。** * 该属性用来指定盒子参照相对物右边界向左偏移。相对定位元素的相对物是自身,绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值 * 对应的脚本特性为**right**。 ## 兼容性: ## * 浅绿 = 支持 * 红色 = 不支持 * 粉色 = 部分支持 <table style="border-collapse:collapse; border-spacing:0px; table-layout:auto"> <thead> <tr> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Values</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">IE</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Firefox</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Chrome</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Safari</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Opera</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">iOS Safari</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Android Browser</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Android Chrome</span></th> </tr> </thead> <tbody> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> <strong><span style="font-size:12px">Basic Support</span></strong></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">2.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">4.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">15.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">2.1+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">18.0+</span></td> </tr> </tbody> </table> 1. 在IE6及以前的版本下,如果`right`和`left`都定义了`非auto`的值,那么 right 的计算值将会被设置为 -left (无论是否显式的定义了 [width][] 或 [max-width][]),它的指定值将被忽略,说白了,你将无法在不指定某个元素宽度的情况,通过给元素指定`right`和`left`的方式来进行宽度拉伸; ### bottom ### ## 语法: ## **bottom**: auto | [<length>][length] | [<percentage>][percentage] **默认值**:auto **适用于**:定位元素。即定义了 <' [position][CSS] '> 为「非static」的元素 **继承性**:无 **动画性**:当值为[<length>][length] | [<percentage>][percentage]时 **计算值**:当[position][CSS]为`static`时,计算值是`auto`。 为`relative`时,如果`top`和`bottom`都是`auto`,则它们的计算值是`0`;如果`top`和`bottom`其中一个为`auto`,则`auto`相当于另一个的负值,即top = -bottom;如果`top`和`bottom`的值都不为`auto`,则忽略`bottom`。 否则在其它情况下,当指定值为[<length>][length]时,计算值为指定值,当指定值为[<percentage>][percentage]时,计算值为计算后的绝对值。除去这些情况,都为auto **媒体**:视觉 ## 取值: ## auto: 无特殊定位,根据HTML定位规则在文档流中分配 [<length>][length]: 用长度值来定义距离底部的偏移量。可以为负值。 [<percentage>][percentage]: 用百分比来定义距离底部的偏移量。百分比参照包含块的高度。可以为负值。 ## 说明: ## **检索或设置对象参照相对物底边界向上偏移位置。** * 该属性用来指定盒子参照相对物底边界向上偏移。相对定位元素的相对物是自身,绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值 * 对应的脚本特性为**bottom**。 ## 兼容性: ## * 浅绿 = 支持 * 红色 = 不支持 * 粉色 = 部分支持 <table style="border-collapse:collapse; border-spacing:0px; table-layout:auto"> <thead> <tr> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:10px">Values</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:10px">IE</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:10px">Firefox</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:10px">Chrome</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:10px">Safari</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:10px">Opera</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:10px">iOS Safari</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:10px">Android Browser</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:10px">Android Chrome</span></th> </tr> </thead> <tbody> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> <strong><span style="font-size:10px">Basic Support</span></strong></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:10px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:10px">2.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:10px">4.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:10px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:10px">15.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:10px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:10px">2.1+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:10px">18.0+</span></td> </tr> </tbody> </table> 1. 在IE6及以前的版本下,如果`top`和`bottom`都定义了`非auto`的值,那么 bottom 的计算值将会被设置为 -top (无论是否显式的定义了 [height][] 或 [max-height][]),它的指定值将被忽略,说白了,你将无法在不指定某个元素高度的情况,通过给元素指定`top`和`bottom`的方式来进行高度拉伸; ### left ### ## 语法: ## **left**: auto | [<length>][length] | [<percentage>][percentage] **默认值**:auto **适用于**:定位元素。即定义了 <' [position][CSS] '> 为「非static」的元素 **继承性**:无 **动画性**:当值为[<length>][length] | [<percentage>][percentage]时 **计算值**:当[position][CSS]为`static`时,计算值是`auto`。 为`relative`时,如果`right`和`left`都是`auto`,则它们的计算值是`0`;如果`right`和`left`其中一个为`auto`,则`auto`相当于另一个的负值,即left = -right;如果`right`和`left`的值都不为`auto`,则忽略`right`。 否则在其它情况下,当指定值为[<length>][length]时,计算值为指定值,当指定值为[<percentage>][percentage]时,计算值为计算后的绝对值。除去这些情况,都为auto **媒体**:视觉 ## 取值: ## auto: 无特殊定位,根据HTML定位规则在文档流中分配 [<length>][length]: 用长度值来定义距离左边的偏移量。可以为负值。 [<percentage>][percentage]: 用百分比来定义距离左边的偏移量。百分比参照包含块的宽度。可以为负值。 ## 说明: ## **检索或设置对象参照相对物左边界向右偏移位置。** * 该属性用来指定盒子参照相对物左边界向右偏移。相对定位元素的相对物是自身,绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值 * 对应的脚本特性为**left**。 ## 兼容性: ## * 浅绿 = 支持 * 红色 = 不支持 * 粉色 = 部分支持 <table style="border-collapse:collapse; border-spacing:0px; table-layout:auto"> <thead> <tr> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Values</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">IE</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Firefox</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Chrome</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Safari</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Opera</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">iOS Safari</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Android Browser</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Android Chrome</span></th> </tr> </thead> <tbody> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> <strong><span style="font-size:12px">Basic Support</span></strong></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">2.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">4.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">15.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">2.1+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">18.0+</span></td> </tr> </tbody> </table> 1. 在IE6及以前的版本下,如果`right`和`left`都定义了`非auto`的值,那么 right 的计算值将会被设置为 -left (无论是否显式的定义了 [width][] 或 [max-width][]),它的指定值将被忽略,说白了,你将无法在不指定某个元素宽度的情况,通过给元素指定`right`和`left`的方式来进行宽度拉伸; ## 4. clip(CSS3新增属性) ## ## 语法: ## **clip**:auto | [<shape>][shape] **<shape>**:rect([<number>][number]|auto [<number>][number]|auto [<number>][number]|auto [<number>][number]|auto) **默认值**:auto **适用于**:绝对定位元素 **继承性**:无 **动画性**:当值为[<shape>][shape 1]时 **计算值**:指定的值 **媒体**:视觉 ## 取值: ## auto: 对象无剪切 rect([<number>][number]|auto [<number>][number]|auto [<number>][number]|auto [<number>][number]|auto): 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用auto替换,即此边不剪切。 上-左 方位的裁剪:从0开始剪裁直到设定值,即 上-左 方位的auto值等同于0; 右-下 方位的裁剪:从设定值开始剪裁直到最右边和最下边,即 右-下 方位的auto值为盒子的实际宽度和高度; 示例:clip:rect(auto 50px 20px auto) 说明:上边不剪切,右边从左起第50个像素开始剪切直至最右边,下边从上起第20个像素开始剪切直至最底部,左边不剪切 \* CSS3新增属性可能存在描述错误及变更,仅供参考,持续更新 ## 说明: ## **检索或设置对象的可视区域。区域外的部分是透明的。** * 这个属性将被废弃,推荐使用 [clip-path][] 代替,在过渡阶段,仍然会存在一段时间。 * 必须将[position][CSS]的值设为`absolute`或者`fixed`,此属性方可使用。 * 对应的脚本特性为**clip**。 ## 兼容性: ## * 浅绿 = 支持 * 红色 = 不支持 * 粉色 = 部分支持 <table style="border-collapse:collapse; border-spacing:0px; table-layout:auto"> <thead> <tr> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Values</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">IE</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Firefox</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Chrome</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Safari</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Opera</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">iOS Safari</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Android Browser</span></th> <th style="margin:0px; padding:6px 10px; text-align:left; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(221,238,255)"> <span style="font-size:12px">Android Chrome</span></th> </tr> </thead> <tbody> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> <span style="font-size:12px"><strong>Basic Support</strong> <sup><a href="http://www.css88.com/book/css/properties/positioning/clip.htm#support1" style="color:rgb(0,128,0)" rel="nofollow">#1</a></sup></span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">2.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">4.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">15.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">2.1+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">18.0+</span></td> </tr> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide"> <span style="font-size:12px">rect(逗号分隔)</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(255,144,144)"> <span style="font-size:12px">6.0-7.0</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">2.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">4.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">15.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">6.0+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">2.1+</span></td> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">18.0+</span></td> </tr> <tr> <td style="margin:0px; padding:6px 10px; border:1px solid rgb(204,204,204); line-height:1.3; empty-cells:hide; background:rgb(144,255,144)"> <span style="font-size:12px">8.0+</span></td> </tr> </tbody> </table> 1. Basic Support包含值:auto | rect(空格分隔) [CSS]: http://www.css88.com/book/css/properties/positioning/position.htm [display]: http://www.css88.com/book/css/properties/layout/display.htm [top]: http://www.css88.com/book/css/properties/positioning/top.htm [right]: http://www.css88.com/book/css/properties/positioning/right.htm [bottom]: http://www.css88.com/book/css/properties/positioning/bottom.htm [left]: http://www.css88.com/book/css/properties/positioning/left.htm [z-index]: http://www.css88.com/book/css/properties/positioning/z-index.htm [demo]: http://demo.doyoe.com/css/auto-list/absolute-flow.htm [quirks mode]: http://msdn.microsoft.com/en-us/library/ie/ms531140%28v=vs.85%29.aspx [integer]: http://www.css88.com/book/css/values/numeric/integer.htm [z-index_IE6_7]: http://demo.doyoe.com/css/z-index/create-stacking-context.htm [length]: http://www.css88.com/book/css/values/length/length.htm [percentage]: http://www.css88.com/book/css/values/numeric/percentage.htm [height]: http://www.css88.com/book/css/properties/dimension/height.htm [max-height]: http://www.css88.com/book/css/properties/dimension/max-height.htm [width]: http://www.css88.com/book/css/properties/dimension/width.htm [max-width]: http://www.css88.com/book/css/properties/dimension/max-width.htm [shape]: http://www.css88.com/book/css/properties/positioning/clip.htm#shape [number]: http://www.css88.com/book/css/values/numeric/number.htm [shape 1]: http://www.css88.com/book/css/properties/positioning/clip.htm#dfn-syntax [clip-path]: http://www.w3.org/TR/css-masking/#the-clip-path
还没有评论,来说两句吧...