博客列表 >CSS的常用单位、表格样式、字体图标及媒体查询

CSS的常用单位、表格样式、字体图标及媒体查询

吴长清
吴长清原创
2022年07月11日 16:53:30470浏览

1.常用单位

1.1绝对单位

绝对单位像素,用px表示,1in(英寸)=96px(像素)

1.2相对单位

类型 描述
% 参照物是父级,如:width='50%'则表示,当前元素的宽度占父级元素的百分之五十
em 字号大小,参照浏览器默认字号16px(浏览器中最小默认字号一般为12px);是一个变量,受当前或父级或祖先元素的影响
rem 字号大小,与em概念基本一致,不过它总是以根元素<html>字号为参照物,相比em,推荐使用rem
vw view-width可视化窗口宽度,眼睛能看到的窗口大小,简称:视口:view-port
vh view-height可视化窗口高度,如:根元素height=100vh,当前元素:height=50vh则表示将根元素可视化窗口高度分为100份,那么当前元素的高度占根元素高度的50份,无论怎么改变根元素的可视化窗口高度,当前元素始终占根元素高度的50份。vwvh用法一致

2.表格样式

  1. <body>
  2. <style>
  3. :root{
  4. /* 将可视化窗口分为100份 */
  5. width: 100vw;
  6. height: 100vh;
  7. /* 设置字号大小 */
  8. font-size: 18px;
  9. }
  10. table{
  11. /* 块级(表格)元素居中 */
  12. margin: auto;
  13. /* 设置表格宽度和高度 */
  14. width: 90vw;
  15. height: 50vh;
  16. /* 设置表格边框 */
  17. border: 1px solid lightgrey;
  18. }
  19. td {
  20. /* 文字居中 */
  21. text-align: center;
  22. }
  23. caption {
  24. /* 设置标题大小, 两倍根元素字号大小*/
  25. font-size: 2rem;
  26. /* 设置标题与表格的外边距 */
  27. margin-bottom: 5px;
  28. }
  29. th{
  30. /* 设置表格表头背景色 */
  31. background-color: antiquewhite;
  32. }
  33. </style>
  34. <table border="1" width="600" cellpadding="0" cellspacing="0">
  35. <caption>
  36. 学生信息表
  37. </caption>
  38. <thead>
  39. <tr>
  40. <th colspan="2">时间</th>
  41. <th>星期一</th>
  42. <th>星期二</th>
  43. <th>星期三</th>
  44. <th>星期四</th>
  45. <th>星期五</th>
  46. </tr>
  47. </thead>
  48. <tbody>
  49. <tr>
  50. <td colspan="7">课件操8:00~8:30</td>
  51. </tr>
  52. <tr>
  53. <td rowspan="5" bgcolor="lawngreen">上午</td>
  54. <td>第一节<br />8:30~9:10</td>
  55. <td>语文</td>
  56. <td>语文</td>
  57. <td>语文</td>
  58. <td>语文</td>
  59. <td>数学</td>
  60. </tr>
  61. <tr>
  62. <td>第二节<br />9:20~10:00</td>
  63. <td>语文</td>
  64. <td>语文</td>
  65. <td>语文</td>
  66. <td>语文</td>
  67. <td>语文</td>
  68. </tr>
  69. <tr>
  70. <td colspan="6">眼操 10:00~10:05</td>
  71. </tr>
  72. <tr>
  73. <td>第三节<br />10:15~10:55</td>
  74. <td>数学</td>
  75. <td>数学</td>
  76. <td>语文</td>
  77. <td>英语</td>
  78. <td>英语</td>
  79. </tr>
  80. <tr>
  81. <td>第四节<br />11:05~11:45</td>
  82. <td>体育</td>
  83. <td>数学</td>
  84. <td>语文</td>
  85. <td>数学</td>
  86. <td>数学</td>
  87. </tr>
  88. <tr>
  89. <td colspan="7">午休时间</td>
  90. </tr>
  91. <tr>
  92. <td rowspan="8" bgcolor="lawngreen">下午</td>
  93. <td colspan="7">到校时间 13:50</td>
  94. </tr>
  95. <tr>
  96. <td colspan="7">午写 13:55~14:10</td>
  97. </tr>
  98. <tr>
  99. <td>第五节<br />14:15~14:555</td>
  100. <td>思品</td>
  101. <td>美术</td>
  102. <td>体育</td>
  103. <td>音乐</td>
  104. <td>体育</td>
  105. </tr>
  106. <tr>
  107. <td colspan="6">眼操 14:55~15:00</td>
  108. </tr>
  109. <tr>
  110. <td>第六节<br />15:10~15:50</td>
  111. <td>音乐</td>
  112. <td>英语</td>
  113. <td>思品</td>
  114. <td>形体</td>
  115. <td>美术</td>
  116. </tr>
  117. <tr>
  118. <td>第七节<br />16:00~16:40</td>
  119. <td>班会</td>
  120. <td>围棋</td>
  121. <td>象棋</td>
  122. <td>书法</td>
  123. <td>例会</td>
  124. </tr>
  125. <tr>
  126. <td colspan="6">放学时间 16:40</td>
  127. </tr>
  128. </tbody>
  129. </table>
  130. </body>

