right

  • 版本:CSS2
  • 媒体:视觉
right属性在CSS定位中是比较常用的,本文将带你深入理解right属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上right的演示案例,希望能够对你有所帮助。

right的详细用法

rightauto | <length> | <percentage>

默认值auto

适用于:定位元素。即定义了position为 relative | absolute | fixed | center | page 的元素

继承性:无

动画性:当值为<length> | <percentage>

计算值:当position为static时,计算值是auto。当position为relative时,如果right和left都是auto,则它们的计算值是0;如果right和left其中一个为auto,则auto相当于另一个的负值,即left = -right;如果right和left的值都不为auto,则忽略right。否则在其它情况下,当指定值为<length>时,计算值为指定值,当指定值为<percentage>时,计算值为计算后的绝对值。除去这些情况,都为auto

right有哪些值?

auto:
无特殊定位,根据HTML定位规则在文档流中分配
<length>
用长度值来定义距离右边的偏移量。可以为负值。
<percentage>
用百分比来定义距离右边的偏移量。百分比参照包含块的宽度。可以为负值。

right的作用是什么?

检索或设置对象参照相对物右边界向左偏移位置。
  • 该属性用来指定盒子参照相对物右边界向左偏移。相对定位元素的相对物是自身,绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值
  • 必须定义position属性值为 relative | absolute | fixed | center | page,此属性方可生效。
  • 对应的脚本特性为right

right兼容哪些浏览器?

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0 1.0 1.0 1.0 5.0

right的完整演示案例

HTML+CSS重难点(一) 盒子模型及标准流下的定位

默认情况下绝大多数元素的盒子边界、边框和填充宽度都是0,盒子的背景是透明的。所以,在不设置CSS样式的情况下看不到元素的盒子;...1月7日

使用margin-left,margin-top与position:absolute来对图片进行定位。使用了CSS3中的calc()来计算需要定位的值。示例图片如下:2...2016年10月9日

CSS 中的定位属性详解

元素仍然处于正常文档流当中,但可以通过left、top、right和bottom的CSS规则来改变元素的位置。如果元素一旦使用了相对定位之后...2016年8月1日

六个角度剖析css中的浮动定位

首先给浮动一个定义:浮动就是程序中定位的一种那么什么又是定位:元素框相对于其正常位置应该出现的位置在哪儿浮动定位:解决了多个块级元素能在一行内显示...2016年6月23日

CSS定位问题(1):盒模型、浮动、BFC

CSS·BFC,定位,盒模型分享到:引子:在谈到css定位问题的时候先来看一个小问题:已知宽度(假如:100px)div框,水平居中,左右两边分别使用div框填充...2016年4月27日

CSS绝对定位absolute详解

介绍过CSS浮动float详解,本篇介绍的绝对定位absolute和浮动float有部分相似性。如果能理解浮动float,对理解绝对定位absolute会大有帮助...2016年5月4日

《CSS权威指南》学习记录——定位(一)

利用定位,可以准确地定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。定位的类型关键字:position...2016年6月10日

深入理解CSS中背景background-position负值定位

作者:css教程点击次数:52次发布日期:2016-05-25摘要:深入理解CSS中背景background-position负值定位,有点向我们裁剪背景图片...2016年5月25日

深入理解CSS定位中的偏移

CSS有三种基本的定位机制:普通流、浮动和绝对定位。利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素...2016年3月21日

昨天我练习了用CSS(即层叠样式表Cascading Stylesheet)Selector来定位(locate)页面上的元素(Elements)...2016年3月14日

iv+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。Position属性有四个值:static、fixed、absolute和relative...2015年11月26日

CSS网页布局教程:绝对定位和相对定位

本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性(偏移属性...2015年8月30日

[day04学习笔记] CSS盒子定位属性 深入剖析!!

[day04学习笔记]CSS盒子定位属性详解首先做一下概念性的了解:定位就是把元素放在哪个位置!实际上每个元素都有个定位属性:position:定位属性有四个值...2014年8月10日

关于css定位,你需要知道的5件事

已经可以通过不同的css布局技巧制作出很复杂的布局。其中有些技巧有很长的历史(比如:floats),也有一些是近几年才被青睐的(比如flexbox)。在这篇文章中...2016年10月22日

CSS定位-position

CSS定位:#三种定位机制:(1)普通流,(2)浮动,(3)绝对定位;属性描述position把元素放置到一个静态的、相对的、绝对的、或固定的位置中...2015年2月8日

CSS定位(Positioning)

它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。​CSS有三种基本的定位机制:普通流、浮动和绝对定位...2015年7月28日

【css】position的绝对定位absolute与relative的区别

将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过cssz-index属性定义。此时对象不具有边距...2016年11月4日

Css教程:position定位的元素

所以在它成为你的惯用技巧前你需要掌握它们。一旦你更深入地了解了它是怎么运作的,你就能够做出一些更棒的事情来。CSS盒模型和定位的类型为了搞清楚定位首先你得了解C...2015年5月8日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册