CSS的常用单位、表格样式、字体图标及媒体查询 - 大前端学习

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

博主信息

博文 48

粉丝 3

访问量 45974

专题推荐

更多>

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.表格样式

<body>
    <style>
      :root{
        /* 将可视化窗口分为100份 */
        width: 100vw;
        height: 100vh;
        /* 设置字号大小 */
        font-size: 18px;
      }
      table{
        /* 块级(表格)元素居中 */
        margin: auto;
        /* 设置表格宽度和高度 */
        width: 90vw;
        height: 50vh;
        /* 设置表格边框 */
        border: 1px solid lightgrey;
      }
      td {
        /* 文字居中 */
        text-align: center;
      }
      caption {
        /* 设置标题大小, 两倍根元素字号大小*/
        font-size: 2rem;
        /* 设置标题与表格的外边距 */
        margin-bottom: 5px;
      }
      th{
        /* 设置表格表头背景色 */
        background-color: antiquewhite;
      }
    </style>
    <table border="1" width="600" cellpadding="0" cellspacing="0">
      <caption>
        学生信息表
      </caption>
      <thead>
        <tr>
          <th colspan="2">时间</th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
          <th>星期四</th>
          <th>星期五</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="7">课件操8:00~8:30</td>
        </tr>
        <tr>
          <td rowspan="5" bgcolor="lawngreen">上午</td>
          <td>第一节<br />8:30~9:10</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>数学</td>
        </tr>
        <tr>
          <td>第二节<br />9:20~10:00</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
          <td>语文</td>
        </tr>
        <tr>
          <td colspan="6">眼操 10:00~10:05</td>
        </tr>
        <tr>
          <td>第三节<br />10:15~10:55</td>
          <td>数学</td>
          <td>数学</td>
          <td>语文</td>
          <td>英语</td>
          <td>英语</td>
        </tr>
        <tr>
          <td>第四节<br />11:05~11:45</td>
          <td>体育</td>
          <td>数学</td>
          <td>语文</td>
          <td>数学</td>
          <td>数学</td>
        </tr>
        <tr>
          <td colspan="7">午休时间</td>
        </tr>
        <tr>
          <td rowspan="8" bgcolor="lawngreen">下午</td>
          <td colspan="7">到校时间 13:50</td>
        </tr>
        <tr>
          <td colspan="7">午写 13:55~14:10</td>
        </tr>
        <tr>
          <td>第五节<br />14:15~14:555</td>
          <td>思品</td>
          <td>美术</td>
          <td>体育</td>
          <td>音乐</td>
          <td>体育</td>
        </tr>
        <tr>
          <td colspan="6">眼操 14:55~15:00</td>
        </tr>
        <tr>
          <td>第六节<br />15:10~15:50</td>
          <td>音乐</td>
          <td>英语</td>
          <td>思品</td>
          <td>形体</td>
          <td>美术</td>
        </tr>
        <tr>
          <td>第七节<br />16:00~16:40</td>
          <td>班会</td>
          <td>围棋</td>
          <td>象棋</td>
          <td>书法</td>
          <td>例会</td>
        </tr>
        <tr>
          <td colspan="6">放学时间 16:40</td>
        </tr>
      </tbody>
    </table>
</body>

3.字体图标

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

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

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

4.运行，效果如下：

4.媒体查询

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

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

    <button class="btn small">Btn1</button>
    <button class="btn middle">Btn2</button>
    <button class="btn large">Btn3</button>
    <style>
      html {
        /* 设置根字号 */
        /* 为了计算方便: 把根字号设置为 10px  */
        font-size: 10px;
      }
      .btn {
        background-color: seagreen;
        color: white;
        border: none;
        outline: none;
      }
      .btn:hover {
        cursor: pointer;
        opacity: 0.8;
        transition: 0.3s;
      }
      .small {
        /* 小按钮 */
        font-size: 1.2rem;
      }
      .middle {
        /* 中等按钮: 16px; */
        font-size: 1.6rem;
      }
      .large {
        /* 大按钮: 20px */
        font-size: 2rem;
      }
      /* 断点: 375, 414, 600 , 由小到大 */
      /* < 374px */
      @media (max-width: 374px) {
        html {
          font-size: 12px;
        }
      }
      /* 375px < width < 414px */
      @media (min-width: 375px) and (max-width: 413px) {
        html {
          font-size: 14px;
        }
      }
      /* > 414px */
      @media (min-width: 414px) {
        html {
          font-size: 16px;
        }
      }
      @media (min-width: 600px) {
        html {
          font-size: 18px;
        }
      }
    </style>

效果图如下：

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

<body>
    <div>
      <h2>媒体查询 先从最大屏的设备进行适配</h2>
    </div>
    <hr />
    <div>
      <button class="btn small">小按钮</button>
      <hr />
      <button class="btn middle">中按钮</button>
      <hr />
      <button class="btn large">大按钮</button>
    </div>
    <style>
      html {
        width: 100vw;
        height: 100vh;
        font-size: 100px;
      }
      div > h2 {
        font-size: 16px;
        text-align: center;
      }
      .btn {
        background-color: seagreen;
        color: white;
        border: none;
        outline: none;
      }
      .small {
        /* 小按钮 */
        font-size: 0.2rem;
      }
      .middle {
        /* 中等按钮:*/
        font-size: 0.4rem;
      }
      .large {
        /* 大按钮: */
        font-size: 0.6rem;
      }
      /* 1000, 800 600 450  350  */
      /* 大于1000 */
      @media (min-width: 1000px) {
        html {
          font-size: 100px;
        }
      }
      /* 大于800 小于1000 */
      @media (min-width: 800px) and (max-width: 999px) {
        html {
          font-size: 90px;
        }
      }
      /* 大于600 小于800 */
      @media (min-width: 600px) and (max-width: 799px) {
        html {
          font-size: 80px;
        }
      }
      /* 大于450 小于600 */
      @media (min-width: 450px) and (max-width: 599px) {
        html {
          font-size: 70px;
        }
      }
      /* 大于350 小于450 */
      @media (min-width: 350px) and (max-width: 449px) {
        html {
          font-size: 60px;
        }
      }
       /* 小于350 */
       @media (max-width: 349px) {
        html {
          font-size: 50px;
        }
      }
    </style>
</body>

效果图如下：

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

uni-app之tab选项卡

2022-09-01 16:35:49