css样式也技巧

目录

• 解决一字母和数字不能换行问题
• 一个单词是一行
• 文字超出部分出行省略号
• 控制文字超出2行出现省略号 只支持webkit内核
• 控制文字超出1行出现省略号
• 用百分比减px
• 选择以3为倍数的li
• 当小于ie9时，执行这个代码。写在html里
• 用伪类写横线
• 字间距

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

 word-wrap: break-word;
/*  此值用来强制换行，内容将在边界内换行，中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。 */
 word-break: break-all;
 /* 是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。 */

一个单词是一行

word-break: keep-all;
/* 此值用来强制换行，内容将在边界内换行，中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。 */

文字超出部分出行省略号

width:300px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
//注意如果是qq浏览器需要把css写在文字的标签才能有效。文字标签的父级无效。

控制文字超出2行出现省略号 只支持webkit内核

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;

控制文字超出1行出现省略号

    width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

用百分比减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;
        width: 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;
  width: 100vw;

用伪类清除样式

.clear:after{
	content:'';
	clear:both;
	display: block;
	width: 0;
	height: 0;
	visibility: hidden;
}

两例布局

https://www.cnblogs.com/depsi/p/5097013.html

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;//背景图