CSS
浅樱sakura
技术不一定要过硬,但是做事一定要认真。
展开
-
面试中被问到吐血的css知识点(一):两列或三列自适应布局
说在前面这是一个系列的文章,有兴趣的朋友可以查看此系列其它文章(持续更新ing)。本人才疏学浅,若有纰漏还请及时指出,请多指教!情境描述1、两列的情况左侧固定宽度为200px,右侧占据剩余空间并随浏览器窗口大小变化而变化,比如浏览器宽度1200px,右侧宽度1000px;浏览器宽度800px,右侧宽度600px。2、三列的情况左侧和右侧均固定宽度为200px,中间部分占据剩余空间并随浏览器窗口大小变化而变化。比如浏览器宽度1200px,中间宽度800px;浏览器宽度800px,中间宽原创 2021-05-15 00:47:15 · 243 阅读 · 0 评论 -
css颜色名称
下面列出了css颜色名称,不想写十六进制的就用英文代替吧!注:截图来自https://www.runoob.com/cssref/css-colornames.html原创 2021-04-16 11:35:42 · 433 阅读 · 0 评论 -
今天来简单聊一下渐变边框的实现方式
肺腑之言在我两年前离职的时候,那之前我没有做过任何效果的渐变边框,觉得好高深啊(太菜了,简单一个边框就让我觉得高深了)。其实我入坑编程也是因为觉得它实在是太奇妙了,太高深了,太让人捉摸不透了,现在依旧如此。什么是渐变边框呢?先上一个效果图:虽然不太明显,但是中间那条灰色的线就是,只不过两边是白色的。简单介绍1、linear-gradient()linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。语法:background: linea.原创 2021-04-14 10:46:07 · 444 阅读 · 0 评论 -
css3 transtion无效
transtion是css3的属性,自从它出现以后,网页动起来了,变得更加的生动了。作为一个前端,熟练运用它是最基本的基本功。transtion定义元素的过渡效果,它是一个简写属性,分别设置下面几个属性:transtion-property 规定设置过渡效果的css属性名称 transtion-duration 规定完成过渡效果需要多少秒或毫秒 transtion-timing-function 规定速度效果的速度曲线 transtion-delay 规定过渡效果何时开始注意:tr...原创 2021-03-31 20:07:10 · 460 阅读 · 0 评论 -
css hover失效的解决方法
在开发vue项目时,element-plus按钮的focus样式不是我想要的,然后就想覆盖它的样式,但是发现元素hover效果失效,我的写法是这样的:.close-pop-btn{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; width: 20px; height: 20px; line-height: 20px; padding: 0; min-height:原创 2021-03-31 19:50:00 · 1103 阅读 · 0 评论 -
CSS水平或垂直居中技巧
前言css水平和垂直居中是一个更古不变的话题,它常常出现在优美的网页上以及各大前端面试当中。说来惭愧,在两年前面试的时候,我完全不知道如何做到水平和垂直均居中的方法,那场面别提有多尴尬了(ps:特想找个地洞钻进去)。。。时隔两年,对于这个问题算是有一些了解了,现做个小小的整理,也算是对自己学习的总结。注:文中例子没写明html代码时,使用的是下面结构:<div class="examp...原创 2019-05-09 11:07:51 · 1627 阅读 · 0 评论