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 ...
随机推荐
- go的变量、常量以及判断变量的数据类型
1.定义变量 p.p1 { margin: 0; font: 12px "Helvetica Neue"; color: rgba(69, 69, 69, 1) } span.s1 ...
- buuoj刷题 October
2019 极客大挑战 web easysql 直接万能密码登就完事了 LoveSQL 万能密码登进去,给了md5,没解出来 手注吧,都要忘了手注怎么注了 猜字段数 3的时候正常不报错 看回显位,2,3 ...
- 动手写一个简单的Web框架(Werkzeug路由问题)
动手写一个简单的Web框架(Werkzeug路由问题) 继承上一篇博客,实现了HelloWorld,但是这并不是一个Web框架,只是自己手写的一个程序,别人是无法通过自己定义路由和返回文本,来使用的, ...
- 【从零开始学习Node.js】一.在CentOS 7中部署Node.js环境
一.背景信息 Node.js是一个基于Chrome V8引擎的JavaScript运行环境,用来方便快速地搭建易于扩展的网络应用.Node.js使用了一个事件驱动.非阻塞式I/O的模型,使其轻量又高效 ...
- Spark SQL知识点大全与实战
Spark SQL概述 1.什么是Spark SQL Spark SQL是Spark用于结构化数据(structured data)处理的Spark模块. 与基本的Spark RDD API不同,Sp ...
- [atARC116F]Deque Game
假设两个操作者分别为$A$和$B$,其中$A$希望最大.$B$希望最小 (并不默认$A$为整局游戏的先手,仅是最终的结果考虑$A$为先手时) 记第$i$个队列第$j$个元素为$a_{i,j}$(其中$ ...
- WebRTC从摄像头获取图片传入canvas
WebRTC从摄像头获取图片传入canvas 前面我们已经能够利用WebRTC的功能,通过浏览器打开摄像头,并把预览的图像显示在video元素中. 接下来我们尝试从视频中截取某一帧,显示在界面上. h ...
- MySQL数据库之大厂面试必备技能v8.0.27
概述 **本人博客网站 **IT小神 www.itxiaoshen.com 定义 MySQL官方地址 https://www.mysql.com/ MySQL 8系列最新版本为8.0.27,5系列的最 ...
- 全面了解一致性哈希算法及PHP代码实现
在设计一个分布式系统的架构时,为了提高系统的负载能力,需要把不同的数据分发到不同的服务节点上.因此这里就需要一种分发的机制,其实就是一种算法,来实现这种功能.这里我们就用到了Consistent Ha ...
- 洛谷 P3704 [SDOI2017]数字表格(莫比乌斯函数)
题面传送门 题意: 求 \[\prod\limits_{i=1}^n\prod\limits_{j=1}^mfib_{\gcd(i,j)} \] \(T\) 组测试数据,\(1 \leq T \leq ...