Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS的常用单位、表格样式、字体图标及媒体查询
Blogger Information
Blog 48
fans 3
comment 1
visits 30284
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS的常用单位、表格样式、字体图标及媒体查询
吴长清
Original
473 people have browsed it

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>

效果图如下：

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post