css
文章平均质量分 58
天猫精灵998
这个作者很懒,什么都没留下…
展开
-
CSS 三条内容分享
1. 单行文本溢出隐藏这块老生常谈了,本人当初实习的时候,被抓的第一个 bug 就是这个。做起来比较简单:.header-title { white-space: nowrap; /* 文本默认会换行,这边不让文本换行 */ overflow: hidden; /* 文本溢出隐藏 */ text-overflow: ellipsis; /* 溢出展示省略 */}2. 毛玻璃背景设计师给的设计稿上经常会有毛玻璃背景,但假如直接从设计稿上复制 CSS 属性,一般都是用 backdrop-fi原创 2021-12-25 15:30:44 · 463 阅读 · 0 评论 -
CSS 绘制三角形和带边缘色的气泡聊天框
CSS 绘制三角形先画一个正方形:<div class="filled-triangle"></div>.filled-triangle { width: 100px; height: 100px; border: 1px solid cyan;}然后将宽高均设为0,只留下四个 border :.filled-triangle { width: 0; height: 0; border-bottom: 50px solid cyan; b原创 2021-08-12 20:11:40 · 582 阅读 · 0 评论 -
弹性布局的flex-grow,flex-shrink和flex-basis
项目中遇到很多需要元素高度自动充满容器剩余高度的情况,之前项目用了很多calc(),页面元素多了之后维护很麻烦。使用flex布局就能很容易实现元素自动填充剩余高度的效果。先来回顾一下flex布局的主要属性:容器属性:flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content项目属性:orderflex-growflex-shrinkflex-basisflexalign-self之前项原创 2020-10-10 17:34:00 · 653 阅读 · 0 评论 -
position: fixed如何相对父元素定位
在项目中遇到一个问题,项目中有一个弹框,弹框中有一个anchor组件,弹框中的内容可以滚动,而anchor组件需要相对于弹框保持固定。我们知道,position: fixed是相对于浏览器窗口进行定位,而弹框宽度是固定的,浏览器窗口的宽度则是不确定的,所以相对于浏览器窗口定位肯定不行。如何让anchor组件相对于弹框进行固定定位呢?查了下资料发现,虽然position:fixed是对于浏览器窗口定位的,但是只要不设置fixed元素的top,bottom,left,right,此时该元素就是相对于父元素进原创 2020-09-27 20:33:19 · 7989 阅读 · 6 评论 -
CSS选择器正则表达式的使用
之前项目中有一个功能,需要根据图片URL后缀的扩展名匹配相应的图标,当时是用JS的switch case实现的,因为switch case可以进行多对一匹配,而对象key value只能进行一对一匹配。今天偶然看到CSS也能进行正则匹配,并且专门就是针对这种场景的,这样以后直接用CSS就行了,性能肯定有所提升。如果还有同学不明白CSS选择器正则匹配,看看下面几个例子应该马上就能明白了。/* 匹配所有带href属性的标签 */[href] {padding-left: 18px;}/* 匹配href原创 2020-09-16 11:54:46 · 1813 阅读 · 0 评论 -
图片拉伸和保持长宽比的问题
在项目中有一个图片上传控件,上传后提供预览功能,是200px*120px大小。最初的代码是这样的,在img标签外套一个div,然后给这个div指定宽度和高度,让img标签的宽度和高度都为100%。这样的话图片就可以充满整个div了。.img-preview { width: 200px; height: 120px; position: relative; text-align: center; .img { width: 100%; height: 100%;原创 2020-09-15 15:32:36 · 969 阅读 · 0 评论 -
清除浮动的方法汇总
虽然现在有了flex和grid布局之后,浮动布局用得不多了,但是面试还可能会考清除浮动,所以这里总结一下。为什么要清除浮动?清除浮动不是为了把浮动这行代码取消掉,而是解决浮动塌陷。如下所示,div中有很多span,由于内容是不固定的,所以div没有设定高度。div { width: 400px; background-color: #5cb85c;}div span { display: inline-block; width: 25%;}接下来,给span设置浮动,结果作为背景的原创 2020-09-14 22:40:18 · 230 阅读 · 0 评论 -
CSS绝对定位给图片增加遮罩
设计和交互对Element里面upload上传图片预览样式不满意,同时上传组件的动效bug比较多,影响用户体验,所以对这个组件的样式进行重写。其中涉及到图片增加遮罩的效果。正常是这样:鼠标hover以后是这样:那么很明显遮罩的元素肯定是脱离正常文档流的,想要脱离文档流,可以使用绝对定位或者浮动,这里采用绝对定位实现。有的同学说相对定位应该也能实现吧,确实可以实现,但是有一个问题,相对定位的元素并没有脱离正常文档流,这个元素原来的位置仍然还是保留的,所以图片下面会出现一块空白,影响页面其他元素的原创 2020-09-05 23:06:19 · 938 阅读 · 0 评论 -
BFC与元素外边距合并/塌陷/越界
在项目中遇到一个问题,父元素中嵌套子元素,然后希望子元素和父元素顶部有一定边距,因此就给子元素加了一个margin-top: 20px;,然后就发现问题了。之前是这样的,顶部没有边距。给子元素加了margin-top后,父元素也被顶下来了。后来通过给子元素设置padding-top: 20px;解决问题。(其实一般的做法是给父元素内设置padding,这样就不会出现这个问题)后来查了一下,这个实际上就是外边距合并。什么是外边距合并外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距原创 2020-09-04 21:01:05 · 314 阅读 · 0 评论 -
详解Vue中的样式穿透>>>
如果想在一个组件中覆盖插件的样式,就需要用到样式穿透。发现问题:组件无法覆盖插件的样式如下所示,下面是一个分页器插件,默认的颜色是蓝色,定义在.swiper-pagination-bullet-active中。如果想要覆盖插件默认的样式,在组件中直接设置样式是不会生效的。这是因为组件自己的样式出现在前面,而插件的样式会从后面进来。如图所示,可以看到head标签中有多个style,组件样式定义在最上面,而插件的样式在下面。由于两处地方都设置了同一个属性,后面设置的属性优先级更高,因此插件的样式胜原创 2020-08-31 23:29:57 · 8934 阅读 · 2 评论 -
文字超出两行自动隐藏
width: 150px;overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; /* 这里设置需要显示几行文本 */原创 2020-06-24 13:31:50 · 845 阅读 · 0 评论