3.字体图标

使用阿里巴巴矢量图标库,https://www.iconfont.cn/

使用方法:
1.到阿里巴巴矢量图标库官方下载你想要的图标
2.将下载的图标导入项目中
3.使用<link>引入外部样式,即下载的图标CSS库

  1. <!-- 1. 引入字体图标库 -->
  2. <link rel="stylesheet" href="fontIcon/iconfont.css" />
  3. <!-- 2. 引入图标类class -->
  4. <span class="iconfont icon-jingdong myicon"></span>
  5. <hr />
  6. <span class="iconfont icon-jingdong1 myicon"></span>
  7. <!-- 3.为图标设置自定义样式 -->
  8. <style>
  9. .myicon {
  10. font-size: 100px;
  11. color: red;
  12. border: 1px solid blue;
  13. background-color: aqua;
  14. }
  15. </style>

4.运行,效果如下:

4.媒体查询

媒体查询是响应式/移动端布局的基础,只需要改动跟元素字号,就可以实现动态页面元素的大小

4.1移动优先:从最小屏幕进行适配

  1. <button class="btn small">Btn1</button>
  2. <button class="btn middle">Btn2</button>
  3. <button class="btn large">Btn3</button>
  4. <style>
  5. html {
  6. /* 设置根字号 */
  7. /* 为了计算方便: 把根字号设置为 10px */
  8. font-size: 10px;
  9. }
  10. .btn {
  11. background-color: seagreen;
  12. color: white;
  13. border: none;
  14. outline: none;
  15. }
  16. .btn:hover {
  17. cursor: pointer;
  18. opacity: 0.8;
  19. transition: 0.3s;
  20. }
  21. .small {
  22. /* 小按钮 */
  23. font-size: 1.2rem;
  24. }
  25. .middle {
  26. /* 中等按钮: 16px; */
  27. font-size: 1.6rem;
  28. }
  29. .large {
  30. /* 大按钮: 20px */
  31. font-size: 2rem;
  32. }
  33. /* 断点: 375, 414, 600 , 由小到大 */
  34. /* < 374px */
  35. @media (max-width: 374px) {
  36. html {
  37. font-size: 12px;
  38. }
  39. }
  40. /* 375px < width < 414px */
  41. @media (min-width: 375px) and (max-width: 413px) {
  42. html {
  43. font-size: 14px;
  44. }
  45. }
  46. /* > 414px */
  47. @media (min-width: 414px) {
  48. html {
  49. font-size: 16px;
  50. }
  51. }
  52. @media (min-width: 600px) {
  53. html {
  54. font-size: 18px;
  55. }
  56. }
  57. </style>

效果图如下:

4.2 PC优先:从最大屏幕进行适配

  1. <body>
  2. <div>
  3. <h2>媒体查询 先从最大屏的设备进行适配</h2>
  4. </div>
  5. <hr />
  6. <div>
  7. <button class="btn small">小按钮</button>
  8. <hr />
  9. <button class="btn middle">中按钮</button>
  10. <hr />
  11. <button class="btn large">大按钮</button>
  12. </div>
  13. <style>
  14. html {
  15. width: 100vw;
  16. height: 100vh;
  17. font-size: 100px;
  18. }
  19. div > h2 {
  20. font-size: 16px;
  21. text-align: center;
  22. }
  23. .btn {
  24. background-color: seagreen;
  25. color: white;
  26. border: none;
  27. outline: none;
  28. }
  29. .small {
  30. /* 小按钮 */
  31. font-size: 0.2rem;
  32. }
  33. .middle {
  34. /* 中等按钮:*/
  35. font-size: 0.4rem;
  36. }
  37. .large {
  38. /* 大按钮: */
  39. font-size: 0.6rem;
  40. }
  41. /* 1000, 800 600 450 350 */
  42. /* 大于1000 */
  43. @media (min-width: 1000px) {
  44. html {
  45. font-size: 100px;
  46. }
  47. }
  48. /* 大于800 小于1000 */
  49. @media (min-width: 800px) and (max-width: 999px) {
  50. html {
  51. font-size: 90px;
  52. }
  53. }
  54. /* 大于600 小于800 */
  55. @media (min-width: 600px) and (max-width: 799px) {
  56. html {
  57. font-size: 80px;
  58. }
  59. }
  60. /* 大于450 小于600 */
  61. @media (min-width: 450px) and (max-width: 599px) {
  62. html {
  63. font-size: 70px;
  64. }
  65. }
  66. /* 大于350 小于450 */
  67. @media (min-width: 350px) and (max-width: 449px) {
  68. html {
  69. font-size: 60px;
  70. }
  71. }
  72. /* 小于350 */
  73. @media (max-width: 349px) {
  74. html {
  75. font-size: 50px;
  76. }
  77. }
  78. </style>
  79. </body>

效果图如下:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议