说明
记录下平时工作中做H5、小程序等开发中的css小笔记，包含常见的规则、样式等。
文本强制换换
{
word-break: break-all;
word-wrap: break-word;
}文字隐藏后添加省略号
需先设置元素的宽度
.text-ellipsis{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/*设置文字和省略号的颜色*/
color: #fe4070;
}注意：想要给元素添加text-overflow: ellipsis;样式，必须保证改其父元素是块级元素，如果其是行级元素，可以通过设置display:block;或者display:inline-block。或者有些情况下可以考虑设置max-width如max-width: 100%;。
最多显示2行，多余显示省略号
.max-two-line {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
/* stylelint-disable-next-line value-no-vendor-prefix */
display: -webkit-box;
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-box-orient: vertical;
}清除浮动
已经单独成文，点击查看
清除按钮<button>的默认样式（H5）
.clear-btn {
outline: none;
border-width: 0;
-webkit-tap-highlight-color: transparent;
}只首字母大写，其他的不变
实现整个句子首字母大写可以用伪类：
<div>ni hao hello</div>
div:first-letter {
text-transform: capitalize;
}效果：Ni hao hello
字母大小写
ext-transform : capitalize; // 设置首字母大写，如：Ni Hao Hello
text-transform:uppercase; // 设置全大写，如：NI HAO HELLO
text-transform:lowercase; // 设置全小写，如：ni hao hellotable中的文字居顶部显示
table tr td{
vertical-align: text-top; // 居顶部
// vertical-align:center;// 居中
}特殊列表排列规则
要求：按api返回的数据顺序从左向右、从上到下排列，但列表都居右显示，每项内容文字也是居右显示。且是首先排满底部的内容。
效果:
const list = [
{name:'hanna1',num:1},
{name:'hanna2',num:2},
{name:'hanna3',num:3},
{name:'hanna4',num:4},
{name:'hanna5',num:5}
];
list = list.reverse();// 重点<div className="barcodes-box">
{list.map((item, index) => (
<div className='barcode'>
<div className="barcode__name text-ellipsis">{item.name} </div>
<div className="barcode__img">
<img src={barcodeUrl} alt="" className="barcode__img-content" />
</div>
<div className="barcode__number text-ellipsis">{item.num}</div>
</div>
))}
</div>.barcodes-box {
display: flex;// 重点
flex-direction: row;
flex-wrap: wrap-reverse;// 重点
padding: 16px 24px;
direction: rtl; // 重点：把文本方向设置为“从右向左”
.barcode {
flex-shrink: 0;
width: 200px;
margin: 0 0 32px 30px;
overflow: hidden;
text-align: right;
&__name {
direction: ltr;// 重点
}
&__img {
position: relative;
width: 100%;
overflow: hidden;
}
&__number {
direction: ltr;// 重点
}
}
}
小程序里相关样式
<scroll-view>隐藏滚动条
小米note下滚动时会出现滚动条，所以为了兼容需要写这个样式
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}清除按钮<button>的默认样式
.clear-btn {
border: none;
padding: 0;
margin: 0;
color: inherit;
background-color: initial;
font-size: inherit;
border-radius: 0 !important;
}
.clear-btn::after {
border: none;
}背景图全屏显示（且不拉伸，部分实用）
.bg-box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 750rpx;
height: 100%;
background-image: url();
background-repeat: no-repeat;
background-position: center;
/* 重点 */
background-size: cover;
}通用
文字上下垂直居中
法1(line-height)
<view class="selected-brand-item">
<view class="item-content">
<text class="selected-brand-name">迪奥</text>
<view class="delete-brand"></view>
</view>
</view>.selected-brand-item {
height:58rpx;
line-height: 58rpx;
padding-left: 42rpx;
padding-right: 20.4rpx;
margin-right:20rpx;
border-radius:100rpx;
border:1rpx solid #CCCCCC;
background:#FFFFFF;
/* padding:10rpx 20.4rpx 10rpx 42rpx; */
}
.selected-brand-name {
font-size: 28rpx;
color: #333333;
margin-right:27rpx;
}
.delete-brand {
display: inline-block;
width: 14.6rpx;
height: 14.6rpx;
background-image: url(../../images/sku-close.png);
background-size: 100% 100%;
}法2 (display:table)
<view class="selected-brand-item" style="line-height: 58rpx;">
<text class="selected-brand-name">迪奥</text>
<view class="delete-brand"></view>
</view>.selected-brand-item {
display:table;
}
.item-content {
display: table-cell;
vertical-align: middle;
text-align: center;
}法3 (flex,我使用过的)
<view class="selected-brand-item box box-lr box-nowrap box-align-center">
<view class="selected-brand-name">迪奥</view>
<view class="delete-brand">
<view class="delete-brand-icon"></view>
</view>
</view>
.box {
display: flex;
}
.box-lr {
flex-direction: row;
}
.box-nowrap {
flex-wrap: nowrap;
}
.box-align-center {
align-items: center;
}
.selected-brand-item {
height: 58rpx;
padding-left: 42rpx;
border-radius: 100rpx;
margin-right: 20rpx;
margin-top: 20rpx;
border: 1rpx solid #ccc;
background: #fff;
}
.delete-brand {
padding: 20rpx 20.4rpx 20rpx 20rpx;
}
.delete-brand-icon {
background: url(../../images/sku-close.png) no-repeat center;
background-size: 100% 100%;
width: 14.6rpx;
height: 14.6rpx;
}
点击按钮或链接时取消其默认高亮色
（移动端上）有事件监听的元素被点击的时候会被高亮显示，比如我的ios上按钮表现为一个蓝框加上半透明的背景，这有时候会和我本来的样式格格不入，就要想办法去掉。方法如下，给元素加个css：
-webkit-tap-highlight-color: transparent;说明
设置或检索对象的轻按时高亮。
当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色
如果想取消这个高亮，将值设置为全透明即可，比如transparent
对应的脚本特性为textHighlightColor。
说明文档【传送门】
实心三角形【面试题】
面试题：用css实现三角形效果。
效果图：
<div class="triangle"></div>
// 简单写法
.triangle {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
}
// 详细写法
.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid red; // 朝上的三角形
}必须设置宽度和高度，因为div是块级元素，默认宽度100%；
重点是border-?-width，和其他三个方向的border-?-color为transparent；
border-right-width为50px，即代表三角形的厚度为50px。如下图：
镂空三角形气泡
效果图：
<div className="triangle-popup">
<span>
<em />
</span>
</div>
// 三角形气泡
.triangle-popup {
span {
display: block;
width: 0;
height: 0;
border-width: 0 10px 20px;
border-style: solid;
border-color: transparent transparent $blue;
position: absolute;
top: -20px;
left: 17px;
}
em {
display: block;
width: 0;
height: 0;
border-width: 0 10px 20px;
border-style: solid;
border-color: transparent transparent $white;
position: absolute;
top: 2px;
left: -10px;
}
}css动画：左上到右下
要求：一个小方块，不用js的情况下能否实现左上到右下的一个动画，兼容所有大小的屏幕。
我的实现代码：
<div className="move-box"></div>
.move-box {
width: 20px;
height: 20px;
background: pink;
position: absolute;
top: 0;
left: 0;
-webkit-animation: move 5s linear;
animation: move 5s linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes move {
0% {
top: 0;
left: 0;
}
100% {
top: calc(100% - 20px);
left: calc(100% - 20px);
}
}"兼容所有大小的屏幕"则表明不能用绝对像素值来定位了。
如果把上面代码改成100% {right:0;bottom:0}是没有效果不行的。