一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

搜索
分享

height:100vh

 __天眼__ 2019-09-24

1.em

在做手機端的時候經(jīng)常會用到的做字體的尺寸單位

說白了 em就相當于“倍”，比如設(shè)置當前的div的字體大小為1.5em，則當前的div的字體大小為：當前div繼承的字體大小*1.5

但是當div進行嵌套的時候，em始終是按照當前div繼承的字體大小來縮放，參照后面的例子。

2.rem

這里的r就是root的意思，意思是相對于根節(jié)點來進行縮放，當有嵌套關(guān)系的時候，嵌套關(guān)系的元素的字體大小始終按照根節(jié)點的字體大小進行縮放。

參照后面給的demo

3.vh

vh就是當前屏幕可見高度的1%，也就是說

height:100vh == height:100%;

但是有個好處是當元素沒有內(nèi)容時候，設(shè)置height:100%該元素不會被撐開，

但是設(shè)置height:100vh，該元素會被撐開屏幕高度一致。

4.vw

vw就是當前屏幕寬度的1%

補充一句，當設(shè)置width:100%，被設(shè)置元素的寬度是按照父元素的寬度來設(shè)置，

但是100vw是相對于屏幕可見寬度來設(shè)置的，所以會出現(xiàn)50vw 比50%大的情況

  1. <!DOCTYPE html>
  2. <html lang="Zh-cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>恭賀新春</title>
  6. </head>
  7. <style type="text/css" media="screen">
  8. html{
  9. font-size: 14px;
  10. }
  11. .em,
  12. .em > .em-son,
  13. .em > .em-son > .em-grandson {
  14. font-size: 1.2em;
  15. }
  16. .rem,
  17. .rem > .rem-son,
  18. .rem > .rem-son > .rem-grandson {
  19. font-size: 1.2rem;
  20. }
  21. .rem-box {
  22. background: #d60b3b;
  23. width:10rem;
  24. height: 10rem;
  25. color: #fff;
  26. text-align: center;
  27. line-height:5rem;
  28. }
  29. .vhvw-box {
  30. background: #d60b3b;
  31. width:50vw;
  32. height: 50vh;
  33. color: #fff;
  34. text-align: center;
  35. line-height:25vh;
  36. }
  37. </style>
  38. <body>
  39. <h1>em 繼承父元素的字體大小，來變大或變小，多層嵌套字體變化</h1>
  40. <div class="em">
  41. 字體大小 1.2 * 14（父元素body） = 16px
  42. <div class="em-son">
  43. 字體大小 1.2 * 16(父元素em) = 20px
  44. <div class="em-grandson">
  45. 字體大小 1.2 * 20(父元素em-son) = 24px
  46. </div>
  47. </div>
  48. </div>
  49. <br>
  50. <h1>rem 繼承根節(jié)點元素的字體大小，來變大或變小，多層嵌套字體不變化</h1>
  51. <div class="rem">
  52. 字體大小 1.2 * 14（根節(jié)點html） = 16px
  53. <div class="rem-son">
  54. 字體大小 1.2 * 14（根節(jié)點html） = 16px
  55. <div class="rem-grandson">
  56. 字體大小 1.2 * 14（根節(jié)點html） = 16px
  57. </div>
  58. </div>
  59. </div>
  60. <br>
  61. <h1>rem 也可作為固定長度單位設(shè)置寬高等</h1>
  62. <div class="rem-box">
  63. 寬：14 * 10 = 140px<br>
  64. 高：14 * 10 = 140px
  65. </div>
  66. <br>
  67. <h1>vh,vw 屏幕可見區(qū)域的高度，寬度的1%</h1>
  68. <div class="vhvw-box">
  69. 寬：屏幕寬度的50%<br>
  70. 高：屏幕高度的50%
  71. </div>
  72. </body>
  73. </html>

  1. <!DOCTYPE html>
  2. <html lang="Zh-cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>恭賀新春</title>
  6. </head>
  7. <style type="text/css" media="screen">
  8. html{
  9. font-size: 14px;
  10. }
  11. .em,
  12. .em > .em-son,
  13. .em > .em-son > .em-grandson {
  14. font-size: 1.2em;
  15. }
  16. .rem,
  17. .rem > .rem-son,
  18. .rem > .rem-son > .rem-grandson {
  19. font-size: 1.2rem;
  20. }
  21. .rem-box {
  22. background: #d60b3b;
  23. width:10rem;
  24. height: 10rem;
  25. color: #fff;
  26. text-align: center;
  27. line-height:5rem;
  28. }
  29. .vhvw-box {
  30. background: #d60b3b;
  31. width:50vw;
  32. height: 50vh;
  33. color: #fff;
  34. text-align: center;
  35. line-height:25vh;
  36. }
  37. </style>
  38. <body>
  39. <h1>em 繼承父元素的字體大小，來變大或變小，多層嵌套字體變化</h1>
  40. <div class="em">
  41. 字體大小 1.2 * 14（父元素body） = 16px
  42. <div class="em-son">
  43. 字體大小 1.2 * 16(父元素em) = 20px
  44. <div class="em-grandson">
  45. 字體大小 1.2 * 20(父元素em-son) = 24px
  46. </div>
  47. </div>
  48. </div>
  49. <br>
  50. <h1>rem 繼承根節(jié)點元素的字體大小，來變大或變小，多層嵌套字體不變化</h1>
  51. <div class="rem">
  52. 字體大小 1.2 * 14（根節(jié)點html） = 16px
  53. <div class="rem-son">
  54. 字體大小 1.2 * 14（根節(jié)點html） = 16px
  55. <div class="rem-grandson">
  56. 字體大小 1.2 * 14（根節(jié)點html） = 16px
  57. </div>
  58. </div>
  59. </div>
  60. <br>
  61. <h1>rem 也可作為固定長度單位設(shè)置寬高等</h1>
  62. <div class="rem-box">
  63. 寬：14 * 10 = 140px<br>
  64. 高：14 * 10 = 140px
  65. </div>
  66. <br>
  67. <h1>vh,vw 屏幕可見區(qū)域的高度，寬度的1%</h1>
  68. <div class="vhvw-box">
  69. 寬：屏幕寬度的50%<br>
  70. 高：屏幕高度的50%
  71. </div>
  72. </body>
  73. </html>

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    午夜传媒视频免费在线观看| 久久婷婷综合色拍亚洲| 91精品视频免费播放| 蜜桃传媒视频麻豆第一区| 深夜视频成人在线观看| 欧美亚洲综合另类色妞| 亚洲成人黄色一级大片| 一区二区福利在线视频| 美国女大兵激情豪放视频播放| 一本久道久久综合中文字幕| 国产成人精品午夜福利| 欧美日韩亚洲国产精品| 日韩精品在线观看完整版| 精品国产亚洲免费91| 国内精品美女福利av在线| 国产一区二区三区丝袜不卡| 欧美成人免费视频午夜色| 午夜成年人黄片免费观看| 深夜视频在线观看免费你懂| 丰满少妇高潮一区二区| 亚洲另类女同一二三区| 欧美成人一区二区三区在线| 欧美丝袜诱惑一区二区| 国产精品午夜小视频观看| 好吊日成人免费视频公开| 久久综合日韩精品免费观看| 国产香蕉国产精品偷在线观看 | 自拍偷拍福利视频在线观看| 亚洲天堂有码中文字幕视频| 精品国产91亚洲一区二区三区| 免费在线播放一区二区| 日韩欧美国产精品中文字幕| 久久综合九色综合欧美| 久久99一本色道亚洲精品| 九九热这里有精品20| 午夜福利精品视频视频| 亚洲第一香蕉视频在线| 亚洲综合色在线视频香蕉视频| 欧美一区二区三区不卡高清视| 国产日本欧美韩国在线| 欧美成人免费一级特黄|