目录
解决一字母和数字不能换行问题
word-break: break-all; /*遇到边界时一个单词会被拆分换行*/
word-wrap: break-word;/*控制长度超过一行的单词换行*/
/*一般情况下这两个单词配合使用*/
/*white-space,控制空白字符的显示,同时还能控制是否自动换行。它有五个值:normal | nowrap | pre | pre-wrap | pre-line
word-break,控制单词如何被拆分换行。它有三个值:normal | break-all 遇到边界时一个单词会被拆分换行 | keep-all所有“单词”一律不拆分换行
word-wrap(overflow-wrap)控制长度超过一行的单词是否被拆分换行,是word-break的补充,它有两个值:normal | break-word 换行 */
详细请看:https://www.cnblogs.com/dfyg-xiaoxiao/p/9640422.html
文字超出部分出行省略号
300px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
//注意如果是qq浏览器需要把css写在文字的标签才能有效。文字标签的父级无效。
控制文字超出2行出现省略号 只支持webkit内核
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;//对齐方式
-webkit-line-clamp: 2;
文字渐变
background-image: -webkit-linear-gradient(#4891ff, #5aafff, #67c4ff);
background-image: linear-gradient(#4891ff, #5aafff, #67c4ff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
//解释
background:-webkit-linear-gradient(...)为文本元素提供渐变背景。
webkit-text-fill-color:transparent使用透明颜色填充文本。
webkit-background-clip:text用文本剪辑背景,用渐变背景作为颜色填充文本。
用百分比减px
calc(100% - 30%) //css
calc(~'100% - 64px'); //less
calc(~'44px + @{selectVersionsHeight}'); //less selectVersionsHeight是一个变量
选择以3为倍数的li
https://blog.csdn.net/kerryqpw/article/details/78237467 解释
li:nth-of-type(3n+3)
当小于ie9时,执行这个代码。写在html里
用伪类写横线
&::after{
content: "";
display: inline-block;
height: 1px;
background:#e1e1e1;
100%;
position:absolute;
bottom:0;
left:0;
z-index: 99;
transform: scaleY(0.5);
}
字间距
letter-spacing:80px;//字间隔
text-indent:80px;//首行缩进
关于iPhone的点击事件绑定无效的处理方法 https://blog.csdn.net/u014477038/article/details/52527194
在绑定的元素上加一个属性:cursor:pointer;
去掉a、button、input点击出现蓝色边框
a,button,input{
-webkit-tap-highlight-color:transparent;
}
隐藏滚动条
.tabs-wrap::-webkit-scrollbar{
display: none;
}
meta标签
<meta name="renderer" content="webkit"> //如果是双核浏览器默认使用谷歌
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> //如果是ie浏览器默认使用edge
占满视口(屏幕)的全部
https://www.cnblogs.com/yanxinhua/p/6635871.html
height: 100vh;
100vw;
用伪类清除样式
.clear:after{
content:'';
clear:both;
display: block;
0;
height: 0;
visibility: hidden;
}
两例布局
https://www.cnblogs.com/depsi/p/5097013.html
写向右的箭头
.shop-name:after {
content: "";
display: inline-block;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
position: relative;
20rpx;
height: 20rpx;
border-top- 0.5px;
border-top-style: solid;
border-top-color: rgb(51, 51, 51);
border-left- 0.5px;
border-left-style: solid;
border-left-color: rgb(51, 51, 51);
}
写常见的优惠标签
.coupon {
position: relative;
display: inline-block;
margin-right: 10px;
padding: 0 18px;
border: 1px solid #ff4546;
height: 32px;
line-height: 32px;
color: #ff4546;
font-size: 20px;
border-radius: 6px;
}
.coupon:after,
.coupon:before {
content: "";
display: block;
14px;
height: 14px;
background-color: #fff;
position: absolute;
top: 9px;
box-sizing: border-box;
transform: rotate(45deg);
}
.coupon:after {
left: -7px;
border-right: 1px solid #ff4546;
border-top: 1px solid #ff4546;
}
.coupon:before {
right: -7px;
border-left: 1px solid #ff4546;
border-bottom: 1px solid #ff4546;
}
<div class="coupon">满199减30</div>
iPhoneX 苹果的安全距离
.contain{
padding-bottom:constant(safe-area-inset-bottom); //兼容IOS < 11.2
padding-bottom:env(safe-area-inset-bottom);//兼容IOS > 11.2
}
注意:constant必须写在前面,env写在后面。
constant与env有4个预设变量:
safe-area-inset-top //齐刘海。。。
safe-area-inset-left
safe-area-inset-right
safe-area-inset-bottom //home键
https://returnc.com/detail/3788
小程序写上面的两行代码就好了,普通网页必须设置 viewport-fit=cover
less-----------------------------------------------------------------------------------------------------------------------
less函数的应用
.fontStyle(@size:12px,@color:@grey,@lineHeight:@cardOneLineHeight,@fontWeight:normal){
font-size: @size;
color: @color;
line-height: @lineHeight;
font-weight: @fontWeight;
}
修改placeholder的颜色
参考地址:https://www.cnblogs.com/jf-67/p/7241252.html?utm_source=tuicool&utm_medium=referral
input::-webkit-input-placeholder{
color:red;
}
input::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:red;
}
input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:red;
}
input:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:red;
}
图片按比例填充
img:object-fit:cover;//直接的图片
background-szie:cover;//背景图