css left right top bottom定位

转载 2016年06月01日 22:00:18

css left right top bottom定位

DIV CSS left right top bottom定位

这四个CSS属性样式用于定位对象盒子,必须定义position属性值为absolute或者relative此取值方可生效。

一、语法结构   -   TOP

Left、right、top、bottom后跟数字+html单位

示范结构
div{left:20px}
div{right:20px}
div{top:20px}
div{bottom:20px}

Left 靠左距离多少
Right 靠右边距离多少
Top 距离顶部距离多少
Bottom距离下边距离多少

二、使用条件   -   TOP

通常单独使用left、right、top、bottom均无效,需要在使用绝对定位CSS position样式才能生效。

一般left和right在一个样式是只能使用其一,不能left和right都设置,要么使用left就不使用right,要么使用right就不使用left,如果left和right均使用将会出现兼容问题,一个对象设置了靠左left多少距离,自然右边距离自然就有了所以无需设置左边。

相同道理,top和bottom对一个对象只能使用其一,不然会出现逻辑兼容问题。譬如一个人让你往左走,一个人让你往右走,同时发出往左往右走这个时候你也不好判断往那边走。

三、绝对定位中使用   -   TOP

一般left、right、top、bottom使用于配合position定位对象位置。大家可以进入CSS position教程篇了解学习这些样式属性。


本文转自:http://www.divcss5.com/rumen/r404.shtml

css中的clip属性rect(top,right,bottom,left);

其实是这样的,top right bottom left分别指最终剪裁可见区域的上边,右边,下边与左边。而所有的数值都表示位置,且是相对于原始元素的左上角而言的。于是 rect(30px 200px...
  • kbx8916
  • kbx8916
  • 2016年06月27日 18:22
  • 516

css中定位position、偏移top,bottom,left,right和高宽度设置问题

css中 1.定位问题
  • xiaoxiao_xiaoliu
  • xiaoxiao_xiaoliu
  • 2014年09月12日 10:12
  • 3660

View的位置--top, left, bottom, right

一、背景在用到view的位置时,查到的API有一大堆,什么 getTop(),getTranslationX(), getX(),不知道这些位置具体代表的是什么东西。于是今天就先研究下top, lef...
  • wxv111
  • wxv111
  • 2016年03月15日 22:28
  • 1223

crect类里的left , top ,right , bottom分别是什么坐标?

crect类里的left , top ,right , bottom分别是什么坐标?//Microsoft Visual Studio/VC98/Include/wtypes.h中  typedef ...
  • hytdsky
  • hytdsky
  • 2009年12月06日 11:54
  • 1773

css属性left、right、top、bottom

css:left属性 浏览器支持 所有主流浏览器都支持 left 属性。 定义和用法 left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。 注...
  • oatmeal2015
  • oatmeal2015
  • 2016年09月13日 20:16
  • 261

MFC中crect 中的left top right bottom释义

x0, y0),(x1, y1)-->(left, top),(right, bottom) 其中(x0, y0)是这个矩形区域的左上角,(x1, y1)是这个矩形区域的右下角。只要这两个点确定了,这...
  • u012999771
  • u012999771
  • 2015年01月05日 16:52
  • 453

Unity3d UGUI 自适应屏幕 代码修改Left,Top,Right,Bottom属性值

通过RectTransform 的属性offsetMin,offsetMax来实现; offsetMin   是vector2(left,bottom); offsetMax 是vector2...
  • qq_16072507
  • qq_16072507
  • 2016年11月01日 18:04
  • 3257

面试总结(4):top、left、right、bottom 和 translationX、translationY 和 scrollX,scrollY的区别

前言这是前几天面试的时候遇到的一个问题,之前没有专门去研究这三个概念的区别,所以就凭印象回答了这道题,回来就实际研究一下,发现自己回答还算可以吧。正文top、left、right、bottom经过我的...
  • u011315960
  • u011315960
  • 2017年05月07日 16:33
  • 383

元素position设置为fixed而未指定top、bottom、left、right时的定位

fixed定位 * {margin:0; padding:0; border:0;} #wrapper {width:1000px; height:2000px; margin: 0 auto;}...
  • wlx1991
  • wlx1991
  • 2014年03月11日 11:30
  • 1400

absolute,relative,left,right,bottom,top,float,z-index属性的讨论

absolute,relative,left,right,bottom,top,float,z-index属性的讨论 body{ margin:2
  • weixin_38405133
  • weixin_38405133
  • 2017年05月09日 21:32
  • 103
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css left right top bottom定位
举报原因:
原因补充:

(最多只允许输入30个字)