本文介紹有關(guān)css的一些技巧以及一些比較另類的用法，有些情景完全可以避開使用Javascript，單純的css就可以完美實(shí)現(xiàn)

一、基礎(chǔ)

1. 復(fù)位
推薦大家使用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
}

/* 使用變量，參數(shù)2為當(dāng)未找到變量--theme_color時所使用的值 */
body {
  color: var(--theme-color, '#000')
}

/* 將變量聲明到局部, 只能在elem的子節(jié)點(diǎn)中使用*/
.selector {
  --color: black
}

.selector span {
  color: var(--color)
}

// 4. 題外話，Javascript如何操作css變量

// 操作全局變量
document.documentElement.style.setProperty('--theme_color', 'blue');

// 操作局部變量，如果有兩個selector，那么現(xiàn)在只設(shè)置了第一個的selector，不影響第二個selector的變量
document.querySelectorAll(selector)[0].style.setProperty('--color', 'blue');

5. 邊距盒子

border-box

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

6. 計(jì)算函數(shù)
注意，減號、加號運(yùn)算符首尾必須要有空格

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

6. 為body設(shè)置行高，不必為其他元素設(shè)置，文本元素很容易繼承body樣式

body {
  line-height: 1.5
}

7. 使用SVG圖標(biāo)
SVG的好處就不多說了吧

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

8. 字體大小根據(jù)不同視口進(jìn)行調(diào)整

auto-size

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

body {
  font-size: 1rem
}

9. 禁用鼠標(biāo)事件、移動端禁止圖片長按保存功能

/* PC、移動端都禁止點(diǎn)擊事件 */
.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. 為手持設(shè)備定制特殊樣式

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

15. 不換行、自動換行、強(qiáng)制換行
不換行一般用再溢出時顯示省略號，強(qiáng)制換行一般用在有特殊字符、英文單詞的時候

p {
  /* 不換行 */
  white-space: nowrap;

  /* 自動換行 */
  word-wrap: break-word;
  word-break: normal;

  /* 強(qiáng)制換行 */
  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相冊標(biāo)題吸頂

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 src="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. 移動端屏幕旋轉(zhuǎn)時，字體大小不改變

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動畫結(jié)束時，保持該狀態(tài)不變

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

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

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

23. 橫豎屏匹配

/* 豎屏?xí)r樣式 */
@media all and (orientation:portrait) {
  body::after {
      content: '豎屏'
    }
}

/* 橫屏?xí)r樣式 */
@media all and (orientation:landscape) {
    body::after {
      content: '橫屏'
    }
}

24. 改變input光標(biāo)顏色

.input {
  caret-color: red
}

25. 三角形

.traingle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid salmon;
}

26.文字裁剪背景

.box {
  background-image: url('');
  background-size: cover;
  -webkit-background-clip: text;
  color: transparent
}

27. 倒影

div {
  -webkit-box-reflect: below 0 -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.3))
}

28. 動畫相同，緩動不同

.ball1 {
  animation: move .6s ease-in infinite alternate;
 }

.ball2 {
  animation: move .5s ease-in infinite alternate;
 }

.ball3 {
   animation: move .4s ease-in infinite alternate;
 }

@keyframes move {
  100% {
    transform: translateY(30px);
  }
}

29. 斜線

.box {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid #313131;
  overflow: hidden;
}

.box::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  background-color: #313131;
  transform: rotateZ(45deg) scaleX(2);
}

30. 增亮圖片

img:hover {
  filter: brightness(1.1);
 }

31. 頭像底部陰影

.avatar {
  position: relative;
  width: 150px;
  height: 150px;
  background: url('') no-repeat center center / 100% 100%;
  border-radius: 50%;
 }

.avatar::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  filter: blur(10px) brightness(80%) opacity(.8);
  z-index: -1;
}

32. 滾動視覺差

html

<div class="container">
  <div class="section-one">translateZ(-1)</div>
  <div class="section-two">translateZ(-2)</div>
  <div class="section-three">translateZ(-3)</div>
</div>

css

