css
关于css
空&白
这个作者很懒,什么都没留下…
展开
-
解决css文本内容为符号不会换行问题
在css上增加word-wrap: break-word;错误样式如上,超出了规定的文本区域。原创 2024-06-13 11:11:12 · 297 阅读 · 0 评论 -
解决弹性布局父元素设置高自动换行,子元素均分高度问题(align-content: flex-start)
align-content: flex-start原创 2024-02-21 11:18:36 · 791 阅读 · 0 评论 -
css吸顶(position: sticky;)
解释下上面的效果:当元素tabs-s滑动到距离顶部60rpx的时候,会“固定”在那个地方,不会随着页面的向上滑动而滑动;但是向下滑动距离顶部小于60rpx的话,那元素tabs-s也会跟着向下滑动。用样式position: sticky;来做吸顶其实很简单,只要在设置一个top属性即可。原创 2023-12-27 11:17:47 · 1014 阅读 · 0 评论 -
uniapp公共css
字体颜色和背景颜色根据项目ui自行设定,后续有遇到在增加。原创 2023-11-13 11:03:09 · 850 阅读 · 0 评论 -
css word-break
上面的一行还是可以放置很多个字符的,但是就是换行了。加上word-break:break-all;要求填充满整行,超过在换行。原创 2023-08-04 14:23:53 · 111 阅读 · 0 评论 -
表格tr根据内容撑开高度并且每个td继承tr的高度(height:inherit,align-items: stretch)
实际上数据又长又短,例如类型有可能出现2行甚至3行的字数,所以整个行要适配最高的高度,然后其他子元素继承行的高度。ps:原生的table或者uview的u-table都不怎么好使,所以用view来做。弹性布局,行的align-items设置为stretch,不设置高度,可以设置。在做的过程中出现高度不一致导致border没能链接上。,height:inherit继承父元素的高度。原创 2023-07-13 12:20:19 · 632 阅读 · 0 评论 -
相对绝对定位父元素不设置宽度,根据子元素撑开(white-space: nowrap;)
要做一个如下的弹窗,很简单。但是当要切换成多语言或者数据是动态的话(title可能会很长),那么弹窗固定宽度就不适用了。ps:ml-18 f30 text-333 flex align-center 一些封装的样式。也有可能出现下面的情况,文字被换行了(有时候这种情况也是可以的,取决于项目要求)1.弹窗不设置width,但是可以设置最小宽度(min-width)2.整体布局正常(我这边用的是弹性布局),重点是。这种情况是弹窗不设置width,设置。但是我想要的是下图的样式。有可能会出现下图的情况。原创 2023-07-13 12:02:34 · 445 阅读 · 0 评论 -
解决css背景图覆盖文字
项目需求:这是个导航栏(下面是uveiw的tabs标签),然后高亮的时候会有一个背景图,因为title不固定字数,所以宽度不能写死。后面找了下,发现item-title样式加上position: relative;因为用的是相对、绝对定位,会导致图片会覆盖到文字上。自己写了个样式,用scroll-view,原创 2023-05-16 16:54:24 · 2913 阅读 · 0 评论 -
css制作序列帧动画
css制作序列帧动画原创 2022-09-08 10:49:34 · 1460 阅读 · 1 评论 -
uniapp修改swiper点样式
uniapp修改swiper indicator-dots样式原创 2022-09-07 18:21:55 · 750 阅读 · 0 评论 -
一些css笔记
css3动画/*这是一个动画,从上面(top:0)移动到下面(top:364px)*/.animTitle{ font-size:62px; font-weight:bold; color: #fff; text-align: center; position: absolute; margin: ...原创 2019-04-29 15:12:06 · 110 阅读 · 1 评论 -
css瀑布流
简单效果图内容高度不设置 随内容的高低而显示<div class="one"> <div class="backfff wid50" v-for="(i,index) in list" :key="index"> 内容... </div></div>let list=[{},{},{},{}].one{/*关键样式代码*/ -webkit-column-count: 2; column-count: 2;/*代表一行几列*/}原创 2020-11-12 15:17:22 · 370 阅读 · 3 评论 -
css元素动态高度水平垂直居中
在明确宽高尺寸情况下,实现水平垂直居中方法:1、使用固定定位.div{ width: 300px; height: 100px; background:#fff; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}2、使用相对定位与绝对定位<div class="div1"> <div class="div2"></div>原创 2020-09-15 17:38:08 · 674 阅读 · 1 评论