CSS筆記
1. 知識點
-
outline（輪廓）屬性不佔寬度和高度，效果和bodrder類似，其位置是在border外圍。
-
隱藏元素 - display:none或visibility:hidden:
- visibility:hidden可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。
- display:none可以隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失。
-
塊(block)和內聯(inline)元素(ps: 通過display屬性更改元素爲塊元素或是內聯元素):
- 塊元素是一個元素，佔用了全部寬度，在前後都是換行符。例如
<h1>、<p>、<div> - 內聯元素只需要必要的寬度，不強制換行。例如
<span>、<a>
- 塊元素是一個元素，佔用了全部寬度，在前後都是換行符。例如
-
CSS中塊級、內聯元素的應用：
利用CSS我們可以擺脫上面表格裏HTML標籤歸類的限制，自由地在不同標籤/元素上應用我們需要的屬性。
主要用的CSS樣式有以下三個：
1. display:block – 顯示爲塊級元素
2. display:inline – 顯示爲內聯元素
3. display:inline-block – 顯示爲內聯塊元素，表現爲同行顯示並可修改寬高內外邊距 等屬性
我們常將<ul>元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了。 -
單位em和rem的區別
-
px是固定的像素，一旦設置了就無法因爲適應頁面大小而改變。
-
em和rem的區別：**em相對於父元素，rem相對於根元素。**rem中的r意思是root（根源）。
-
em
- 子元素字體大小的em是相對於父元素字體大小
- 元素的width/height/padding/margin用em的話是相對於該元素的font-size
-
rem
rem是全部的長度都相對於根元素，根元素是誰？元素。通常做法是給html元素設置一個字體大小，然後其他元素的長度單位就爲rem。
-
-
2. 選擇器
- 分組選擇器
- 具有相同樣式的元素使用
,分隔h1,h2,p { color:green; }
- 具有相同樣式的元素使用
- 嵌套選擇器
p{ }: 爲所有 p 元素指定一個樣式。.marked{ }: 爲所有 class=“marked” 的元素指定一個樣式。.marked p{ }: 爲所有 class=“marked” 元素內的 p 元素指定一個樣式。p.marked{ }: 爲所有 class=“marked” 的 p 元素指定一個樣式。
- 組合選擇器
- 後代選擇器(以空格分隔–’ ')
- 子元素選擇器(以大於號分隔–’>’）
- 相鄰兄弟選擇器（以加號分隔–’+’）
- 普通兄弟選擇器（以破折號分隔–’~’）
- 僞類： 例如
:visited - 僞元素： 例如
:first-letter - 屬性選擇器
3. position定位
- static 定位：HTML元素的默認值，即沒有定位，元素出現在正常的流中。靜態定位的元素不會受到 top, bottom, left, right影響。
- fix 定位： 元素的位置相對於瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動。
- relative 定位： 相對定位元素的定位是相對其正常位置。移動相對定位元素，但它原本所佔的空間不會改變。相對定位元素經常被用來作爲絕對定位元素的容器塊。
- absolute 定位： 絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於
<html>。absolute 定位使元素的位置與文檔流無關，因此不佔據空間。absolute 定位的元素和其他元素重疊。 - sticky 定位： 它的行爲就像
position:relative;而當頁面滾動超出目標區域時，它的表現就像position:fixed;，它會固定在目標位置。元素定位表現爲在跨越特定閾值前爲相對定位，之後爲固定定位。這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，纔可使粘性定位生效。否則其行爲與相對定位相同。 - 重疊元素： 元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素。
z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或後面）。一個元素可以有正數或負數的堆疊順序.具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。注意： 如果兩個定位元素重疊，沒有指定z - index，最後定位在HTML代碼中的元素將被顯示在最前面。