偽類 Emmet語法 position 脫標

2021-10-02 18:59:54 字數 1937 閱讀 7586

/*首行縮排 這裡的em相對父元素的字型大小 若父元素字型大小為10px,則縮排 1 * 10px = 10px

rem 是相對於root元素*/

text-indent

: 1em;

/*用於設定元素內容在元素中的水平對齊方式

left、right、center、justify:兩端對齊,但最後一行沒有效果*/

text-align

: left;

/*行高,一行文字所佔據的高度 佔據的高度並不等於文字的高度

用於設定文字最小行高

嚴格定義:兩行文字基線(baseline)之間的間距

若只有一行文字,可以讓一行文字,在div中垂直居中*/

line-height

:

/*title只有one*/

[title = "one"]

/*title包含one*/

[tiotle *= 'one']

/*後代選擇器 選擇div元素裡面的span元素(包括直接,簡介子元素)  也適用於用類選擇器*/

div span

/*子選擇器 選擇div元素裡面的直接span元素 適用於類選擇器*/

div>span

p標籤裡不能包div動態偽類
a

:link 未訪問狀態

a:visited 已訪問過

a:hover 手指(滑鼠)放上去

a:active 手指點下去,未鬆手

:focus 游標放上去

結構->生成子代元素
div>p>span>strong

可生成>

>

>

>

strong

>

span

>

p>

div>

生成兄弟結構
h2+div+p

>

h2>

>

div>

>

p>

乘法 -> div>p*2
>

>

p>

>

p>

div>

生成內容: {}
div>div*5

>

>

你好1

div>

>

你好2

div>

>

你好3

div>

>

你好4

div>

>

你好5

div>

div>

css繼承static 靜態定位

​ 元素預設為static,按照normal flow(標準流)布局,left、right、top、bottom沒有任何作用。

relative 相對定位

​ 參照物為該元素原來的位置

.box

absolute 絕對定位

​ 參照物為父級非static元素,若父級為static則會繼續想上一級尋找。若一直為static,則會以瀏覽器視口為參照。脫離標準流

fixed 固定定位

​ 參照物直接為瀏覽器視口(viewport),會脫離標準流,其他元素會頂替他原來的位置。 當畫布滾動時,固定不動。

脫標元素的特點

脫離標準流元素和display有什麼關係

emmet語法總結

生成結構的快捷鍵 tab生成html5的結構 生成id名和類名 標籤名.類名 id名 tab 沒有標籤名.類名 tab 直接就是預設生成div 生成同級元素 標籤名 標籤名 標籤名 tab 生成子類標籤 標籤名 子標籤名 子標籤名 子標籤名 tab 標籤名 子標籤名 子標籤名 子標籤名 子標籤名 如...

Emmet語法規則

id指令 class指令 div test div id test div div.test div class test div 子節點指令 兄弟節點指令 上級節點 重複 分組 div ul li a div p 3 div ul li a href a li ul div p p p p p p...

vscode使用emmet語法

新建文件,輸入html 5 然後摁下tab鍵,即可建立如下的html5基本結構 也可以先輸入 然後摁快捷鍵tab,同樣可以快速建立html5文件 emmet語法直接簡寫,常用的簡寫規則如下 簡寫 然後使用tab鍵 描述e e代表html標籤,即直接寫標籤名 tab鍵就快速建立標籤 e id 快速建立...