css clip样式 属性功能及作用
clip
clip 在学前端的小伙伴前,估计是很少用到的,代码中也是很少看见的,但是,样式中有这样的代码,下面让我们来讲讲他吧!
这个我也做了很久的开发没碰到过这个属性,知道我在一个项目中,有一个功能点,我在检查元素的时候,看别人的代码的时候,
发现了这个样式,很好奇,所以就搜了一下,但是我用了一下,发现没用,就在其他人的博客,还有w3scholl仔细看了一下,
才发现一个问题
他的作用功能是剪裁,但是只在绝对定位元素下才起作用的,例:position: absolute;等
- .hhh{
- position:absolute;
- clip: rect(0 76px 38px 0);
- }
- rect括号里的参数:
第一个参数:剪裁矩形距离父元素顶部的长度。
第二个参数:剪裁矩形距离父元素左边的长度 + 矩形宽度。
第三个参数:剪裁矩形距离父元素顶部的长度 + 矩形高度。
第四个参数:剪裁矩形距离父元素左边的长度。
css clip样式 属性功能及作用的更多相关文章
- 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 ...
- css常用样式属性详细介绍
对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...
- CSS字体样式属性
font-size 字号大小 一般推荐使用相对长度(px ,em),不推荐使用绝对长度(in,cmm,mm,pt) font-family 字体 1.可以同时指定多个字体,中间用英文状态的逗号隔开,英 ...
- CSS常用样式属性
1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...
- CSS尺寸样式属性
尺寸样式属性介绍 属性 值 含义 height auto:自动,浏览器会自动计算高度length:使用px定义高度%:基于包含它的块级对象的百分比高度 设置元素高度 width 同上 设置元素的宽度 ...
- css内容样式属性
设置元素的最大高度.最小高度.最大宽度.最小宽度,用max-height.min-height.max-width.min-width. visibility:设置元素是否可见.visible和hid ...
- CSS之样式属性(背景固定、圆形头像、模态框)
CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...
- CSS 所有样式属性大复习
1.背景与前景 /*背景色,样式表优先级高*/ background-image:url(路径); /*设置背景图片(默认)*/ background-attachment:fixed; ...
- CSS哪些样式属性可以继承
不可继承的:display.margin.border.padding.background.height.min-height.max- height.width.min-width.max-wid ...
随机推荐
- @RequestAttribute与@MatrixVariable
@RequestAttribute 它只能使用在方法入参上,从request请求参数中获取对应的属性值. //路径跳转 @GetMapping("/goto") public St ...
- 菜鸡的Java笔记 第三十六 - java 函数式编程
StudyLambda Lambda 指的是函数式编程,现在最为流行的编程模式为面向对象,很多的开发者并不认可面向对象,所以很多的开发者宁愿继续使用 C 语言进行开发,也不愿意使用java,c+ ...
- Django 项目配置拆分独立
目录 一.创建配置目录 二.创建基础配置文件 三.创建各个环境的配置 四.调整settings.py 五.程序使用 六.目录结构 Django 项目中,我们默认的配置是都在 settings.py 文 ...
- ICCV2021 | Vision Transformer中相对位置编码的反思与改进
前言 在计算机视觉中,相对位置编码的有效性还没有得到很好的研究,甚至仍然存在争议,本文分析了相对位置编码中的几个关键因素,提出了一种新的针对2D图像的相对位置编码方法,称为图像RPE(IRPE). ...
- Go语言核心36讲(Go语言实战与应用十三)--学习笔记
35 | 并发安全字典sync.Map (下) 我们在上一篇文章中谈到了,由于并发安全字典提供的方法涉及的键和值的类型都是interface{},所以我们在调用这些方法的时候,往往还需要对键和值的实际 ...
- Codeforces 1290F - Making Shapes(数位 dp)
Codeforces 题面传送门 & 洛谷题面传送门 数位 dp 好题. 首先,由于是凸包,一但向量集合确定,凸包的形态肯定就已经确定了.考虑什么样的向量集合能够组成符合条件的凸包,我们假设第 ...
- Atcoder Regular Contest 096 C - Everything on It(组合数学)
Atcoder 题面传送门 & 洛谷题面传送门 简单题,由于这场 arc 的 F 是 jxd 作业而我不会做,所以只好来把这场的 E 水掉了. 我们记 \(f(i)\) 为钦定 \(i\) 个 ...
- Codeforces 538G - Berserk Robot(乱搞)
Codeforces 题目传送门 & 洛谷题目传送门 一道很神的乱搞题 %%% 首先注意到如果直接去做,横纵坐标有关联,不好搞.这里有一个非常套路的技巧--坐标轴旋转,我们不妨将整个坐标系旋转 ...
- [Ocean Modelling for Begineers] Ch5. 2D Shallow-Water Modelling
本章利用二维浅水模型研究表面重力波的不同物理过程,如湖水中风驱动流体,正压不稳定机制(?the barotropic instability mechanism).本章将为读者介绍使用不同的对流格式模 ...
- R 语言实战-Part 5-1笔记
R 语言实战(第二版) part 5-1 技能拓展 ----------第19章 使用ggplot2进行高级绘图------------------------- #R的四种图形系统: #①base: ...