文章大綱來源：【Day 5】CSS 高級

• CSS 選擇器
• CSS 拓展
• CSS 單位
• CSS 參考手冊

CSS 選擇器

內容引用：CSS 選擇器

元素選擇器

html { ... } 復制代碼

選擇器分組

h2, p { ... } 復制代碼

類選擇器

.important { ... } p.warning { ... } .important.warning { ... } /* 選擇同時擁有這兩個類名的元素 */復制代碼

ID選擇器

#intro { ... } 復制代碼

屬性選擇器

a[href] { ... } a[href][title] { ... } a[href="..."] { ... } p[class="important warning"] { ... } /* 完全匹配的屬性內容 */ p[class~="important"] { ... } /* 部分匹配的屬性內容 */ 復制代碼

后代選擇器

h1 em { ... } 復制代碼

子元素選擇器

h1 > strong { ... } 復制代碼

相鄰兄弟選擇器

h1 + p { ... } 復制代碼

偽類

CSS 偽類用于向某些選擇器添加特殊的效果。

語法是selector : pseudo-class {property: value}。

a:link { color: #FF0000 } /* 未訪問的鏈接 */ a:visited { color: #00FF00 } /* 已訪問的鏈接 */ a:hover { color: #FF00FF } /* 鼠標移動到鏈接上 */ a:active { color: #0000FF } /* 選定的鏈接 */ p:first-child { font-weight: bold; } 復制代碼

CSS 拓展

內容引用：CSS 高級

水平對齊

• 使用margin:auto水平對齊

margin-left:auto; margin-right:auto; 復制代碼

• 使用position左或右對齊

position:absolute; right:0px; 復制代碼

• 使用float左或右對齊

float:right; 復制代碼

尺寸

• height：元素高度
• width：元素寬度
• line-height：行高
• max-height：最大高度
• max-width：最大寬度
• min-height：最小高度
• min-width：最小寬度

CSS 單位

內容引用：CSS 單位

相對長度

指定了一個長度相對于另一個長度的屬性，對于不同的設備相對長度更適用。

• em：相對于應用在當前元素的字體尺寸，一般瀏覽器字體大小默認為16px，則2em == 32px
• ex：依賴于英文子母小 x 的高度
• ch：數字 0 的寬度
• rem：根元素（html）的 font-size
• vw：viewpoint width，視窗寬度，1vw=視窗寬度的1%
• vh：viewpoint height，視窗高度，1vh=視窗高度的1%

絕對長度

絕對長度單位是一個固定的值，它反應一個真實的物理尺寸。

絕對長度單位視輸出介質而定，不依賴于環境（顯示器、分辨率、操作系統等）。

• cm：厘米
• mm：毫米
• in：英寸(1in = 96px = 2.54cm)
• px：像素 (1px = 1/96th of 1in)
• pt：point，大約1/72英寸； (1pt = 1/72in)
• pc：pica，大約6pt，1/6英寸； (1pc = 12 pt)

CSS 參考手冊

使用時如果有疑問可以隨時查看【CSS 參考手冊】。

---

個人靜態博客：

• 氣泡的前端日記： rheabubbles.github.io

轉載于:https://juejin.im/post/5c643139e51d457fa31e4c55

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的前端菜鸟笔记 Day-5 CSS 高级的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。