目录
解决一字母和数字不能换行问题
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;
}