1. 全屏背景

1
2
3
4
5
6
7
8
body{
  background-image: url(1.png);         // 背景图路径
  background-position: center center;   // 背景图垂直水平居中
  background-repeat: no-repeat;         // 不平铺
  background-attachment: fixed;         // 当内容高度大于图片高度时，背景图像的位置相对于viewport固定
  background-size: cover;               // 背景图基于容器大小伸缩
  background-color: #fff;               // 背景图加载过程中显示的背景色
}

2. 单行溢出

1
2
3
4
5
6
a{
  max-width: 100px;        // 固定宽度
  white-space: nowrap;     // 禁止换行
  overflow: hidden;        // 隐藏溢出文本
  text-overflow: ellipsis; // 超出部分显示...
}

3. 多行溢出

多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出多行溢出
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.content {
  width: 80%;
  max-height: 40px;
  position: relative;
  line-height: 1.4em;
  overflow: hidden;
}

.content::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 40px;
  background: -webkit-linear-gradient(left, transparent, #fff 55%);
  background: -o-linear-gradient(right, transparent, #fff 55%);
  background: -moz-linear-gradient(right, transparent, #fff 55%);
  background: linear-gradient(to right, transparent, #fff 55%);
}

4. 自动换行

word-wrap可以控制换行，当取值break-word时将强制换行，中英文文本都无任何问题，但是对长串的英文不起作用。也就是说break-word是用来断词而不是断字符。而word-break取值为break-all时，可允许非亚洲语言文本的任意字符断开。

一般来说，使用word-wrap:break-word声明可以确保所有文本正常显示。但在Firefox浏览器上，长串英文会出现问题(不换行)。为了解决长串英文问题，一般将word-wrap: break-word; word-break: break-all一起使用。但是这样又造成了一个新的问题，会导致普通英文语句中的单词断行影响阅读。

综上所述，主要问题是长串英文不换行和英文单词会被断开。两者选一，应该使用word-wrap: break-word; overflow:hidden结合，而不是word-wrap: break-word; word-break:break-all结合。

1
2
3
4
element{
  overflow: hidden;
  word-wrap: break-word;
}

5. flex:上中下布局

Chrome, Firefox, Safari, IE11, IE10有效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
  <style>
    .app{ 
      display: flex
    }
    .wrapper{ 
      display: flex; 
      flex-direction: column; 
      min-height: 100vh;
      width: 100%;
    }
    section{ 
      flex: 1 0 auto;
    }
    header, footer{ 
      height: 60px;
      background: blue;
    }
  </style>
  <div class="app">
    <div class="wrapper">
      <header></header>
      <section></section>
      <footer></footer>
    </div>
  </div>
</html>

6. 设置Select下拉箭头

1
2
3
4
5
6
7
8
9
select {
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
}

// IE
select::-ms-expand { display: none; }

7. <input> checkbox radio样式自定义

  • 方法1 图片替换

    1
    2


  • 方法2

8. 弹窗，遮罩后内容不滚动

Bootstrap, Ant design方法, 弹窗出现时给body添加行内样式{overflow: hidden}， 弹窗消失时{overflow: auto}

9. 阻止因出现滚动条导致页面抖动

信息流页面，如新浪微博，开始只有头部一些信息加载，此时页面高度有限，没有滚动条；然后，更多内容显示，滚动条出现。 margin: 0 auto主体元素自然会做偏移——跳动产生。

1
2
3
4
5
6
7
8
9
html {
  overflow-x: hidden;
  overflow-y: auto;
}
body {
  width: 100vw;
  overflow-x: hidden;
  padding-left: calc(100vw - 100%);
}

10. flex保持内容不超出容器

在一个设置了flex: 1或flex: 0 0 25%的容器中，如果文字很长，这时候文字就会超出容器，而不是呆在设置好的动态剩余空间中。可以给.content添加width:0, .content就不会被自己的元素无限撑开。

1
2
3
4
<div class="main">
  <div class="aside"></div>
  <div class="content"></div> 
</div>

1
2
3
4
5
6
7
8
9
10
11
.main{
  display: flex;
}
.aside{
  flex: 0 0 200px;
}
.content{
  flex: 1;
  width: 0;
  overflow: hidden; /* 兼容firefox */
}

10. 纹理背景

更多详情查看

11. 不定宽高元素水平垂直居中

不适合的方案

  • text-align和line-height
  • position:absolute, 50%, margin: -px

正确的方法

  • display:table和display:table-cell

    1
    2
    3
    4
    5
    6
    7
    8
    .container {
      display: table;
    }
    .inner {
      display: table-cell;
      vertical-align:middle;
      text-align:center;
    }

  • flex

    1
    2
    3
    4
    5
    .container {
      display: flex;
      align-items: center;
      justify-content: center;
    }

  • position:absolute, 50%, translate

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .container {
      position: relative;
    }
    .inner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

  • vw, vh和translate

    1
    2
    3
    4
    5
    6
    .inner {
      position:fixed;
      top: 50vh;
      left: 50vw;
      transform: translate(-50%, -50%); 
    }

  • :before和display:inline-block

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .container{
      text-align: center;
    }
    .container:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    .inner {
      display: inline-block;
    }

12. 移动端1px问题

由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，所以在高清瓶下看着1px总是感觉变胖了。

  • 在ios8+中当devicePixelRatio=2的时候使用0.5px

    1
    2
    3
    4
    5
    6
    7
    .border { border: 1px solid #999 }
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
      .border { border: 0.5px solid #999 }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
      .border { border: 0.333333px solid #999 }
    }

  • transform: scale(0.5)

参考资料