css中clip 怎么用

html-css08

css中clip 怎么用,第1张

定义

clip 属性设置元素的形状。

当一幅图像的尺寸大于包含它的元素时会发生什么呢?"clip" 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。

继承性:No

说明

这个属性用于定义一个剪裁矩形。对于一个绝对定义元素,在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大,也可能比内容区小。

JavaScript 语法

CSS 属性也可通过一段 JavaScript 被动态地改变。

脚本语法:

object.style.clip="rect(0px,50px,50px,0px)"在我们的 HTML DOM 教程中,您可以找到更多有关 clip 属性 的细节。

在我们的 HTML DOM 教程中,您也可以找到完整的 Style 对象参考手册。

例子

img

{

clip: rect(10px, 5px, 10px, 5px)

}

值 描述

shape 设置元素的形状。合法的形状值是:rect (top, right, bottom, left)

auto 默认。浏览器可设置元素的形状。

1、新建一个html文件输入两个div标签,接着使用style属性,分别给div设置为绝对定位absolute和相对定位relative,让他们其中全部向左移动20px,向上移动30px的距离:

2、然后保存文件打开浏览器看看效果,位置显示还是比较明显的:

3、最后解释下这个结果,绝对位置就是对浏览器页面左边和顶部的距离,相对位置就是距离正常的标题的距离。以上就是css中绝对定位和相对定位的使用方法:

css中的绝对定位,意思就是把元素的左上角固定到浏览器窗口的某个指定的唯一的坐标点上。

css中的相对定位,意思是是相对于上一个相对定位的,总是相对于前面的同级标签为基准标签。

不管是什么定位都需要有一个参照物。相对定位的参照物是本身。绝对定位的参照物就是父级元素。两种定位产生的影响也不同。相对定位,设置后,原来的位置始终保留着。绝对定位,设置后,原来的位置会被后面的内容占据。