css 中left 和top 有什么用

html-css09

css 中left 和top 有什么用,第1张

top:距离顶部的距离。

left:距离左侧的距离。

css的left和top属性:指的是距最近的一个position属性为relative或者absolute的父级元素的左边或上边的距离,所以当要设置css的top和left的属性时,一定要确保定义position为absolute或者relative。如果父级属性未设置position则默认为body。

left和top的使用必须伴随设置 position : relative或者absolute;css的left和top属性指的是距最近的一个position属性为relative或者absolute的父级元素的左边或上边的距离。

所以当要设置css的top和left的属性时,一定要确保定义position为absolute或者relative。如果父级属性未设置position则默认为body。

扩展资料

在CSS中,有auto值,它可以用于像margin,position,height,width等属性。

auto关键字的使用因属性而异。对于本文,我将在每个属性的上下文中解释值。

width: auto块级元素(如<div>或<p>)的初始宽度是auto,这使得它们占据了包含它们的块的整个水平空间。当一个元素的宽度值为auto时,它包含margin、padding和border,不会变得比它的父元素大。其中 content 的宽度将是content本身减去margin、padding和border。

【position:absolute】意思是:绝对定位,他默认参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位。

绝对定位具有以下属性:(下面的这些属性大家自己证明,对于下面说的“父级”,就是在原有的盒子外面,在套一层宽度和高度大于原有盒子尺寸的盒子)。

如果没有TRBL,以父级的左上角,在没有父级的时候,他是参照浏览器左上角,如果在没有父级元素的情况下,存在文本,则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字,覆盖于上方。

你需要用到background-position这个属性,用以规定背景图片的位置。让图片居中偏下的代码为:

background-positon:center bottom 或 background-positon:bottom

全部的位置代码如下:

background-position: left 代表背景图横向(X轴)靠左,纵向(Y轴)居中。(9点钟位置)

background-position: right 代表背景图横向(X轴)靠右,纵向(Y轴)居中。(3点钟位置)

background-position: top 代表背景图横向(X轴)居中,纵向(Y轴)靠上。(12点钟位置)

background-position: bottom 代表背景图横向(X轴)居中,纵向(Y轴)靠下。(6点钟位置)

background-position: center 代表背景图横向(X轴)居中,纵向(Y轴)居中。(绝对居中)

background-position: left top 代表背景图横向(X轴)靠左,纵向(Y轴)靠上。(10点钟位置)

background-position: left bottom 代表背景图横向(X轴)靠左,纵向(Y轴)靠下。(7点钟位置)

background-position: right top 代表背景图横向(X轴)靠右,纵向(Y轴)靠上。(1点钟位置)

background-position: right bottom 代表背景图横向(X轴)靠右,纵向(Y轴)靠下。(5点钟位置)

不兼容原因,a标签属于内联标记,不应该给他直接设置padding应该避免的是,元素需要定义高度和宽度的时候尽量避免设置padding属性而用margin属性代替。解决方案,A标签必须属性是行元素display:blockA标签如果有宽度高度属性,那么就不能有padding属性,(IEFF解释不一样所以不能使用。)A标签如果没有宽度高度属性可以使用padding,那么他外层就必须有元素有对应属性固定A标签的宽度和高度。解决代码一。css修改:a{font-size:14pxcolor:#006699}修改为a{font-size:14pxcolor:#006699display:blockpadding:5px}新添加一个ID#all{width:145pxheight:122px}标签修改修改为此方式使用padding,所以A标签不能有高度和宽度属性,从新定义一个DIV封套住A标签,DIV标签设置宽度高度宽度属性。(值=实际尺寸+padding尺寸)解决代码二,css修改:a{font-size:14pxcolor:#006699}修改为a{font-size:14pxcolor:#006699display:blockpadding:5pxwidth:145pxheight:122px}标签修改修改为此方法给A定义宽度高度,所以能使用padding而用A内部的img标签定义margin分开空隙。