html {
  height: 100%;
  overflow: hidden;
}

 body {
  padding: 0;
  margin: 0;
  perspective: 2px;
  transform-style: preserve-3d;
  height: 100%;
  overflow-x: hidden;
}

 .container {
  position: relative;
  height: 150%;
}

 .container>div {
  font-size: 40px;
  position: absolute;
  top: 20%;
 }

.container .section-one {
  left: 0%;
  transform: translateZ(-2px);
}

.container .section-two {
  left: 40%;
  transform: translateZ(-4px);
 }

.container .section-three {
  left: 90%;
  transform: translateZ(-6px);
}

33. 錨點(diǎn)跳轉(zhuǎn)平滑過渡

<!-- 導(dǎo)航 -->
<ul class="nav">
  <li><a href="#intro">介紹</a></li>
  <li><a href="#pro">產(chǎn)品</a></li>
  <li><a href="#about">關(guān)于我們</a></li>
</ul>

<!-- 內(nèi)容 -->
<ul class="content-list">
  <li id="intro"></li>
  <li id="pro"></li>
  <li id="about"></li>
</ul>

css

body {
  scroll-behavior: smooth;
}

該樣式同樣使window.scrollTo、scrollBy、scroll生效

34. 加載

css

.loading {
  width: 40px;
  height: 40px;
  border-width: 2px;
  border-style: solid;
  border-color: #fff #fff transparent transparent;
  border-radius: 50%;
  animation: loading 1s ease-in-out infinite;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

把border的顏色改成border-color: #FFF transparent #FFF transparent

35. 菜單欄開關(guān)按鈕

html

<div class="menu">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>

scss

.menu {
  display: inline-block;
  cursor: pointer;
  .bar {
    width: 35px;
    height: 5px;
    background-color: #fff;
    margin: 6px 0;
    transition: all .3s ease;
    transform-origin: 100%;
  }
  &:hover {
    .bar {
      &:first-child {
        transform: rotate(-40deg);
      }
      &:nth-child(2) {
        opacity: 0;
      }
      &:last-child {
        transform: rotate(40deg);
      }
    }
  }
}

二、偽類、偽元素

1. 當(dāng)a標(biāo)簽沒有文本內(nèi)容，但有 href 屬性的時候，顯示它的 href 屬性

 /* href為標(biāo)簽上的property，可以換成任何一個 */
a[href^='http']:empty::after {
  content: attr(href)
}

 /* 字符串拼接 */
a:empty::after {
  content: "("attr(href)")"
}

2. 用戶點(diǎn)擊反饋

btn-active

item-active

menu-active

.btn:active {
  opacity: .7;
  /* background-color: #f1f1f1 */
}

3. 移動端pointer型元素(a,button或者手動cursor: pointer的元素)點(diǎn)擊去除高光

* {
  -webkit-tap-highlight-color: transparent
}

4. 清除浮動

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

5. 最后一個元素不需要邊框、邊距等

ul > li:not(:last-child) {
  border-bottom: 1px solid #c5b7b7
}

6. 基數(shù)項(xiàng)、偶數(shù)項(xiàng)、倍數(shù)分組項(xiàng)

/* 基數(shù) */
.selector:nth-child(2n-1) {}

/* 偶數(shù) */
.selector:nth-child(2n) {}

/* 倍數(shù)分組項(xiàng) */
.selector:nth-child(3n+1) {} /* 匹配第1、4、7、10... */
.selector:nth-child(3n+5) {} /* 匹配第5、8、11、14... */
.selector:nth-child(5n-1) {} /* 匹配第4、9、13、17... */

5. 逗號分隔列表

between

ul > li:not(:last-child)::after {
  content: ','
}

6. 表單元素各種狀態(tài)的設(shè)置

focus + placeholder

checked

disabled

/* Input、textarea設(shè)置placeholder文字的顏色（這里的placeholder是個偽元素，并不是偽類） */
.selector::placeholder {
  color: #666
}

/* 設(shè)置表單元素獲取焦點(diǎn)時的樣式 */
.selector:focus {
  border: 1px solid #ebebeb
}

/* 設(shè)置表單元素被禁止時的樣式 */
.selector:disabled {
  background-color: #f1f1f1
}

/* 設(shè)置checkbox、radio被選中時的樣式 */
.selector:checked {
  background-color: #f1f1f1
}

7. 將checkbox改造成switch組件（利用偽類checked狀態(tài)）

switch

html

<input class='switch-component' type='checkbox'>

css

/* 背景層 */
.switch-component {
  position: relative;
  width: 60px;
  height: 30px;
  background-color: #dadada;
  border-radius: 30px;
  border: none;
  outline: none;
  -webkit-appearance: none;
  transition: all .2s ease;
}

/* 按鈕 */
.switch-component::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #fff;
  border-radius: 50%;
  transition: all .2s ease;
}

