前端之CSS(二)

2022-04-02 22:25:40 字數 1200 閱讀 7562

v_hint:content = width x height1、content

2、border

風格解釋

solid

實線dashed

虛線dotted

點狀線double

雙實線groove

槽狀線ridge

脊線inset

內嵌效果線

outset

外凸效果線

v_hint:border滿足整體設定語法,eg:border: 1px solid red;

3、padding

值得個數方位1

上下左右

2上下 | 左右

3上 | 左右 | 下

4上 | 右 | 下 | 左

4、margin

賦值個數方位1

上下左右

2上下 | 左右

3上 | 左右 | 下

4上 | 右 | 下 | 左

border-radius

成員解釋

border-top-left-radius

左上 方位

border-top-right-radius

右上 方位

border-bottom-left-radius

左下 方位

border-bottom-right-radius

右下 方位

賦值個數(值型別:長度 | 百分比)解釋1

橫縱2橫 | 縱

賦值個數(值型別:長度 | 百分比)解釋1

左上 右上 左下 右下

2左上 右下 | 右上 左下

3左上 | 右上 左下 | 右下

4左上 | 右上 | 右下 | 左下

格式解釋

1 / 1

橫向 | 縱向值描述

visible

預設值。內容不會被修剪,會呈現在元素框之外。

hidden

內容會被修剪,並且其餘內容是不可見的。

scroll

內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。

auto

如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。

inherit

規定應該從父元素繼承 overflow 屬性的值。值描述

inline

內聯block

塊級inline-block

內聯塊

前端筆記(CSS二)

1 emmet 語法 emmet語法的前身是zen coding,它使用縮排,來提高html css的編寫速度,vscode內部已經整合該語法。1 快速生成html結構語法 2 快速生成css樣式語法 1.1快速生成html結構語法 1 生成標籤直接輸入標籤名 按tab鍵即可 比如 div 然後ta...

前端之css之單位

1.百分比 預設元素高度設定為100 以自身高度為準,如果父元素設定寬度,子元素寬度為父元素寬度。2.rem rem相對於html元素的font size屬性的大小而變化,需要由js 動態控制。3.vh,vw vw 可視區域的寬度,總寬度為100vw vh 可是區域的高度,總高度為100vh4.ca...

前端學習之css

1.html中的三種布局格式 a.標準流 網頁中預設的方式 b.浮動 c.定位 2.html的兩大元素 a.塊級元素 獨佔一行 div h1 h6 table p 有序無序列表 ol ul li 等等 b.內聯元素 和相鄰的內聯元素在同一行 a span image input 等等 文字1文字2 ...