代码编织梦想

CSS 函数

随手笔记, 我只记录重点的,常用的。

css函数有很多。 例如 rgba(), rgb(), hsla(), hsl(), linear-gradient()… 有兴趣自行了解吧

attr(); 返回选择元素的属性值。

获取父盒子的某一项 元素的值, (上手试试就知道了, 我形容 容易误解)

div:after {
    content: " (" attr(class) ")"; 
}

a:after {
    content: " (" attr(href) ")"; 
}

calc(); 允许计算 CSS 的属性值,比如动态计算长度值。

使用 calc() 函数计算

元素的宽度, 高度(上手试试就知道了, 我形容 容易误解)

  • 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px)
  • 任何长度值都可以使用calc()函数进行计算;
  • calc()函数支持 “+”, “-”, “*”, “/” 运算;
  • calc()函数使用标准的数学运算优先级规则;
div {
    width: calc(100px + 100px); // 200px
    height: calc(200px - 100px); // 100px
}

var(); 用于插入自定义的属性值。

函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。 (上手试试就知道了, 我形容 容易误解)

// 定义参数  必需。自定义属性的名称,必需以 -- 开头。
:root {
  --main-bg-color: red;
  --main-txt-color: blue;
  --main-padding: 15px;
}
 
// var() 函数使用方法
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
 
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

var(); 注意事项

参数

var(custom-property-name, value)

custom-property-name	必需。自定义属性的名称,必需以 -- 开头。
value	可选。备用值,在属性不存在的时候使用。

觉得有用就点赞关注加评论吧,

觉得哪里有问题可以评论留言。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/dwp_wz/article/details/112670904

HTTP400:Invalid character found in the request target. The valid characters are defined in RFC 7230-爱代码爱编程

错误:java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986错误原因:参数里面有特殊符号-中括号:[] 解决办法1: pac

vue父组件调用子组件this.$refs报错,undefined、not a function问题解决方法-爱代码爱编程

同学们好,最近在开发的时候,碰到一个问题,需要父组件调用子组件的方法。本来是信手拈来的一件小事情,纠结了我好久,老是报错,提示not a function。网上查了一下,并没有能解决我问题的,甚至还有不少误导我的文章。有的文章中写道,子组件必须挂在父组件第一个子标签的中。于是我把我对父组件调用子组件方法的理解整理出来分享给大家。 需要注意的是,父组件

HTML之---列表、表单、注册表单、下拉列表-爱代码爱编程

列表、表单、注册表单、下拉列表 列表无序列表:ul有序列表:ol表单注册表单单选按钮下拉列表下拉列表显示多个条目 列表 无序列表:ul 有序列表:ol <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

Express、TypeScript、WebPack编写Web项目后端接口-爱代码爱编程

        TypeScript这里不作过多说明,其是JavaScript的一个超集,支持 ES6 标准,具体的语法用法等会在后期博客中说明。简单使用可以参考:https://blog.csdn.net/qq_41061437/article/details/112908807         Express是一个保持最小规模的灵活的 Node.js

vue下载流文件-爱代码爱编程

下载流文件时,方法要设置返回格式responseType:‘arraybuffer’ ,否则下载会报错"xml 解析错误:格式不佳 位置:* 行 1,列 9:" js文件定义方法 //定义请求方法 export function downloadPDF(id) { return request({ url: '/url' , res

Angular入门系列 第六章:添加应用内导航-爱代码爱编程

添加应用内导航 路由添加 AppRoutingModule路由RouterModule.forRoot()添加路由出口 `RouterOutlet`添加路由链接 (routerLink)添加仪表盘视图添加仪表盘路由添加默认路由把仪表盘链接添加到壳组件中导航到英雄详情从 `HeroesComponent` 中删除英雄详情添加英雄详情视图`Dashbo

JSP大文件上传支持分场上传-爱代码爱编程

javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求     1. 通过form表单向后端发送请求          <form id="postForm" action="${pageContext.request.contextPath}/UploadServle

transition动画按钮-爱代码爱编程

先来看一下效果图 动画button <el-row> <el-card class="box-card"> <div style="margin-bottom: 50px"> <el-col :span="6" class="text-center"&g

实现三位轮播图--半成品-爱代码爱编程

效果: <link rel="stylesheet" href="./css/default.css"> <!--引包,引入JQ--> <script src="js/jquery.min.js"></script> default.css *{ margin: 0; padding: 0; }

文字换行 word-wrap word-break-爱代码爱编程

前端渲染文字是最常见的应用场景,可有的时候,要求能够识别字符串中的换行。 后端出来的数据可能是这样的,中间有一个回车符号,要求前端能够换行显示。 如果不处理的话 是没办法识别回车符号的,无法正确显示。 对于前端来说,用css来控制是最简单的方式。 .scf-textarea-text { white-space: pre-wrap; word

前端开发时slick轮播图unslick()和slickSetOption方法,解决自适应屏幕及更新属性的问题-爱代码爱编程

在使用slick轮播图插件时,我们有时会有这种需求, 在某些屏幕分辨率下不使用轮播图效果,某些情况使用轮播图效果, 可以使用unslick方法,且这个方法须放入responsive中, 这样就可以确定在什么断点需要加载,哪些不需要加载。 使用方法如下。 <script> ('.slider').slick({ slid

移动端适配的学习总结~-爱代码爱编程

本篇文章是根据个人在工作和学习的一些收获和体会,会从如下几个方面来进行阐述: pc像素手机像素完美视口适配单位 像素 这个部分我们要聊到像素和视口两个概念 什么是像素? 简单来说,屏幕是由一个一个的发光的点构成的,这个一个个的小点就是,我们所说的像素分辨率:1920 × 1080 说的就是屏幕的小点的数量在前端开发中,像素要分两种情况讨论: