CSS長度單比特 和 CSS響應式(媒體查詢),web前端開發面試技巧

Java精品學習 2021-09-19 15:26:37 阅读数:359

css 比特 css web 前端

px(像素), em(元素), %(百分比), ex(元素的一半), ch(數字0的寬度), rem(相對根元素的元素單比特),

vw(視口寬度), vh(視口高度), vmax(取視口寬高中較大的), vmin(取視口寬高中較小的)

其中:ch,rem,vw,vh,vmax,vmin是CSS3新增加的。

絕對長度單比特包括有:

cm, mm, q, in, pt, pc

cm(厘米), mm(毫米), q(1/4毫米), in(英寸), pt(點), pc(派卡)

注:絕對長度單比特一般不常用,只有在打印時有可能會使用。

常用長度單比特和不常用長度單比特:

常用長度單比特:PC端常用長度單比特和移動端常用長度單比特

PC端常用長度單比特:

px:pixel像素單比特,相對單比特,

em:element元素單比特,相對單比特,指相對於父元素的大小,如果父元素的字體大小是16px,默認情况下1em=16px

%:百分比單比特。

移動端常用長度單比特:

px,em,%,rem,vh,vw,vmax,vmin

  • px 相對長度單比特。像素(Pixels)。

  • em 相對長度單比特:相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置,則相對於瀏覽器的默認字體尺寸。

    即1em=16px

  • ex 相對長度單比特。相對於字符“x”的高度。通常為字體高度的一半,默認(同上)1ex=8px

  • ch 數字“0”的寬度

  • rem 相對長度單比特。相對於根元素(即html元素)font-size計算值的倍數

    _rem與em有什麼區別呢?

    區別在於使用rem為元素設定字體大小時,仍然是相對大小,但相對的只是HTML根元素。_

  • vw 相對於視口的寬度。視口被均分為100單比特的vw

    如果視口的寬度是200mm,那麼上述代碼中(font-size: 8vw;)h1元素的字號將為16mm,即(8x200)/100

    vh 相對於視口的高度。視口被均分為100單比特的vh(同上)

  • vmax 相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單比特的vmax

    h1 {font-size: 8vmax;}

    如果視口的寬度是300mm,高度是200mm,那麼上述代碼中h1元素的字號將為24mm,即(8x300)/100,因為寬度比高度要大,所以計算的時候相對於寬度。

    vmin 相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單比特的vmin

    h1 {

    font-size: 8vm;

    font-size: 8vmin;

    }

    如果視口的寬度是300mm,高度是200mm,那麼上述代碼中h1元素的字號將為16mm,即(8x200)/100,因為高度比寬度要小,所以計算的時候相對於高度。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

cm 厘米(Centimeters)。絕對長度單比特。

mm 毫米(Millimeters)。絕對長度單比特。

q 1/4毫米(quarter-millimeters)。絕對長度單比特。

in 英寸(Inches)。絕對長度單比特。

pt 點(Points)。絕對長度單比特。

react和vue的比較

相同
1)vitual dom
2)組件化
3)props,單一數據流

不同點
1)react是jsx和模板;(jsx可以進行更多的js邏輯和操作)
2)狀態管理(react)
3)對象屬性(vue)
4)vue:view——medol之間雙向綁定
5)vue:組件之間的通信(props,callback,emit)

 CodeChina開源項目:【大廠前端面試題解析+核心總結學習筆記+真實項目實戰+最新講解視頻】

CSS長度單比特 和 CSS響應式(媒體查詢),web前端開發面試技巧_程序員

CSS長度單比特 和 CSS響應式(媒體查詢),web前端開發面試技巧_前端_02

版权声明:本文为[Java精品學習]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210919152636534g.html