/* 選中狀態(tài)時，背景色切換 */
.switch-component:checked {
  background-color: #86c0fa;
 }

/* 選中狀態(tài)時，按鈕的位置移動 */
.switch-component:checked::after {
  left: 50%;
}

8. 美化破碎圖像
每個瀏覽器效果都不一樣，可以忽略

img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  text-align: center;
  line-height: 2
}

/* 提示語 */
img:before {  
  content: "We're sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px
}

 /* 顯示圖片url引用 */
img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px
}

9. 隱藏沒有靜音、自動播放的影片

video[autoplay]:not([muted]) {
  display: none
}

10. 首字、首行放大

line

letter

/* 首字放大 */
p:first-letter {
  font-size: 2rem
}

/* 首行放大 */
p:first-line {
  font-size: 2rem
}

11. a標(biāo)簽偽類設(shè)置順序LVHA

a:link {}
a:visited {}
a:hover {}
a:active {}

12. 增強(qiáng)用戶體驗(yàn)，使用偽元素實(shí)現(xiàn)增大點(diǎn)擊熱區(qū)

hover

.btn {
  position: relative
}

.btn::befoer{
  content: "";
  position: absolute;
  top: -1rem;
  right: -1rem;
  bottom: -1rem;
  left: -1rem
}

13. 偽元素實(shí)現(xiàn)換行，替代換行標(biāo)簽

.br::after{
  content: "A";
  white-space: pre
}

14. 夜間模式

5531211-98cc2487aa5671f3.gif

html

<input class='switch-component' type='checkbox'>
<div class="theme-container"></div>

css

body,
html {
  margin: 0;
  padding: 0;
  height: 100%
}

/* 省略switch-component的樣式 */

.theme-container {
  --theme_color: #fff; /* 主題色 */
  width: 100%;
  height: 100%;
  background-color: var(--theme_color);
  transition: background-color .2s ease
}

.switch-component:checked + .theme-container {
  --theme_color: #313131 /* 重置變量 */
}

15. 感應(yīng)用戶聚焦區(qū)域

hot

foucs-within表示一個元素獲得焦點(diǎn)，或，該元素的后代元素獲得焦點(diǎn)。劃重點(diǎn)，它或它的后代獲得焦點(diǎn)，上圖則是.form-wrapper的候代元素input獲得了焦點(diǎn)

.form-wrapper:focus-within {
  transition: all .2s ease;
  transform: translateY(-1rem);
  background-color: #f1f1f1;
}

16. Tab切換

tab

html

<!-- 默認(rèn)選中第一個Tab -->
<div class="container">
  <input class="nav1" id="li1" type="radio" name="nav" checked>
  <input class="nav2" id="li2" type="radio" name="nav">
  <ul class='nav'>
    <li>
      <label for="li1">Tab1</label>
    </li>
    <li>
      <label for="li2">Tab2</label>
    </li>
  </ul>
  <ul class="content">
    <li>Content1</li>
    <li>Content2</li>
  </ul>
</div>

css

input {
  display: none
}

.nav>li {
  display: inline-block
 }

/* tab按鈕的默認(rèn)樣式 */
.nav>li>label {
  display: block;
  padding: 1rem 2rem;
  cursor: pointer
}

/* content內(nèi)容的默認(rèn)樣式 */
.content>li {
  display: none;
  padding: 1rem;
  animation: fade-out .5s cubic-bezier(0.075, 0.82, 0.165, 1)
}

