資訊專(zhuān)欄INFORMATION COLUMN
摘要：絕對(duì)長(zhǎng)度單位視輸出介質(zhì)而定，不依賴(lài)于環(huán)境顯示器分辨率操作系統(tǒng)等。個(gè)人靜態(tài)博客氣泡的前端日記
文章大綱來(lái)源：【Day 5】CSS 高級(jí)
CSS 選擇器
CSS 拓展
CSS 單位
CSS 參考手冊(cè)
CSS 選擇器內(nèi)容引用：CSS 選擇器
元素選擇器html { ... }
選擇器分組
h2, p { ... }
類(lèi)選擇器
.important { ... }
p.warning { ... }
.important.warning { ... }
/* 選擇同時(shí)擁有這兩個(gè)類(lèi)名的元素 */
ID選擇器
#intro { ... }
屬性選擇器
a[href] { ... }
a[href][title] { ... }
a[href="..."] { ... }
p[class="important warning"] { ... }
/* 完全匹配的屬性?xún)?nèi)容 */
p[class~="important"] { ... }
/* 部分匹配的屬性?xún)?nèi)容 */
后代選擇器
h1 em { ... }
子元素選擇器
h1 > strong { ... }
相鄰兄弟選擇器
h1 + p { ... }
偽類(lèi)
CSS 偽類(lèi)用于向某些選擇器添加特殊的效果。
語(yǔ)法是selector : pseudo-class {property: value}。
a:link { color: #FF0000 } /* 未訪問(wèn)的鏈接 */
a:visited { color: #00FF00 } /* 已訪問(wèn)的鏈接 */
a:hover { color: #FF00FF } /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active { color: #0000FF } /* 選定的鏈接 */
p:first-child { font-weight: bold; }
CSS 拓展
內(nèi)容引用：CSS 高級(jí)
水平對(duì)齊使用margin:auto水平對(duì)齊
margin-left:auto; margin-right:auto;
使用position左或右對(duì)齊
position:absolute; right:0px;
使用float左或右對(duì)齊
float:right;尺寸
height：元素高度
width：元素寬度
line-height：行高
max-height：最大高度
max-width：最大寬度
min-height：最小高度
min-width：最小寬度
CSS 單位內(nèi)容引用：CSS 單位
相對(duì)長(zhǎng)度指定了一個(gè)長(zhǎng)度相對(duì)于另一個(gè)長(zhǎng)度的屬性，對(duì)于不同的設(shè)備相對(duì)長(zhǎng)度更適用。
em：相對(duì)于應(yīng)用在當(dāng)前元素的字體尺寸，一般瀏覽器字體大小默認(rèn)為16px，則2em == 32px
ex：依賴(lài)于英文子母小 x 的高度
ch：數(shù)字 0 的寬度
rem：根元素（html）的 font-size
vw：viewpoint width，視窗寬度，1vw=視窗寬度的1%
vh：viewpoint height，視窗高度，1vh=視窗高度的1%
絕對(duì)長(zhǎng)度絕對(duì)長(zhǎng)度單位是一個(gè)固定的值，它反應(yīng)一個(gè)真實(shí)的物理尺寸。
絕對(duì)長(zhǎng)度單位視輸出介質(zhì)而定，不依賴(lài)于環(huán)境（顯示器、分辨率、操作系統(tǒng)等）。
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 參考手冊(cè)使用時(shí)如果有疑問(wèn)可以隨時(shí)查看【CSS 參考手冊(cè)】。
個(gè)人靜態(tài)博客：
氣泡的前端日記： https://rheabubbles.github.io
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117346.html
摘要：派生選擇器依據(jù)元素的位置關(guān)系來(lái)定義樣式。稱(chēng)其為上下文選擇器，稱(chēng)其為派生選擇器。在現(xiàn)在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。 文章大綱來(lái)源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ) 初識(shí)CSS 入門(mén)CSS 初識(shí)CSS 層疊樣式表（Cascading Style Sheets），即前端常說(shuō)的CSS。 內(nèi)容引用：CSS 簡(jiǎn)介 樣式解決了什么問(wèn)題？ HTML...
摘要：派生選擇器依據(jù)元素的位置關(guān)系來(lái)定義樣式。稱(chēng)其為上下文選擇器，稱(chēng)其為派生選擇器。在現(xiàn)在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。 文章大綱來(lái)源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ) 初識(shí)CSS 入門(mén)CSS 初識(shí)CSS 層疊樣式表（Cascading Style Sheets），即前端常說(shuō)的CSS。 內(nèi)容引用：CSS 簡(jiǎn)介 樣式解決了什么問(wèn)題？ HTML...
摘要：元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。簡(jiǎn)單來(lái)說(shuō)就是，元素不再占用任何文檔流的空間，只剩下相對(duì)于包含塊的定位顯示。行框和清理浮動(dòng)框旁邊的行框會(huì)被縮短，使行框圍繞浮動(dòng)框，所以創(chuàng)建浮動(dòng)框可以使文本圍繞圖像。 文章大綱來(lái)源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ) CSS框模型 寬度和高度 內(nèi)邊距 外邊距 CSS定位 浮動(dòng) CSS框模型 內(nèi)容引用：CSS 框模型概述 CSS 框模...
摘要：元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。簡(jiǎn)單來(lái)說(shuō)就是，元素不再占用任何文檔流的空間，只剩下相對(duì)于包含塊的定位顯示。行框和清理浮動(dòng)框旁邊的行框會(huì)被縮短，使行框圍繞浮動(dòng)框，所以創(chuàng)建浮動(dòng)框可以使文本圍繞圖像。 文章大綱來(lái)源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ) CSS框模型 寬度和高度 內(nèi)邊距 外邊距 CSS定位 浮動(dòng) CSS框模型 內(nèi)容引用：CSS 框模型概述 CSS 框模...
Web前端開(kāi)發(fā)是創(chuàng)建Web頁(yè)面或app等前端界面呈現(xiàn)給用戶(hù)的過(guò)程。第一階段：前端基礎(chǔ)（HTML / CSS / JavaScript / jQuery）初識(shí)HTML+CSS【學(xué)習(xí)筆記】HTML基礎(chǔ)完結(jié)篇html基礎(chǔ)知識(shí)——標(biāo)簽詳解html基礎(chǔ)知識(shí)——與用戶(hù)交互!（表單標(biāo)簽）html基礎(chǔ)知識(shí)——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個(gè)概念純HTM...
閱讀 2500·2021-11-16 11:45
閱讀 2478·2021-10-11 10:59
閱讀 2284·2021-10-08 10:05
閱讀 3909·2021-09-23 11:30
閱讀 2401·2021-09-07 09:58
閱讀 870·2019-08-30 15:55
閱讀 797·2019-08-30 15:53
閱讀 1945·2019-08-29 17:00
