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>
效果图如下: