前端之css之單位

2021-08-10 11:13:45 字數 673 閱讀 3832

1.百分比

預設元素高度設定為100%,以自身高度為準,如果父元素設定寬度,子元素寬度為父元素寬度。
2.rem

rem相對於html元素的font-size屬性的大小而變化,需要由js**動態控制。
3.vh,vw

vw 可視區域的寬度,總寬度為100vw

vh 可是區域的高度,總高度為100vh

4.calc

calc計算 例如:calc(50vw - 50px);

注:()中運算子兩邊有空格,否則無法計算

5.ch

相對於數字0的大小,1ch=1個英文=1個數字,2ch=1個中文

例如:width:5ch;就等於5個0的寬度

6.min,max

min-width 最小寬度

max-width 最大寬度,例如文字+,當文字過短時設定,該區域最大寬度

7.0,none

border:0;

border:none;

0,none 都是取消邊框,最大的區別是0會渲染,而none是不渲染,盡量使用none,而不是0

CSS之EM相對單位

之前以為em單位只是在font size中起到繼承作用,後來慢慢覺得,繼承,應該是在幾乎所有樣式中都可以是實現的,比如height,width,border.今天才簡單測試了下,果真是可以實現,不過,只是要基於font size的一併出現而已!也就是說,想height等樣式也應用上em的繼承相對大小...

前端學習之css

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

前端小白之css

css 選擇器 1.類選擇器 class 2.標籤選擇器 div 3.層級選擇器 div p 4.id選擇器 和類選擇器類似 id 5.組選擇器 box1,box2 6.偽類選擇器 滑鼠懸浮特效和前後增加內容 calss hover class before css 三種鏈結寫法 1.行內式 直接s...