CSS
文章平均质量分 90
祁同伟拿大狙
CV大法攻城狮,前端领域的搬运工,精通Vue、React、Angular、Javascript、TypeScript等主流语言和框架的单词拼写
展开
-
CSS一行代码实现渐变头像
CSS一行代码实现渐变头像这里只能用星星代替刷爆你朋友圈的头像了简述:第一思路分析得到这是两张图片合并而成的,头像在下星星覆盖在上,星星的透明度放低,如同PS中的透明度和混合模式,但你仔细观察会发现,合成好的头像左侧颜色较深 ,右侧透明度明显高于左侧,如同ps中的渐变,巧的是CSS与生俱来就有(开玩笑C3才有),现在需要考虑的问题是怎么将星星图片渐变。使用mask遮罩属性 配合 linear-gradient渐变属性完美实现准备素材两张图片 头像在下 遮罩的星星在上代码实现<原创 2021-10-04 13:13:14 · 245 阅读 · 2 评论 -
清除浮动解决高度坍塌的5种方法 以及兼容IE
清除浮动解决高度坍塌的5种方法 以及兼容IE文章目录清除浮动解决高度坍塌的5种方法 以及兼容IE一、高度坍塌的形成原因以及代码和效果演示二、解决办法方法1:定义一个样式使用伪类元素选择器 ::after方法2:给父元素添加 属性:overflow:hidden方法3:添加空div方法4:父级随同子级一起浮动方法5:给父级设置固定高度一、高度坍塌的形成原因以及代码和效果演示在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流原创 2021-10-04 18:30:00 · 744 阅读 · 3 评论 -
CSS中的BFC BFC详解 BFC可以解决的问题汇总
BFC详解简介BFC 全称 Block Formatting Context, 名为 "块级格式化上下文"它是CSS2.1规范定义的,是关于CSS渲染定位的一个概念.W3C官方解释:BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时, Block Formatting Context提供了一个环境,HTML在这个环境中按照一定的规则进行布局。简单来说就是,BFC是一个完全独立的空间(布局环境),让空间里的子元素不会影响到外面的布局。触发开启B原创 2021-10-04 10:27:59 · 556 阅读 · 2 评论 -
margin外边距合并问题以及解决方式
margin外边距合并问题以及解决方式汇总简介块级元素的上外边距和下外边距有时会合并(或折叠)为一个外边距,其大小取其中的最大者,这种行为称为外边距折叠(margin collapsing).外边距合并的三种情况1.相邻兄弟姐妹元素简述:同级别毗邻的两个元素设置了相向的外边距(一个设置margin-top一个设置margin-bottom 另一情况反之)<style> .box1 { width: 200px;原创 2021-10-03 12:16:47 · 904 阅读 · 1 评论