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 ...
随机推荐
- 史上最简单的排序算法?看起来却满是bug
大家好,我是雨乐. 今天在搜论文的时候,偶然发现一篇文章,名为<Is this the simplest (and most surprising) sorting algorithm ever ...
- 普通邮箱设置客户端授权码并开启stmp服务以及关于QQ邮箱“命令顺序不正确。 服务器响应为:Error: need EHLO and AUTH first !”问题全指导
Zoomla!逐浪CMS带有强大的邮局功能,可以用于发送邮件与进行事务管理. 其中邮局配置大家不太熟悉这里提供一系列教程. 1.首先在QQ邮箱当中开启"POP3/SMTP服务" 2 ...
- pytest-mian函数运行
1.设置多并发运行 1.命令行安装 pip install pytest-xdist #安装插件,进行多并发运行,#调用:-n -5 import pytest # pytest.main([&quo ...
- java web 在线编辑Excel -- x-spreadsheet
--- x-spreadsheet --- 文档 https://hondrytravis.com/x-spreadsheet-doc/ <%@ page language="java ...
- Redis篇:事务和lua脚本的使用
现在多数秒杀,抽奖,抢红包等大并发高流量的功能一般都是基于 redis 实现,然而在选择 redis 的时候,我们也要了解 redis 如何保证服务正确运行的原理 前言 redis 如何实现高性能和高 ...
- [luogu7831]Travelling Merchant
考虑不断找到以下两种类型的边,并维护答案: 1.终点出度为0的边,那么此时即令$ans_{x}=\min(ans_{x},\max(r,ans_{y}-p))$ 2.(在没有"终点出度为0 ...
- 【程序员翻身计划】Java高性能编程第一章-Java多线程概述
目标 重点: 线程安全的概念 线程通信的方式与应用 reactor线程模型 线程数量的优化 jdk常用命令 Netty框架的作用 难点 java运行的原理 同步关键字的原理 AQS的抽象 JUC的源码 ...
- 2017Java前景怎么样?
当今社会互联网软件行业属于高薪技术行业,伴随着互联网的发展Java在Web领域的优势也日渐凸显,并且java语言本身就应用最广泛,最高效.据说,全球有25亿Java器件运行着Java,450多万Jav ...
- 洛谷 P6060 - [加油武汉]传染病研究(数论)
洛谷题面传送门 一道不算太难的题,题解稍微写写吧( 首先根据约数个数和公式,对于一个 \(n=p_1^{\alpha_1}·p_2^{\alpha_2}·\cdots·p_m^{\alpha_m}\) ...
- Linux Alpine安装 Nginx
Linux Alpine安装 Nginx 安装需要编译Nginx的扩展 apk add wget gcc g++ make 安装Nginx URL重定向,正则表达式模块pcre Pcre 源码下载地址 ...