css样式也技巧

目录

解决一字母和数字不能换行问题

 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;//背景图
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/hyx626/p/9738860.html