随笔分类 -  css

点击穿透
摘要：点击穿透即点击子元素时，透过子元素本身直接冒泡到父元素上的事件 <style> .noclick{ pointer-events: none; /* 上层加上这句样式可以实现点击穿透 */ } </style> </head> <body> <div class="under" onclick="u 阅读全文
posted @ 2021-02-04 16:57 忽闻河东狮子吼 阅读(231) 评论(0) 推荐(0)
css让子元继承父元素的高度
摘要：情景描述：父元素由一个设置了高度的元素撑起，另一个元素自动继承父元素的高，并且两元素在一行显示。 现在情况 <style> .far{ border: 1px solid bisque; } .s1{ height: 150px; width: 100px; background-color: bl 阅读全文
posted @ 2021-02-03 15:26 忽闻河东狮子吼 阅读(6388) 评论(0) 推荐(0)
css画平行四边行
摘要：最近一个数据展示的项目需要平行四边行的标题，在此记录一下平行四边行的画法。 最终效果如图 主要是使用transform中的skew属性，需要注意的是transform中的X、Y轴与我们在数学中的概念是相反的。 skew(30deg,45deg)而度数根据我的理解应该是与轴线的夹角，前面写法代表夹角与 阅读全文
posted @ 2021-01-22 15:25 忽闻河东狮子吼 阅读(140) 评论(0) 推荐(0)
霓虹灯效果
摘要：模拟左右移动的霓虹灯效果 <style> body{ background:#e2e2e2; display: flex; justify-content: center; align-items: center; min-height: 100vh; } h1{ font-size: 50px; 阅读全文
posted @ 2020-09-10 10:17 忽闻河东狮子吼 阅读(164) 评论(0) 推荐(0)
关于transform属性导致字体模糊的问题
摘要：最近写项目时也碰到了字体会模糊的情况，先简单描述一下问题 一个宽度固定但是高度auto的弹窗让他在屏幕当中展示（不能使用flex属性）， position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 用了以上代码让弹窗 阅读全文
posted @ 2019-12-19 18:23 忽闻河东狮子吼 阅读(1154) 评论(1) 推荐(1)
关于c3背景图background-origin和backgroud-clip属性的梳理
摘要：background-origin属性规定背景图的定位区域，有三个值： border-box:背景图从外边框的左上角开始，即包括边框部分； padding-box:背景图从内边距的左上角开始，即不包括上和左边框部分，图片足够大会包括右和下边框部分； content-box:背景图从内容框的左上角开始 阅读全文
posted @ 2019-11-18 11:49 忽闻河东狮子吼 阅读(425) 评论(0) 推荐(0)
css3的一些用到的新属性收集（持续更新）
摘要：一、img的object-fit属性 我们在项目中插入图片的时候一般就2种方式，1.是用img标签；2.是用background中background-image 在使用background时，可以用background-size来设置图片的显示方式，比较方便。 在用img标签时，后台获取的图片尺寸 阅读全文
posted @ 2019-11-04 15:41 忽闻河东狮子吼 阅读(262) 评论(0) 推荐(0)
解决图片间间距的几种方法
摘要：当我们使用多个img标签时就会遇到img自带间距的问题如下 解决这个问题很多种方法，下面来简单说一下 1.如果只想解决解决竖向的间距 只需用vertical-align这个属性就可以了 或者给img标签的父元素加上line-height属性 如果图片很宽一个就占一行的画，比如移动端的长图，给图片加d 阅读全文
posted @ 2019-11-01 15:48 忽闻河东狮子吼 阅读(2909) 评论(0) 推荐(0)
border和outline的区别
摘要：可以看到outline是在border外面的一圈， input框的输入时高亮显示也可以用outline控制 input{ outline ：none }去掉高亮显示 阅读全文
posted @ 2019-10-17 14:10 忽闻河东狮子吼 阅读(276) 评论(0) 推荐(0)
css属性选择器，在代码中看到了css的属性选择器好久不用都忘记了用法，在这复习一下
摘要：div[class*="components-list"] 还记得是什么意思么？ 它是一种css的属性选择器[attribute*=value] 上面代码的意思就是选择器class属性包含‘component-list’的<div>元素 阅读全文
posted @ 2019-10-17 13:59 忽闻河东狮子吼 阅读(211) 评论(0) 推荐(0)