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. [啃书] 第3篇 - 结构体及其操作/浮点数&圆周率/复杂度/测试

    啃书部分已单独做成Gitbook了,后续不再更新.详情访问个人网站ccoding.cn或ccbyte.github.io 前言 本篇总结自<算法笔记>2.8-2.10 正文 知识点1:结构 ...

  2. C#生成新浪微博短网址 示例源码

    using System; using System.Collections.Generic; using System.Linq; using System.Text;     using DotN ...

  3. 【Microsoft Azure 的1024种玩法】二.基于Azure云平台的安全攻防靶场系统构建

    简介 本篇文章将基于在Microsoft Azure云平台上使用Pikachu去构建安全攻防靶场,Pikachu使用世界上最好的语言PHP进行开发,数据库使用的是mysql,因此运行Pikachu需要 ...

  4. [bzoj1572]工作安排

    按照Di排序,从小到大枚举物品,考虑如果直接能选就选上,不能选就考虑替换之前价值最小的来选(显然一定是可行的,只需要在原来选价值最小的时候选这个就行了),这个东西用堆来维护即可 1 #include& ...

  5. 【Tool】Node.js 安装

    Node.js 安装 2019-07-29  14:56:14  by冲冲 1. 说明 电脑使用node.js存在两种方式: ① 第一种,下载(.exe)到本地电脑,不需要安装,下载后点击 node. ...

  6. 【Lua】实现代码执行覆盖率统计工具

    一.如何评估测试过程的测试情况? 很多时候完成功能测试后就会发布上线,甚至交叉和回归都没有足够的时间去执行,然后通过线上的补丁对遗漏的问题进行修复.如果可以在发布前了解本次测试过程所覆盖代码执行的比例 ...

  7. 使用 SpringBoot 构建一个RESTful API

    目录 背景 创建 SpringBoot 项目/模块 SpringBoot pom.xml api pom.xml 创建 RESTful API 应用 @SpringBootApplication @C ...

  8. CF187D BRT Contract

    考虑如果哪次经过了红灯则显然已经和出发的时间没关系了. 然后我们需要做的是怎么样找到最近的一个是红灯的点. 然后实际下是我们做一个前缀和:\(L_i = \sum d_i\) 然后求\(\min (L ...

  9. P7327 Dream and Discs

    题目传送门. 题意简述:有 \(n\) 个数 \(a_1,a_2,\cdots a_n\),等概率选取区间 \(P_1,S_1\subseteq [1,n]\),\(P_2\subseteq P_1\ ...

  10. [源码解析] PyTorch 分布式 Autograd (4) ---- 如何切入引擎

    [源码解析] PyTorch 分布式 Autograd (4) ---- 如何切入引擎 目录 [源码解析] PyTorch 分布式 Autograd (4) ---- 如何切入引擎 0x00 摘要 0 ...