初始化样式
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; background: transparent; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; }
a { cursor: pointer; }
ol, ul, li { list-style: none; }
header, section, footer, img, button { display: block; margin: 0; padding: 0; border: none; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
a { text-decoration: none; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
body { font-family: Microsoft Yahei, Arial, sans-serif; overflow-x: hidden; text-align: center; }
去除系统默认appearance
input,
select,
textarea,
button {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
font-size: 14px;
border: none;
outline: 0;
background: none;
border-radius: 0;
}
去除点击图片有背景
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; }
省略号...
单行显示省略号
.elli {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行显示省略号
webpack打包vue项目的时候 -webkit-box-orient: vertical; 会被自动忽略
因而出现一些兼容性问题。
所以在此需要关闭autoprefixer的自动删除功能 /* autoprefixer: off */
记得一定要加上 /* autoprefixer: off */
因而出现一些兼容性问题。
所以在此需要关闭autoprefixer的自动删除功能 /* autoprefixer: off */
记得一定要加上 /* autoprefixer: off */
.elli-row-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical; /* autoprefixer: off */
word-break: break-all;
word-wrap: break-word;
}
移动设备上 ios 下 webkit 弹性滚动
.scroll{ -webkit-overflow-scrolling : touch; overflow-y:auto; }
弹性布局常用
.flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.ver-mid {
-moz-box-align: center;
-moz-box-pack: justify;
align-items: center;
box-sizing: border-box;
display: flex;
}
<div class="flex-row ver-mid" style="background: #2aa856; height: 200px;">
<div style="background: #f7f507; flex: 1; height: 60px;">col-1</div>
<div style="background: #8858F6; width: 220px; height: 100px; color:#fff;">col-2</div>
</div>
样式穿透
在开发中修改第三方组件样式是很常见，但由于 scoped 属性的样式隔离，可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用（组件样式污染、不够优雅），样式穿透在css预处理器中使用才生效。
● less使用 /deep/
<style scoped lang="less">
.content /deep/ .el-button {
height: 60px;
}
</style>
● scss使用 ::v-deep
<style scoped lang="scss">
.content ::v-deep .el-button {
height: 60px;
}
</style>
● stylus使用 >>>
<style scoped ang="stylus">
外层 >>> .custon-components{
height: 60px;
}
</style>
图片加滤镜效果
.img { filter: brightness(100%) saturate(120%) contrast(120%); }
渐变
.gradient {
background: #ff6600;
background: -moz-linear-gradient(top, #ff6600 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6600 ), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #ff6600 0%,#000000 100%);
background: -o-linear-gradient(top, #ff6600 0%,#000000 100%);
background: -ms-linear-gradient(top, #ff6600 0%,#000000 100%);
background: linear-gradient(top, #ff6600 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6600', endColorstr='#000000',GradientType=0 ); /*兼容IE8IE9*/
}
opacity透明度
{
opacity: 0.9;
-ms-filter: "alpha(opacity=90)";
filter: alpha(opacity=90);
}
过渡效果
.transition {
transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
calc计算函数
.width-cal {
width: -moz-calc(100% - 60px);
width: -webkit-calc(100% - 60px);
width: calc(100% - 60px);
}
css适配iPhoneX屏幕安全区
reference
segmentfault.com/a/119000002…
<head>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" name="viewport"/>
</head>
body {height: 100vh;}
/* 你的贴底元素↓ */
.container {
position: absolute;
bottom: 0;
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
...
}
解决less中无法正确计算calc的问题
在less中使用calc函数进行不同长度单位的计算时，后面值的单位会被忽略，例如：
height: calc(100vh - 50px);
结果等于50vh
解决方法：在表达式前添加"~"
height: calc(~"100vh - 50px");
