随笔分类 -  css

CSS中的各种格式化上下文-FC（BFC、IFC、GFC、FFC）
摘要：什么是FC？ FC是Formatting Context的缩写，中文名：格式化上下文。是 W3C在CSS2.1 规范中的一个概念。 FC是指页面中一篇渲染区域，渲染区域内使用的格式化上下文的渲染规则，决定了该区域以及其子元素如何定位。当然，使用同的渲染规则，也会对其他元素的起到相互关系的作用。 主要 阅读全文
posted @ 2023-02-02 16:56 肥晨 阅读(797) 评论(0) 推荐(0)
纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码（简易版）
摘要：theme: cyanosis 最近打火机与公主裙中的爱心代码超级火，看着特别心动，让俺用css来写个简易版！！！ 先看效果： 代码拆解： 主要是分为3大部分 分子颗粒 爱心 动画 代码实现： 分子颗粒 分子颗粒其实非常简单，主要是使用到的就是css的渐变：linear-gradient，然后再用c 阅读全文
posted @ 2022-11-06 21:14 肥晨 阅读(2963) 评论(0) 推荐(6)
CSS修改单选框样式（element）
摘要：1.简单的修改颜色 原样式： 修改后： HTML代码： <el-radio-group v-model="newlyAdded.discount"> <el-radio label="0">工品</el-radio> <el-radio label="1">供应商</el-radio> </el-r 阅读全文
posted @ 2022-04-01 10:35 肥晨 阅读(1114) 评论(0) 推荐(0)
CSS中calc(100%-100px)为什么不加空格会不生效？
摘要：CSS中calc(100%-100px)为什么不加空格会不生效？问题起因 今天再使用calc时发现无法生效，我的写法是： width: calc(100%-100px); 页面无效果，加空格后就发现有效果了： width: calc(100% - 100px); 有亿点疑惑，这是为什么？ calc是什么？ css3的 计算属性，用于动态计算长度值。calc语法： 阅读全文
posted @ 2022-01-20 14:47 肥晨 阅读(587) 评论(0) 推荐(1)
display与overflow同时使用时，overflow会失效如何解决
摘要：前两天在写业务的时候发现，如果使用了display，overflow的部分功能就会失效。 想要效果： 但是使用了display和overflow后。。。 代码： overflow: hidden; white-space: nowrap; text-overflow: ellipsis; displ 阅读全文
posted @ 2022-01-17 18:09 肥晨 阅读(279) 评论(0) 推荐(0)
在vue中style的用法
摘要：一 原生用法 style="width: 100%; margin-top: 20px" 二 三元表达式 <a :style="{color:(index==0?arr.conFontColor:'#000')}" :href="con.subTitleHref" target="_self">{{ 阅读全文
posted @ 2022-01-15 10:38 肥晨 阅读(4173) 评论(0) 推荐(0)
过年有燃放烟花爆竹禁令那我们用css写一个烟花看看吧
摘要：先是去找了一张简易画的烟花照片，可以看出主要结构为歪曲的线条结构。 方案一： 弯曲的线条第一反应到的就是“圆角边框”： width: 200px; height: 200px; border: rosybrown 100px solid; border-radius: 100px; 控制这个圆角大小 阅读全文
posted @ 2022-01-05 13:05 肥晨 阅读(1273) 评论(3) 推荐(1)
css盒子可控大小-resize
摘要：resize <style> .father { padding: 20px; width: 200px; height: 50px; max-width: 800px; max-height: 800px; border: 1px solid #000; overflow: auto; resiz 阅读全文
posted @ 2021-10-22 22:08 肥晨 阅读(93) 评论(0) 推荐(1)
CSS写一个圣诞树Chrome浏览器小插件
摘要：一时兴起，突然想写一个Chrome浏览器插件，不知道写啥，就写了一个圣诞树小插件。项目源码>> Chrome浏览器插件 Chrome浏览器插件最主要的是：index.html、manifest.json两个文件。 下面是manifest.json的简单配置： { "manifest_version" 阅读全文
posted @ 2021-10-12 14:26 肥晨 阅读(450) 评论(0) 推荐(0)
盒子模型
摘要：盒子模型是什么？ CSS盒子模型（Box Model）。在所有的HTML元素都可以看成一个盒子；在CSS中，Box Model这一术语被用来设计和布局中使用。 现在已知的有两种盒模型，W3C盒模型（标准盒子）和IE盒子模型（怪异盒子）。 W3C盒模型（标准盒子）和IE盒子模型（怪异盒子）分别是什么？ 阅读全文
posted @ 2021-05-31 04:50 肥晨 阅读(112) 评论(0) 推荐(0)
CSS渐变-快来感受CSS的伟大吧（差点闪瞎我的狗眼）
摘要：在此，我们重点用到的就是conic-gradient。conic-gradient不是什么新鲜东西了，CSS3出的新特性中的一种圆锥形渐变。 线性渐变（linear-gradient）和径向渐变(radial-gradient)这两个是常用的。下面是简单的小案例： 线性渐变（linear-gradi 阅读全文
posted @ 2021-01-30 14:56 肥晨 阅读(298) 评论(0) 推荐(0)
前端面试题归类-css
摘要：网页看着不方便，想要文档可以私聊我。要是有错别字和错误的地方，请各位大佬直接指出，谢谢啦！！ 盒模型 说下盒模型? 有两种盒模型，W3C盒模型和IE盒模型。通常说的“IE盒子模型”指的是IE5.5，IE6及其以后，盒模型都为 content-box。当浏览器未设置<!doctype>声明时，盒模型都 阅读全文
posted @ 2021-01-02 11:03 肥晨 阅读(303) 评论(0) 推荐(0)
css缓冲特效
摘要：<style> .preview{ background-color: rgba(0, 0, 0, 0); display: flex; justify-content: center; align-items: center; height: 100vh; } .loading { positio 阅读全文
posted @ 2020-12-26 16:43 肥晨 阅读(265) 评论(2) 推荐(0)
Backdrop Filter
摘要：CSS 滤镜 : backdrop-filter backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果。 滤镜： 名称： 方法案例： 效果： blur() 模糊 : blur(5px) brightness() 亮度 : brightness(1.4); contrast 阅读全文
posted @ 2020-12-26 16:11 肥晨 阅读(765) 评论(0) 推荐(0)