css爆炸级操作(2018-10-09)

本文介绍有关css的一些技巧以及一些比较另类的用法，有些情景完全可以避开使用Javascript，单纯的css就可以完美实现

一、基础

1. 复位
推荐大家使用reset.css

* {  box-sizing: border-box;  margin: 0;  padding: 0;
}

2. 重置表单样式
移除各个浏览器之间的差异性，然后自定义样式

input, button, select, textarea {  appearance: none;  -webkit-appearance: none;  -moz-appearance: none;  outline: none;  border: none;
}

3. 变量

/* 将变量声明到全局 */:root {  --theme_color: red
}/* 使用变量，参数2为当未找到变量--theme_color时所使用的值 */body {  color: var(--theme-color, '#000')
}/* 将变量声明到局部, 只能在elem的子节点中使用*/.selector {  --color: black
}.selector span {  color: var(--color)
}

// 4. 题外话，Javascript如何操作css变量

// 操作全局变量document.documentElement.style.setProperty('--theme_color', 'blue');// 操作局部变量，如果有两个selector，那么现在只设置了第一个的selector，不影响第二个selector的变量document.querySelectorAll(selector)[0].style.setProperty('--color', 'blue');

5. 边距盒子

border-box

使盒子的width，height包括内容、边框、内边距，不包括边距，经常遇到宽度100%，但是有padding的时候会溢出

.border-box {  box-sizing: border-box
}

6. 计算函数
注意，减号、加号运算符首尾必须要有空格

.selector {  width: calc(100% / 3 * 2 - 5px + 10px)
}

6. 为body设置行高，不必为其他元素设置，文本元素很容易继承body样式

body {  line-height: 1.5}

7. 使用SVG图标
SVG的好处就不多说了吧

.logo {  background: url('logo.svg')
}

8.  字体大小根据不同视口进行调整

auto-size

不用写Javascript了

:root {  font-size: calc(2vw + 1vh)
}body {  font-size: 1rem}

9. 禁用鼠标事件、移动端禁止图片长按保存功能

/* PC、移动端都禁止点击事件 */.no-events {  pointer-events: none
}/* 移动端禁止长按呼出菜单 */.no-callout {  -webkit-touch-callout: none
}

10. 移动端禁止用户长按文字选择功能

.unselect {  -webkit-touch-callout:none;  -webkit-user-select:none;  -khtml-user-select:none;  -moz-user-select:none;  -ms-user-select:none;  user-select:none
}

11. 文字模糊

blur

.blur {  color: transparent;  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5)
}

12. 文字渐变

text-gradient

.text-gradient {  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(63, 52, 219)), to(rgb(233, 86, 86)));  -webkit-background-clip: text;  -webkit-text-fill-color: transparent
}

13. 背景渐变兼容性写法

.gradient {  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));  background: -o-linear-gradient(bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0));  background: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(0, 0, 0, .8)), to(rgba(0, 0, 0, 0)))
}

14. 为手持设备定制特殊样式

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld">

15. 不换行、自动换行、强制换行
不换行一般用再溢出时显示省略号，强制换行一般用在有特殊字符、英文单词的时候

p {  /* 不换行 */
  white-space: nowrap;  /* 自动换行 */
  word-wrap: break-word;  word-break: normal;  /* 强制换行 */
  word-break: break-all;
}

16. 超出N行显示省略号

overflow

.hide-text-n {  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: n;  overflow: hidden
}

17. 移动端顺畅滚动

.scroll-touch {  -webkit-overflow-scrolling: touch
}

18. 多张背景图

background

body {  background: url() no-repeat left center / 1rem, url() no-repeat right center / 1rem}

19. Iphone相册标题吸顶

sticky

html

<ul class="sticky-list">  <!-- n个sticky-item -->
  <li class="sticky-item">
    <div class="title">2018年8月1日</div>
    <ul class="photo-list">
      <!-- n个photo-item -->
      <li class="photo-item">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="timg.jpg">
      </li>
    </ul>
  </li></ul>

scss

.sticky-list {
  .sticky-item {
    .title {      position: -webkit-sticky;      position: sticky;      top: 0;      padding: .5rem;
      background-color: #fff;
    }
  }
  .photo-list {    display: flex;
    flex-wrap: wrap;    padding: .5rem;
    padding-bottom: 0;
    .photo-item {
      flex-basis: 19%;
      margin-right: 1%;
      margin-bottom: 1%;
      &:last-child {
        margin-right: 0;
      }
      img {        display: block;        width: 100%;
      }
    }
  }
}

20. 硬件加速
写transition、animation时，请用transform代替left、top等属性，从而使动画更流畅

.cube {  -webkit-transform: translateZ(0);  -moz-transform: translateZ(0);  -ms-transform: translateZ(0);  -o-transform: translateZ(0);  transform: translateZ(0)
}

21. 移动端屏幕旋转时，字体大小不改变

html, body, form, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%}

22. Animation动画结束时，保持该状态不变

.box {  animation: move 1s ease forwards;  /* animation-fill-mode: forwards; */}

@keyframes move {
  0% {    transform: translateY(0)
  }

  100% {    transform: translateY(200px)
  }
}

23. 横竖屏匹配

作者：daydreammoon
链接：https://www.jianshu.com/p/2e0695f1bd43