clip

clip 在学前端的小伙伴前,估计是很少用到的,代码中也是很少看见的,但是,样式中有这样的代码,下面让我们来讲讲他吧!

这个我也做了很久的开发没碰到过这个属性,知道我在一个项目中,有一个功能点,我在检查元素的时候,看别人的代码的时候,

发现了这个样式,很好奇,所以就搜了一下,但是我用了一下,发现没用,就在其他人的博客,还有w3scholl仔细看了一下,

才发现一个问题

他的作用功能是剪裁,但是只在绝对定位元素下才起作用的,例:position: absolute;等

.hhh{
position:absolute;
clip: rect(0 76px 38px 0);
}
rect括号里的参数:

第一个参数:剪裁矩形距离父元素顶部的长度。

第二个参数:剪裁矩形距离父元素左边的长度 + 矩形宽度。

第三个参数:剪裁矩形距离父元素顶部的长度 + 矩形高度。

第四个参数:剪裁矩形距离父元素左边的长度。

css clip样式 属性功能及作用的更多相关文章

  1. 0010 CSS字体样式属性:font-size、font-family、Unicode字体、font-weight、font-style、综合设置、color、 text-align、line-height、text-indent、text-decoration、、、

    CSS字体样式属性.调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 ...

  2. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  3. CSS字体样式属性

    font-size 字号大小 一般推荐使用相对长度(px ,em),不推荐使用绝对长度(in,cmm,mm,pt) font-family 字体 1.可以同时指定多个字体,中间用英文状态的逗号隔开,英 ...

  4. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  5. CSS尺寸样式属性

    尺寸样式属性介绍 属性 值 含义 height auto:自动,浏览器会自动计算高度length:使用px定义高度%:基于包含它的块级对象的百分比高度 设置元素高度 width 同上 设置元素的宽度 ...

  6. css内容样式属性

    设置元素的最大高度.最小高度.最大宽度.最小宽度,用max-height.min-height.max-width.min-width. visibility:设置元素是否可见.visible和hid ...

  7. CSS之样式属性(背景固定、圆形头像、模态框)

    CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...

  8. CSS 所有样式属性大复习

    1.背景与前景 /*背景色,样式表优先级高*/ background-image:url(路径);    /*设置背景图片(默认)*/ background-attachment:fixed;     ...

  9. CSS哪些样式属性可以继承

    不可继承的:display.margin.border.padding.background.height.min-height.max- height.width.min-width.max-wid ...

随机推荐

  1. this.$set用法

    this.$set()的主要功能是解决改变数据时未驱动视图的改变的问题,也就是实际数据被改变了,但我们看到的页面并没有变化,这里主要讲this.$set()的用法,如果你遇到类似问题可以尝试下,vue ...

  2. ubuntu图标

    linux桌面图标跟windows系统一样,只是个快捷方式,在/usr/share/applications/目录下面有应用程序的启动图标,可以直接复制到桌面,如果这个文件夹下没有的话,可以自己新建一 ...

  3. [第二章]c++学习笔记5(类型转换构造函数)

    使用例 析构函数 使用例 析构函数和数组 delete运算符导致析构函数的调用

  4. 微信小程序(九)

    小程序运行环境与基本架构 每个小程序都是运行在它所在的微信客户端上的,通过微信客户端给它提供的运行环境,小程序可以直接获取微信客户端的原生体验和原生能力. wxml视图文件和wxss样式文件都是对渲染 ...

  5. tomcat指定特定版本的jdk

    我是通过修改两个文件: setclasspath.bat和catalina.bat文件 linux在文件开头各自加上 export JAVA_HOME=/home/jdk/Java\jdk7\jdk1 ...

  6. appScan安全软件的使用

    1.点击文件,新建 2.常规扫描 3.点击下一步 4.输入需要扫描的网站 5.下一步,如果有账号 密码可以使用记录. 6.选择缺省值,下一步 7.启动全面扫描.

  7. Codeforces 611H - New Year and Forgotten Tree(二分图多重匹配)

    Codeforces 题目传送门 & 洛谷题目传送门 首先我们将所有十进制下位数相同的点看作一种颜色,这样题目转化为,给定 \(m\le 6\) 种颜色.每种颜色的点的个数 \(b_i\) 以 ...

  8. 文件IO与标准IO的区别

    文件IO与标准IO的区别 文件I/O就是操作系统封装了一系列函数接口供应用程序使用,通过这些接口可以实现对文件的读写操作,文件I/O是采用系统直接调用的方式,因此当使用这些接口对文件进行操作时,就会立 ...

  9. exit(0) exit(1) return() 3个的区别

    exit(0):正常运行程序并退出程序: exit(1):非正常运行导致退出程序: return():返回函数,若在主函数中,则会退出函数并返回一值. 详细说: 1. return返回函数值,是关键字 ...

  10. 码上来战!探索“智”感生活,HMS Core线上Codelabs挑战赛第4期开始!

    HMS Core线上Codelabs挑战赛第4期正式开始!我们向所有实践力超强.创新力满满的开发者发出邀请,用你的超级"码"力,解锁更多应用价值! 生活里,我们被手机"秒 ...