当前位置: 主页 > 日志 > 个人日记 > 文章

css小技能

发布时间: 2021-11-26 09:47:44 作者: 王乐园 浏览次数: 269

集中式小技能

1.设置颜色样式渐变,背景色长度,角度的css背景样式

background-image:linear-gradient(180deg, #0EB174 8%, #f7f7f7 8%);

2.滤镜

filter: blur(3px);

3.超出两行隐藏 并显示省略号

word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

显示一行超出

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;


4.边框虚线

border-top: dashed;
border-width: thin;
border-color: #f3f3f3;

5.排列方向

flex-direction

定义了 flex 容器中 flex 成员项的排列方向,默认值为 column

可选值描述
column竖排,从上到下排列
column-reverse反向竖排,排布方向与flex-direction:column相反
row横排,从左到右排布
row-reverse反向横排,排布方向与flex-direction:row相反

6.flex 两端对齐_让CSS flex布局最后一行左对齐 更多

box:{
display: flex; 
justify-content: space-between; 
flex-wrap: wrap;
}

6. display: grid; 表格布局 "可以解决自动换行,靠左排序"

box:{ 
display: grid;
 grid-template-columns: repeat(4, 170rpx); // 4 一行几个,170rpx一个的宽度
grid-row-gap: 6rpx; // 水平间距
grid-column-gap: 12rpx;// 上下间距
 }





本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: