2019 年知識總結-css 篇

​ 19年，學習了不少的css的知識，特別是張鑫旭老師的css世界、css選擇器世界這兩本書真的受益不淺，以致於顛覆了我對css的認知，不由感嘆 ，css真的太深了；什麼樣的狀況該用什麼方式去處理？那種處理方式合理？怎樣才能加快瀏覽器的渲染性能？都沒有確定的答案，這就是css的魅力；除了積累大量的知識外，我的感受想象力也很重要

在這裏整理了一部分，主要是我以爲算比較有用的一些知識點跟技巧

1.user-select: all

user-select 支持哪些屬性，點擊連接查看

在網頁中，可能會遇到這種狀況，用戶但願便於複製網頁中的內容，此屬性能夠做爲加強用戶體驗寫在 css裏，只須要單擊行爲便可選中，也能夠做用於table 中

<table>
  <tr>
    <td>我有一頭小毛驢</td>
    <td>歷來也不騎</td>
    <td>11111</td>
    <td>11111</td>
    <td>11111</td>
  </tr>
</table>
複製代碼

table {
  border: 1px solid;
  width: 400px;
}
td {
  border: 1px solid;
  user-select: all;
}
複製代碼

2.scroll-behavior（讓滾動更平滑）

當用戶手動導航或者 CSSOM scrolling API 觸發滾動操做時，css 屬性 scroll-behavior 爲一個滾動框指定滾動行爲，其餘任何的滾動，例如那些因爲用戶行爲而產生的滾動，不受這個屬性的影響。在根元素中指定這個屬性時，它反而適用於視窗。

支持兩個值：

auto //當即滾動，默認值

smooth //平滑滾動

上面是 MDN 上對scroll-behavior的定義，簡單解釋一下；手動導航：很容易想到的是錨點跳轉

CSSOM：例如scrollX、scrollTop、scrollLeft等 Dom 屬性發生改變的時候也會受到影響

兼容性：通常，能夠做爲一個增長用戶體驗寫到須要平滑滾動的容器上，對於不支持的瀏覽器也不影響

...{scroll-behavior:smooth;}
複製代碼

3.attr()函數

用法: 經過 css 屬性獲取 html 標籤中的類容，attr 的值只能接受字符串，因此目前主要的用途就是提示類容

<div data-tooltip="你是豬">
  你是豬嗎？
</div>
複製代碼

div {
  position: relative;
  width: 100px;
}
div:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  width: 200%;
  line-height: 30px;
  left: 100%;
  top: 0;
  border: 1px solid;
}
複製代碼

4.僞類選擇器

先區分一下僞類跟僞元素，在 css 規範中，僞元素使用的是兩個冒號（::）,僞類是一個

4.1 :empty

選擇沒有子元素的元素，並且該元素也不包含任何文本節點（包括空格）；在網頁中有時候咱們但願沒有類容就不顯示，或者顯示其餘的樣式，以前都是 v-if、條件判斷

<p class="text"></p>
<p class="text">此處有文字。。。。。。</p>
複製代碼

.text {
  font-size: 24px;
  border: 1px solid;
  margin-top: 20px;
}
.text:empty {
  display: none;
}
複製代碼

4.2 :focus-within

表示一個元素得到焦點或該元素的後代元素得到焦點。換句話說，元素自身或者它的某個後代匹配:focus

<div class="content">
  <input type="text" />
</div>
複製代碼

.content:focus-within {
  background-color: pink;
}
複製代碼

4.3 :valid(實現一個谷歌帳號登陸框的效果)

:valid 選擇器在表單元素的值須要根據指定條件驗證時設置指定樣式，結合required="true"

還有一個相反的選擇器 :invalid

<div class="password">
  <input type="password" required="true" />
  <div class="place">輸入您的密碼</div>
</div>
複製代碼

.password {
  border-radius: 4px;
  color: #202124;
  font-size: 17px;
  border: 1px solid #999;
  display: inline-block;
  padding: 1px;
  position: relative;
}
.password input {
  width: 200px;
  height: 28px;
  outline: none;
  border: none;
  padding: 12px 14px;
}
.password .place {
  background-color: #fff;
  font-size: 16px;
  position: absolute;
  left: 8px;
  top: 15px;
  color: #80868b;
  transition: all 0.2s;
  pointer-events: none;
}
.password input:focus ~ .place {
  top: -10px;
}
.password input:valid ~ .place {
  top: -10px;
}
複製代碼

除了:valid，:placeholder-shown 這個選擇器也能夠實現這個效果，這個選擇器在input或textarea顯示placeholder text 的時候生效

另外一個適用場景：當輸入框的字段爲非空的時候顯示搜索按鈕

pointer-events爲none時，任何事件均可以從該容器穿透過去

4.4 :focus-visible

一個比較新的選擇器，目前只有谷歌瀏覽器支持

當元素匹配:focus僞類而且客戶端，也就是瀏覽器的啓發式引擎決定焦點應當可見時，:focus-visible僞類將生效

在input、button、textarea等元素使用鼠標點擊的時候會有焦點輪廓，通常的處理方式是設置outline: none，可是會把鍵盤訪問時出現的焦點輪廓也隱藏掉，會影響網頁的無障礙訪問

:focus-visible可讓咱們知道元素的聚焦行爲究竟是鼠標觸發仍是鍵盤觸發。因此，若是咱們但願去除鼠標點擊時候的outline輪廓，而保留鍵盤訪問時候的outline輪廓

:focus:not(:focus-visible) {
    outline: 0;
}
複製代碼

5.等高佈局

5.1 padding&margin

<div class="wrap">
    <div class="leftbox">leftBoxleftBoxleftBoxleftBoxleftBoxleftBoxleftBoxleftBoxleftBoxleftBoxleftBox</div>
    <div class="right-box">很過度很過度很過度很過度很過度</div>
</div>
複製代碼

.wrap{
    overflow: hidden;
    width: 400px;
}
.wrap div{
    float: left;
    width: 50%;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
    word-wrap: break-word;
}
.left-box{
    background-color: pink;
}
.right-box{
    background-color: #476EAF;
}
複製代碼

知識點：padding-bottom會改變元素自身的高度，同時外層盒子的高度也會跟着改變；margin-bottom不會改變元素自身的位置，能夠改變外層盒子的高度；父元素須要設置overflow: hidden

5.2 table-cell

它會做爲一個表格單元格顯示，相似於td、th，表格自己就有等高的特色

兼容性ie8+

回顧一下table-cell,能夠說是一個很神奇的屬性，爲何這麼說，它能解決不少佈局問題

一、多列文字垂直居中

二、自適應佈局

三、元素垂直居中

5.3 flex

默認值就是等高佈局，主要的兩個屬性

一、flex-direction：定義主軸方向，默認值爲row

二、align-item：定義側軸對齊方式，默認值stretch，元素拉伸以適應容器

5.4 grid

網格佈局（跟flex有點相似）

6.nofollow

nofollow 是HTML頁面中a標籤的屬性值。這個標籤的意義是告訴搜索引擎"不要追蹤此網頁上的連接或不要追蹤此特定連接"，用於網站seo優化

好比在href值爲電話號碼的時候

<a href="tel:138888888" rel="nofollow">138888888</a>
複製代碼

7.一個盒子實現三橫槓效果

<div class="lines"></div>
複製代碼

.lines{
    width: 60px;
    height: 10px;
    background-color: #000000;
    background-clip: content-box;
    padding: 10px 0;
    border-top: 10px solid;
    border-bottom: 10px solid;
}
複製代碼

知識點：background-clip，該屬性有三個值，border-box、padding-box、content-box；

border-box：背景被裁剪到邊框盒

padding-box：背景被裁剪到內邊距框

content-box：背景被裁剪到內容框

8.垂直居中之僞元素

<div class="vertical-middle">
    <span>你是豬嗎</span>
</div>
複製代碼

.vertical-middle{
    height: 400px;
    width: 100%;
    border: 1px solid red;
    font-size: 40px;
}
.vertical-middle::before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.vertical-middle span{
    background-color: #0099FF;
    font-size: 40px;
}
複製代碼

9.border-radius的8個值

border-radius:10px 10px 10px 10px/10px 10px 10px 10px;
/* x軸 上  右  下  左 / y軸 上 右 下 左
複製代碼

有一個很好用的可視化調試網站，border-radius

10.q標籤給文本添加先後引號

<q>文字文字文字</q>
複製代碼

q{
    quotes: '"' '"'
}
複製代碼

瀏覽器節點實際是添加了::before和::after這兩個僞元素

11.外部連接css中::seleection爲空會致使文本或元素沒法選中

.select::selection{}/* 連接導入css */
複製代碼

<div class="select">123456</div>
複製代碼

應該是css中的一個bug，通常不會出現這種狀況，注意一下就好

12. margin或padding百分比

當margin或padding設置百分比時，其值是相對於最近的塊級父元素的百分比，爲何呢，在css權威指南中的解釋：若是是相對於父元素的高度，其高度計算會致使死循環，子元素的高度有可能會改變父元素的高度

具體用處

讓盒子的高度等於寬度，並跟隨寬度變化

.container{
    background-color: pink;
    width: 100%;
    padding-top: 100%;
}
複製代碼

一點猜測：

元素的高度百分比是相對於父元素的height的，那麼高度爲何不會出現死循環，嘗試了一下，在父元素高度不固定的狀況下，就是其值爲auto的時候，子元素的百分比就不起所用了，高度爲0，設置min-height的時候也沒用

13.css的另外一個函數calc()

定義：calc() 函數用於動態計算長度值

用法：運算符先後都須要保留一個空格；任何長度值均可以使用calc()函數進行計算；calc()函數支持 "+", "-", "*", "/" 運算；calc()函數使用標準的數學運算優先級規則

兼容性很好，支持ie8+，主流瀏覽器基本都支持

應用比較靈活，列舉幾個比較經常使用到的地方

一、自適應佈局，好比左邊固定右邊自適應

二、在不依靠box-sizing的狀況下，設置元素的margin，達到盒子自適應寬度的做用

三、垂直或者水平居中

。。。等等等

14.clip-path

建立一個只有元素的部分區域能夠顯示的剪切區域，區域內的部分顯示，區域外的隱藏

語法就不詳細介紹了

有一個網站能夠製造不少好看的圖形，clip-path

15.自定義變量var()

基本用法：

element {
  ba-color: #fff;
}
複製代碼

做用在當前的層級，若沒有定義，則從其父元素繼承其值

使用：

element {
  background-color: var(ba-color);
}
複製代碼

主要能解決什麼問題？

一、能夠減小重複性的css

二、提升可維護性

三、網站換膚功能

......

例子：

a {
  --link: hsl(230, 60%, 50%);
  --link-visited: hsl(290, 60%, 50%);
  --link-hover: hsl(230, 80%, 60%);
  --link-active: hsl(350, 60%, 50%);
}

a:link {
  color: var(--link);
}

a:visited {
  color: var(--link-visited);
}

a:hover {
  color: var(--link-hover);
}

a:active {
  color: var(--link-active);
}
複製代碼

16.利用僞元素擴大可點擊區域

<div class="card">
    <h1>title</h1>
    <p>蚊子蚊子蚊子蚊子蚊子蚊子蚊子蚊子蚊子蚊子蚊子蚊子蚊子</p>
    <a>more</a>
</div>
複製代碼

.card{
    width: 300px;
    height: 400px;
    background-color: #000;
    color: #fff;
    padding: 20px;
    position: relative;
}
.card a{
    width: 80px;
    line-height: 40px;
    display: inline-block;
    border: 1px solid;
    padding: 0 20px;
    text-align: center;
    cursor: pointer;
}
.card a::after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
複製代碼

17.一個很友好的效果

<div class="text">
    安東尼18分 甜瓜<a>手刃火箭</a>舊主絕不手軟高效迎掌聲
    1月16日訊 NBA常規賽，開拓者客場117-107打敗火箭。
    此役，前鋒安東尼面對舊主<a>絕不手軟</a>，他10投7中，高效貢獻18分12籃板。
</div>
複製代碼

.text{
    width: 300px;
    font-size: 20px;
    line-height: 30px;
}
.text a{
    box-shadow: inset 0 -0.07em 0 #A2A9B6;
    transition: all .2s;
    cursor: pointer;
}
.text a:hover{
    box-shadow: inset 0 -0.8em 0 #A2A9B6;
}
複製代碼

18.text-align: justify實現兩端對齊

<div class="textAlign">
    <span class="list"></span>
    <span class="list"></span>
    <span class="list"></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
複製代碼

.textAlign{
    width: 800px;
    height: 200px;
    text-align: justify;
    background-color: #BBBBBB;
}
.textAlign span{
    width: 200px;
    display: inline-block;
}
.textAlign .list{
    height: 100px;
    background-color: #0099FF;
}
複製代碼

text-align對最後一行不會產生效果；因此只有在list後面添加足夠多的佔位標籤

19.經過object-fit控制圖片的顯示方式

contain

縮放以保持原比例

cover

保持原比例的同時，填滿容器，會出現被剪裁的狀況

fill

不保持原比例，填滿容器，會被拉伸

none

保持其原有的尺寸

scale-down

內容的尺寸與 none 或 contain 中的一個相同，取決於它們兩個之間誰獲得的對象尺寸會更小一些

20. css中的四個角度單位

一、deg

度，一圈是360度

二、grad

梯度，一圈是400梯度

三、rad

弧度，一圈是2π弧度

四、turn

一圈

換算公式

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad