css爆炸級操作

08-21

css爆炸級操作

來自專欄猿論55 人贊了文章

本文介紹有關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. 邊距盒子

使盒子的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. 字體大小根據不同視口進行調整

不用寫Javascript了

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

9. 禁用滑鼠事件、移動端禁止圖片長按保存功能

PC端禁止滑鼠點擊事件，移動端禁止觸摸事件還有長按事件

.no-events { pointer-events: 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 { color: transparent; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5)}

12. 文字漸變

.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行顯示省略號

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

17. 移動端順暢滾動

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

18. 多張背景圖

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

19. Iphone相冊標題吸頂

html

<ul class="sticky-list">  <li class="sticky-item"> <div class="title">2018年8月1日</div> <ul class="photo-list">  <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%; } } }}

二、偽類、偽元素

1. 當a標籤沒有文本內容，但有 href 屬性的時候，顯示它的 href 屬性

/* href為標籤上的property，可以換成任何一個 */a[href^=http]:empty::after { content: attr(href)} /* 字元串拼接 */a:empty::after { content: "("attr(href)")"}

2. 用戶點擊反饋

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

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

* { -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. 基數項、偶數項、倍數分組項

/* 基數 */.selector:nth-child(2n-1) {}/* 偶數 */.selector:nth-child(2n) {}/* 倍數分組項 */.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. 逗號分隔列表

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

6. 表單元素各種狀態的設置

/* Input、textarea設置placeholder文字的顏色（這裡的placeholder是個偽元素，並不是偽類） */.selector::placeholder { color: #666}/* 設置表單元素獲取焦點時的樣式 */.selector:focus { border: 1px solid #ebebeb}/* 設置表單元素被禁止時的樣式 */.selector:disabled { background-color: #f1f1f1}/* 設置checkbox、radio被選中時的樣式 */.selector:checked { background-color: #f1f1f1}

7. 將checkbox改造成switch組件（利用偽類checked狀態）

checkbox:checked + ::after偽元素輕鬆實現

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;}/* 選中狀態時，背景色切換 */.switch-component:checked { background-color: #86c0fa; }/* 選中狀態時，按鈕的位置移動 */.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: "Were 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. 首字、首行放大

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

11. a標籤偽類設置順序LVHA

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

12. 增強用戶體驗，使用偽元素實現增大點擊熱區

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

13. 偽元素實現換行，替代換行標籤

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

14. 夜間模式

此方法是checkbox:checked + ~選擇器 + css變數啦，此處的變數為局部變數，非常酷，大家可以自己加一些其他的變數，如文字的顏色

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. 感應用戶聚焦區域

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

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

16. Tab切換

此方法為radio:checked + label + ~選擇器，還有:foucs-within、:target方法，不過這兩種方法實現起來比較複雜，而且還有一些Bug，本文不示範

html

<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按鈕的默認樣式 */.nav>li>label { display: block; padding: 1rem 2rem; cursor: pointer}/* content內容的默認樣式 */.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}/* 調皮一下，寫個動畫 */@keyframes fade-out { from { transform: translateX(2rem); opacity: 0 } to { transform: translateX(0); opacity: 1 } }

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

這裡用到placeholder-shown偽類，簡單來說就是當input標籤有了placeholder屬性並且內容不為空時，會觸發該狀態，但是當input標籤有了value值之後，就會消除該狀態，所以這裡也要配合:not選擇器

html

<div class="input-line"> <input type="text" placeholder="請輸入關鍵字進行搜索"> <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獲取焦點時，上浮效果

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. 菜單欄的彈性伸縮

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

html

<div class="index"> <input type="checkbox" id="btn"> <label for="btn"></label> <div class="menu"></div> <div class="content"> <p>我是內容</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;} /* 內容區的初始樣式 */ .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)} /* 內容區顯示的樣式 */input:checked~.content { transform: translateX(10rem) }

三、布局

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

再也不用last-child { margin: 0 }

ul { display: flex; flex-wrap: wrap; justify-content: space-between}ul > li { flex-basis: 23%; height: 5rem; background-color: #f1f1f1; margin-bottom: 1rem}

2. 左右滑動

移動端上滑動絲滑要加-webkit-overflow-scrolling: touch

.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. 絕對底部

內容高度不夠時，元素顯示在最底部，內容高度>100%時，元素撐在最底部（常用於Footer），注意這並不是Fixed定位

* { 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. 左邊固定，右邊自適應

當然還有浮動的方法，這裡介紹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}

作者：白色風車kai
鏈接：https://www.imooc.com/article/51405
來源：慕課網