search

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

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

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

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份。vw与vh用法一致

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>
  35.     <table border="1" width="600" cellpadding="0" cellspacing="0">
  36.       <caption>
  37.         学生信息表
  38.       </caption>
  39.       <thead>
  40.         <tr>
  41.           <th colspan="2">时间</th>
  42.           <th>星期一</th>
  43.           <th>星期二</th>
  44.           <th>星期三</th>
  45.           <th>星期四</th>
  46.           <th>星期五</th>
  47.         </tr>
  48.       </thead>
  49.       <tbody>
  50.         <tr>
  51.           <td colspan="7">课件操8:00~8:30</td>
  52.         </tr>
  53.         <tr>
  54.           <td rowspan="5" bgcolor="lawngreen">上午</td>
  55.           <td>第一节<br />8:30~9:10</td>
  56.           <td>语文</td>
  57.           <td>语文</td>
  58.           <td>语文</td>
  59.           <td>语文</td>
  60.           <td>数学</td>
  61.         </tr>
  62.         <tr>
  63.           <td>第二节<br />9:20~10:00</td>
  64.           <td>语文</td>
  65.           <td>语文</td>
  66.           <td>语文</td>
  67.           <td>语文</td>
  68.           <td>语文</td>
  69.         </tr>
  70.         <tr>
  71.           <td colspan="6">眼操 10:00~10:05</td>
  72.         </tr>
  73.         <tr>
  74.           <td>第三节<br />10:15~10:55</td>
  75.           <td>数学</td>
  76.           <td>数学</td>
  77.           <td>语文</td>
  78.           <td>英语</td>
  79.           <td>英语</td>
  80.         </tr>
  81.         <tr>
  82.           <td>第四节<br />11:05~11:45</td>
  83.           <td>体育</td>
  84.           <td>数学</td>
  85.           <td>语文</td>
  86.           <td>数学</td>
  87.           <td>数学</td>
  88.         </tr>
  90.         <tr>
  91.           <td colspan="7">午休时间</td>
  92.         </tr>
  93.         <tr>
  94.           <td rowspan="8" bgcolor="lawngreen">下午</td>
  95.           <td colspan="7">到校时间 13:50</td>
  96.         </tr>
  97.         <tr>
  98.           <td colspan="7">午写 13:55~14:10</td>
  99.         </tr>
  100.         <tr>
  101.           <td>第五节<br />14:15~14:555</td>
  102.           <td>思品</td>
  103.           <td>美术</td>
  104.           <td>体育</td>
  105.           <td>音乐</td>
  106.           <td>体育</td>
  107.         </tr>
  108.         <tr>
  109.           <td colspan="6">眼操 14:55~15:00</td>
  110.         </tr>
  111.         <tr>
  112.           <td>第六节<br />15:10~15:50</td>
  113.           <td>音乐</td>
  114.           <td>英语</td>
  115.           <td>思品</td>
  116.           <td>形体</td>
  117.           <td>美术</td>
  118.         </tr>
  119.         <tr>
  120.           <td>第七节<br />16:00~16:40</td>
  121.           <td>班会</td>
  122.           <td>围棋</td>
  123.           <td>象棋</td>
  124.           <td>书法</td>
  125.           <td>例会</td>
  126.         </tr>
  127.         <tr>
  128.           <td colspan="6">放学时间 16:40</td>
  129.         </tr>
  130.       </tbody>
  131.     </table>
  132. </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>
  14.     <style>
  15.       html {
  16.         width: 100vw;
  17.         height: 100vh;
  18.         font-size: 100px;
  19.       }
  20.       div > h2 {
  21.         font-size: 16px;
  22.         text-align: center;
  23.       }
  24.       .btn {
  25.         background-color: seagreen;
  26.         color: white;
  27.         border: none;
  28.         outline: none;
  29.       }
  30.       .small {
  31.         /* 小按钮 */
  32.         font-size: 0.2rem;
  33.       }
  34.       .middle {
  35.         /* 中等按钮:*/
  36.         font-size: 0.4rem;
  37.       }
  38.       .large {
  39.         /* 大按钮: */
  40.         font-size: 0.6rem;
  41.       }
  42.       /* 1000, 800 600 450  350  */
  43.       /* 大于1000 */
  44.       @media (min-width: 1000px) {
  45.         html {
  46.           font-size: 100px;
  47.         }
  48.       }
  49.       /* 大于800 小于1000 */
  50.       @media (min-width: 800px) and (max-width: 999px) {
  51.         html {
  52.           font-size: 90px;
  53.         }
  54.       }
  55.       /* 大于600 小于800 */
  56.       @media (min-width: 600px) and (max-width: 799px) {
  57.         html {
  58.           font-size: 80px;
  59.         }
  60.       }
  61.       /* 大于450 小于600 */
  62.       @media (min-width: 450px) and (max-width: 599px) {
  63.         html {
  64.           font-size: 70px;
  65.         }
  66.       }
  67.       /* 大于350 小于450 */
  68.       @media (min-width: 350px) and (max-width: 449px) {
  69.         html {
  70.           font-size: 60px;
  71.         }
  72.       }
  73.        /* 小于350 */
  74.        @media (max-width: 349px) {
  75.         html {
  76.           font-size: 50px;
  77.         }
  78.       }
  79.     </style>
  80. </body>

效果图如下：

上一条：小程序使用websocket下一条：uni-app离线打包APK教程
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多