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. 第2章-7 产生每位数字相同的n位数 (30分)

    第2章-7 产生每位数字相同的n位数 (30分) 读入2个正整数A和B,1<=A<=9, 1<=B<=10,产生数字AA-A,一共B个A 输入格式: 在一行中输入A和B. 输出 ...

  2. Vue的第一课

    终于学习到Vue了,美滋滋,给自己点个赞 前后端作用: 1.1vs1(一个Vue对象控制一个) <body> <div id="app"> <p> ...

  3. JVM启动参数详解

    JVM启动参数以及具体的解释: -Xmx1024M 最大堆内存 -Xms1024M 初始化堆内存,正常和最大堆内存相同,减少动态改变的内存损耗 -Xmn384M 年轻代内存 -XX:PermSize= ...

  4. redis客户端修改了key-value对之后有时会报MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist o...错误,不能持久化

    解决方案,连接redis客户端 redis目录下:redis-cli -h 127.0.0.1 -p 6379-h后为redis服务器ip,-p后为端口号进入redis-client之后输入命令 co ...

  5. 作为Bootstrap中文站维护者-我们再次翻译BootstrapVue项目

    点击立即进入BootstrapVue中文站 http://code.z01.com/bootstrap-Vue Bootstrap-Vue 基于全球最流行的前端框架组合应用系统 项目介绍 Bootst ...

  6. 介绍一款docker管理工具——portainer

    介绍一款docker管理工具--portainer 目录 介绍一款docker管理工具--portainer 1.背景 1.1 管理docker方法上一般有两种 1.1.1 命令行形式 1.1.2 U ...

  7. [luogu5344]逛森林

    由于没有删边操作,可以先建出整棵森林,之后再用并查集判断是否连通,若连通必然与最后的森林相同 但如果用树链剖分+线段树的形式来优化建图,更具体如下: 建立两颗线段树,左边从儿子连向父亲,右边从父亲连向 ...

  8. [atARC058F]Lroha Loves Strings

    贪心,求出前$i$个字符串所能组成的字典序最小的字符串$ans$(特别的,这里的字典序有$ab>abc$),同时保证剩下的长度能通过$l_{i+1},...,l_{n}$拼接 考虑插入一个字符串 ...

  9. 洛谷 P7155 [USACO20DEC] Spaceship P(dp)

    Portal Yet another 1e9+7 Yet another 计数 dp Yet another 我做不出来的题 考虑合法的按键方式长啥样.假设我们依次按下了 \(p_1,p_2,\dot ...

  10. 洛谷 P6177 - Count on a tree II/【模板】树分块(树分块)

    洛谷题面传送门 好家伙,在做这道题之前我甚至不知道有个东西叫树分块 树分块,说白了就是像对序列分块一样设一个阈值 \(B\),然后在树上随机撒 \(\dfrac{n}{B}\) 个关键点,满足任意一个 ...