/* tab按鈕選中的樣式 */
.nav1:checked~.nav li:first-child,
.nav2:checked~.nav li:last-child {
  background-color: #bf8963;
  color: #fff
 }

/* content顯示的樣式 */
.nav1:checked~.content>li:first-child,
.nav2:checked~.content>li:last-child {
  display: block
}

/* 調(diào)皮一下，寫個動畫 */
@keyframes fade-out {
  from {
    transform: translateX(2rem);
    opacity: 0
  }
  to {
    transform: translateX(0);
    opacity: 1
  }
 }

17. 當(dāng)輸入框的value的長度不為0時，顯示搜索按鈕

shown

這里用到placeholder-shown偽類，簡單來說就是當(dāng)input標(biāo)簽有了placeholder屬性并且內(nèi)容不為空時，會觸發(fā)該狀態(tài)，但是當(dāng)input標(biāo)簽有了value值之后，就會消除該狀態(tài)，所以這里也要配合:not選擇器

html

<div class="input-line">
  <input type="text" placeholder="請輸入關(guān)鍵字進(jìn)行搜索">
  <button type="button" class="search-btn">搜索</button>
</div>

css

.search-btn {
  opacity: 0;
  transition: all .5s ease-in-out
}

 input:not(:placeholder-shown)~.search-btn {
  opacity: 1
 }

18. input獲取焦點(diǎn)時，上浮效果

input-up

input {
  appearance: none;
  outline: none;
  border: none;
  padding: 1rem;
  border-bottom: 1px solid #ebebeb;
  transition: all .2s ease-in-out;
 }

input:focus {
  box-shadow: 0 3px 10px 1px rgba(0, 0, 0, .1);
  transform: translateY(-.5rem)
 }

19. 菜單欄的彈性伸縮

menu

跟夜間模式幾乎一樣，所以說，只要腦洞夠大，什么效果都可以做的出來
html

<div class="index">
  <input type="checkbox" id="btn">
  <label for="btn"></label>
  <div class="menu"></div>
  <div class="content">
    <p>我是內(nèi)容</p>
  </div>
</div>

css

body,
html {
  height: 100%;
  overflow-x: hidden;
}

.index {
  height: 100%;
}

/* 菜單欄的初始樣式 */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 10rem;
  height: 100%;
  background-color: darkgrey;
  transform: translateX(-10rem);
  z-index: 1;
  transition: all .2s ease-in;
}

 /* 內(nèi)容區(qū)的初始樣式 */
 .content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: cornsilk;
  transform: translateX(0);
  transition: all .3s ease-in;
 }

 input {
  display: none;
}

 /* 切換按鈕的初始樣式 */
 label {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  transition: all .2s ease-in;
}

 /* 切換按鈕選中的樣式 */
input:checked~label {
  left: 12rem;
}

/* 切換按鈕文字的切換樣式 */
input:not(:checked)~label::after {
  content: '拉出'
}

input:checked~label::after {
  content: '收起'
}

/* 菜單欄顯示的樣式 */
input:checked~.menu {
  transform: translateX(0)
}

 /* 內(nèi)容區(qū)顯示的樣式 */
input:checked~.content {
  transform: translateX(10rem)
 }

20. 移動端Android設(shè)備上去掉語音輸入按鈕

input::-webkit-input-speech-button {
  display: none
}

*21.去掉input，type為search時自帶的清空按鈕

.search::-webkit-search-cancel-button {
   display: none 
}

22. 暫停、啟動動畫

html

<input type="checkbox" checked>
<div class="box"></div>

css

input[type='checkbox']:not(:checked)~.box{
  animation-play-state: paused;
}

23. 波浪效果

body {
  background-color: #313131;
 }

 .wave {
  position: absolute;
  top: 0;
  left: 0;
   right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  background-color: #5291e0;
  overflow: hidden;
}

