css
前端一枚
点关注 不迷路
展开
-
巧妙实现防止按钮重复点击
【代码】巧妙实现防止按钮重复点击。原创 2023-10-16 11:37:01 · 570 阅读 · 0 评论 -
css自定义属性(css变量)
背景复杂的网站都会有大量的CSS代码,通常也会有许多重复的值。举个例子,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换,效率不高且容易出错。自定义属性允许将值存储在一个地方,然后在多个其他地方引用。另一个好处是语义标识符。例如,--main-text-color比 更容易理解#00ff00,特别是如果在其他上下文中也使用相同的颜色。基本用法1、css中声明变量声明一个自定义属性,属性名需要以两个减号(--)开始,属性值则可以是任何有原创 2022-05-31 10:34:38 · 7371 阅读 · 2 评论 -
使用Live Sass Compiler扩展在vs-code中编译
目的:可以实时看scss文件编译后的css文件第一步:首先在vscode扩展里安装Live Sass Compiler插件第二步:对Live Sass Compiler插件配置 "liveSassCompile.settings.formats":[ // 扩展 { "format": "compact",//可定制的出口CSS样式(expanded,compact,compressed, ..原创 2022-03-02 12:14:20 · 1218 阅读 · 3 评论 -
css 实现单行两端对齐,带冒号
示例一先上效果图代码<div> <div class="item-info"> <span class="item-label">品牌</span> <span class="item-value">暇步士</span> </div> <div class="item-info"> <span class="item-label"原创 2021-10-23 18:11:42 · 1418 阅读 · 0 评论 -
display:table和display:table-cell实现单行,多行文本垂直居中
今天工作中遇到了一个问题,一个栏目的信息标题有长有短,短的一行,长的两行,但都要求垂直居中,像这样:一般的思路就是高度等于行高,但是这个仅适用于单行文本,flex布局也只是对元素可以设置垂直居中,不作用于文本。都不适用于像这个例子的,同一位置的不同场景。经过百度的指点,终于找到了比较完美的解决方法,那就是:结合使用display:table和display:table-cell,遂速记之。<div> <p> hello w...转载 2021-10-17 22:09:02 · 596 阅读 · 0 评论 -
上下margin折叠
垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin,这种现象叫做collapse(折叠)水平方向上的margin(margin-left、margin-right)永远不会collapse折叠后最终值的计算规则两个值进行比较,取较大的值如何防止margin collapse?只设置其中一个元素的margin...原创 2021-08-28 21:57:17 · 98 阅读 · 0 评论 -
padding-bottom百分比,进行占位和高度自适应
先上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title原创 2021-08-22 18:34:46 · 556 阅读 · 0 评论 -
css3的vw单位,vh单位的讲解,以及vw vh的兼容性
vw vh的介绍vw,vh是css3中给我们提供的新的单位,他们是相对于viewport视窗的宽高进行计算的单位。说白了,就是相对于浏览器的窗口的大小。vw单位vw是相对于视窗宽度的单位,1vw=1/100浏览器宽度。vh单位vh是相对于视窗高度的单位,1vh=1/100浏览器高度。vw vh的用途vw vh相对于浏览器的窗口的大小,代码如下:.div1{ width:...转载 2020-03-30 09:36:20 · 12005 阅读 · 2 评论 -
css3动画实现帧动画
#pic { height:90px; width:65; background-position: -40px -44px; background-image: url("https://static.runoob.com/images/mix/space-to-top.png"); animation: .6s go steps(7) infinite;}@keyframes go { 0% { background-position-x: -40px;...原创 2021-04-28 17:27:30 · 155 阅读 · 0 评论 -
CSS3实现文字描边的2种方法
问题 最近遇到一个需求,需要实现文字的描边效果,如下图 解决方法一 首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke 该属性是一个复合属性,可以设置文字宽度和文字描边颜色 该属性使用很简单:text-stroke:1px#f00;(1px是文字宽度,#ff是文字描边颜色) 本以为该属性的兼容性会及时止住我微微上扬的嘴角,随后逐渐凝固 但出乎意料的是大多浏览...转载 2020-11-15 17:58:29 · 1280 阅读 · 0 评论 -
css经典布局——双飞翼布局
圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》,在国内最早是淘宝UED的工程师(玉伯大大)对圣杯布局改进并传播开来,在中国的叫法是双飞翼布局。 圣杯布局和双飞翼布局达到的效果基本相同,都是侧边两栏宽度固定,中间栏宽度自适应。主要的不同之处就是在解决中间部分被挡住的问题时,采取的解决办法不一样,圣杯布局是在父元素上设置了padding-left和padding-right,在给...转载 2020-09-12 11:32:48 · 137 阅读 · 0 评论