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 ...
随机推荐
- idea Mark Directory as 的几种文件类型
1. Source roots (or source folders) 源文件夹 通过为该类别分配文件夹,可以告诉IntelliJ IDEA该文件夹及其子文件夹包含应在构建过程中进行编译的源代码. 2 ...
- Java日期API
JDK8之前日期时间API java.util.Date类 表示特定的瞬间,精确到毫秒 构造器: Date():使用无参构造器创建的对象可以获取本地当前时间. Date(long date) 常用方法 ...
- vi/vim 常用命令总结
目录 Linux vi/vim编辑 vim键盘图 vim的三种模式 命令模式.输入模式.输出模式 vim使用实例 vi/vim按键说明 第一部分:一般模式可用的光标移动.复制粘贴.搜索替换等 第二部分 ...
- SpringCloud升级之路2020.0.x版-39. 改造 resilience4j 粘合 WebClient
本系列代码地址:https://github.com/JoJoTec/spring-cloud-parent 要想实现我们上一节中提到的: 需要在重试以及断路中加一些日志,便于日后的优化 需要定义重试 ...
- puts()_C语言
puts()函数用来向标准输出设备, scanf函数是格式输入函数,即按用户指定的格式从键盘上把数据输入到指定的变量之中. puts就是输出字符串啊.int puts( const char* ...
- 洛谷 P5071 - [Ynoi2015] 此时此刻的光辉(莫队)
洛谷题面传送门 一道其实算得上常规的题,写这篇题解是为了总结一些数论中轻微(?)优化复杂度的技巧. 首先感性理解可以发现该问题强于区间数颜色问题,无法用常用的 log 数据结构维护,因此考虑分块/莫队 ...
- Codeforces 1483F - Exam(AC 自动机)
Codeforces 题目传送门 & 洛谷题目传送门 一道 ACAM 的 hot tea 首先建出 ACAM.考虑枚举长串,以及短串在长串中出现的最后位置 \(j\),这个复杂度显然是 \(\ ...
- JS设计模式之建造者模式
建造者模式(builder pattern)属于创建型模式的一种,提供一种创建复杂对象的方式.它将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 建造者模式是一步一步的创建 ...
- Python中关于join函数的陷阱?
目录 说明 数据说明 正确示例 错误示例 解决办法 说明 最近在用Python的join函数连接多个列表时,出现了如下两个错误,即合并类型不一致.折腾了很久才找到原因,真是基础不牢,地动山摇. Typ ...
- 【Linux】非root安装Python3及其包管理
1. Python 3.8.1安装 源码安装常规操作: wget -c https://www.python.org/ftp/python/3.8.1/Python-3.8.1.tgz tar -xv ...