.wave::before,
 .wave::after {
   content: '';
   position: absolute;
   left: 50%;
  width: 500%;
  height: 500%;
  background-color: #fff;
  border-radius: 48%;
  animation-name: rotate;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

 .wave::before {
  bottom: 15%;
  border-radius: 45%;
  animation-duration: 15s;
 }

 .wave::after {
  bottom: 10%;
  opacity: .5;
  border-radius: 47%;
  animation-duration: 15s;
}

 @keyframes rotate {
  0% {
    transform: translate(-50%, 0) rotateZ(0deg);
  }
  50% {
    transform: translate(-50%, 0) rotateZ(180deg);
    }
  100% {
    transform: translate(-50%, 0) rotateZ(360deg);
  }
}

實(shí)際上是這樣的，藍(lán)色為靜止的.wave，白色和白色透明的分別為::before和::after

24. 導(dǎo)航欄下劃線跟隨鼠標(biāo)

ul {
  list-style: none;
  font-size: 0;
}

li {
  position: relative;
  display: inline-block;
  padding: 1rem;
  cursor: pointer;
  font-size: 16px;
}

 li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 0;
  height: 0;
  border-bottom: 1px solid #000;
  transition: .3s ease;
}

li:hover::after {
  width: 100%;
  left: 0;
}

li:hover~li::after {
  left: 0;
}

25. 數(shù)字、文字滾動

html

<!--  content為滾動的內(nèi)容 -->
<div class="word" content="84561481">2</div>
<div class="word" content="45616182">0</div>
<div class="word" content="12342312">1</div>
<div class="word" content="53646232">8</div>
<div class="word">-</div>
<div class="word" content="67876823">0</div>
<div class="word" content="80543352">8</div>
<div class="word">-</div>
<div class="word" content="78945311">2</div>
<div class="word" content="12477433">4</div>

scss

$background: #313131;
body,
html {
  background-color: $background;
  color: #fff;
  font-size: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  .word {
    position: relative;
    display: inline-block;
    overflow: hidden;
    &[content]::after {
      content: attr(content);
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      word-break: break-all;
      background-color: $background;
      animation: letter 2s ease-in 0.5s forwards;
    }
    @for $i from 1 through 10 {
      &:nth-child(#{$i})::after {
        animation-delay: #{$i/5}s;
      }
    }
  }
}

@keyframes letter {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(220px);
  }
}

先把::after默認(rèn)高度調(diào)上一點(diǎn)、再把overflow: hidden去掉之后，你會發(fā)現(xiàn)其實(shí)原理很簡單

三、布局

1. 使用FlexBox擺脫外邊距的各種 hack

flexbox

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

ul > li {
  flex-basis: 23%;
  height: 5rem;
  background-color: #f1f1f1;
  margin-bottom: 1rem
}

2. 左右滑動

scroll-x

.scroll-x {
  display: flex;
  width: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch
}

.scroll-x > .scroll-x-item {
  flex-shrink: 0;
  margin-right: .5rem
}

3. 絕對底部
內(nèi)容高度不夠時，元素顯示在最底部，內(nèi)容高度>100%時，元素?fù)卧谧畹撞浚ǔＳ糜贔ooter），注意這并不是Fixed定位

absolute footer

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

html {
  height: 100%
 }

body {
  position: relative;
  min-height: 100%;
  padding: 0;
  padding-bottom: 5rem
}

.footer {
  position: absolute;
  bottom: 0
}

不一定要以body為父元素，只要確保父元素的最小高度為100%就行

4. 左邊固定，右邊自適應(yīng)
當(dāng)然還有浮動的方法，這里介紹flexbox

.flex {
  display: flex
}

.flex > .left {
  width: 100px
 }

.flex > .right {
  flex: 1
  }

5. 子元素高度auto時，使其全屏居中
一般用在dialog、toast...

.all-center {
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center
}

6. 解決inline-block的空白間隙

html

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

css

 li {
  display: inline-block;
  width: 25%;
  height: 10rem;
  background-color: seashell
}

解決辦法，給父元素ul設(shè)置font-size: 0; li元素再單獨(dú)設(shè)置font-size

ul {
  font-size: 0
}

li {
  font-size: 1.4rem
}

最后

本文到此結(jié)束，希望以上內(nèi)容對你有些許幫助，如若喜歡請記得點(diǎn)個贊跟關(guān)注哦 ??

image