css
划船不用桨--
道阻且长,行则将至;行而不辍,未来可期
展开
-
css、less中定义变量使用变量
比如:在根元素下设置一些变量:root { --color-text: #666; --color-high-text: #ff5777; --color-tint: #ff8198; --color-background: #fff; --font-size: 14px; --line-height: 1.5;}使用变量a { color: var(--color-text); text-decoration: none;}...原创 2021-12-26 11:16:23 · 1787 阅读 · 0 评论 -
标签选择器的坑
要实现的效果:第三个p标签为红色 <style> p:nth-child(3){ color: red; } </style></head><body> <div> <p>1</p> <p>2</p> <a href="#"></a> .原创 2021-12-08 19:32:52 · 183 阅读 · 0 评论 -
固定定位同时设置left和right
今天看到别人的代码,给固定定位设置left:0;right:0,固定定位的盒子就撑开了,我一直只使用他们来调整位置,原来还有这种调整盒子大小的作用,自己测试了下,写下该文章记录基础知识:首先固定定位和绝对定位都会脱标,相对定位不会脱标设置定位没有设置大小的盒子,脱标的盒子会根据自己内容撑开,相对定位的盒子撑满父元素测试后的结论给固定定位和绝对定位的盒子设置left:0;right:0可以实现横向撑满给固定定位和绝对定位的盒子设置top:0;bottom:0可以实现纵向撑满.原创 2021-10-15 12:01:50 · 780 阅读 · 2 评论 -
全局样式覆盖vant样式的方法
方法1:提高样式的层级,用!important方法2(推荐):在入口文件调整加载顺序,把全局样式文件写在加载vant组件库样式后面,因为层叠样式表后者会覆盖前者// 加载vant组件库import Vant from 'vant';// 加载vant组件库样式import 'vant/lib/index.css'// 加载全局样式import "./style/index.less"...原创 2021-10-14 01:32:33 · 1365 阅读 · 0 评论 -
清除浮动的方法
方法一:给标准的父元素强制给一个合适的高度方法二:clear属性方法三:隔墙法外墙法内墙法方法四:伪类本质:使用伪类方法利用css代码书写一堵内墙伪类选择器:通过选中的标签添加伪类,去选中标签的某个状态或位置:after这个伪类表示选中的是某个标签 内部 的最后的位置书写方法:前面必须加普通的选择器,后面连续书写伪类名称content 属性来指定要插入的内容,注意为字符串类型,必选参数将伪类添加给一个选中父盒子的选择器后面,一般给需要清除浮动的父盒子设置一个cl.原创 2021-08-26 13:40:54 · 47 阅读 · 0 评论 -
em与rem
rem转化为像素大小取决于页根元素的字体大小默认情况下浏览器通常有字体大小 16px,但这可以被用户更改为从 9px 到 72px的任何值根 html 元素将继承浏览器中设置的字体大小,除非显式设置固定值去覆盖。所以 html 元素的字体大小虽然是直接确定 rem 值,但字体大小可能首先来自浏览器设置。因此浏览器的字体大小设置可以影响每个使用 rem 单元以及每个通过 em 单位继承的值在 Chrome 开发工具下,你可以在已计算选项卡下看到一个元素继承的属性。em相对于使用em单位原创 2021-08-25 00:17:07 · 3094 阅读 · 0 评论 -
textarea如何实现根据内容高度自适应和最多显示
最近在写一个课程设计的时候,在实现评论功能的时候我发现我做的用户体验不好,只能显示一行的内容,我去观察了朋友圈的评论功能,点击评论,默认显示一行,当输入的文字超过一行会换行,输入框的高度会随着改变,用户可以看自己评论的所有文字,这个用户体验很好,那怎么实现呢?只需要给textarea标签加上auto-height=“true”,注意要给文字设置行高不然会出现叠影,那如何实现同时实现最多显示3行如果行高设置line-height: 40rpx; 再设置 max-height: 120rpx.原创 2021-06-25 13:56:49 · 1396 阅读 · 0 评论 -
CSS3 calc() 函数
什么是calc()是一个函数,英文calculate(计算)的缩写,css新增加的功能,用来动态计算长度值为何为动态值使用表达式得到的值作用使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度,实现自适应宽度使用注意事项==运算符(加减乘除)==前后都需要保留一个空格,例如:width: calc(100% - 10px);表达式中有“+”和“-原创 2021-06-16 01:09:27 · 195 阅读 · 0 评论 -
CSS 坐标系
CSS 坐标系概念:css3中网页不再是一个二维平面,而是一个三维空间,水平方向、竖直方向和垂直屏幕方向分别对应三维坐标系的x,y,z轴,如下图所示。箭头方向为正向,反之为负向(注意y轴方向与常规笛卡尔坐标系相反)...原创 2021-06-15 13:26:10 · 1181 阅读 · 0 评论