一、CSS布局常用单位
1. 绝对单位
px像素
in英寸
1in等于96px
2.相对单位
2.1 % 相对父级的百分比
2.2 em和rem
1em默认是16px
em受父类影响，rem受根元素也就是HTML的影响。
一般为了保证浏览器正常的阅读，em 小于12px时，将不能生效，除非去浏览器里调整浏览器字体最小显示，调到12px以下，才能生效。不建议调整。
2.3 vw和wh
vw view-width 视图宽度
vh view-height 视图高度
视图窗口，简称视口，view-port
1vw = 整个视口宽度/100
1vh = 整个视口高度/100
参考如下案例：
HTML代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="test.css"></head><body><div class="box"></div></body></html>CSS文件test.css中的内容body{background-color: lightblue;width: 100vw;height: 100vh;}.box{width: 50vw;height: 50vh;background-color: coral;background-clip: border-box;}
效果如下（div始终占视口的50%）：
二、表格常用样式
添加表格线，添加到单元格td、th
折叠表格线
调整表头、文字、表格居中
使用伪类选择器设置样式
HTML代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="test.css"></head><body><table><caption>课程表</caption><thead><tr><th></th><th>周x</th><th>周x</th><th>周x</th><th>周x</th><th>周x</th><th>周x</th><th>周x</th></tr></thead><tbody><tr><td rowspan="4">上午</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td></tr><tr><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td></tr><tr><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td></tr><tr><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td></tr></tbody><tbody><tr><td colspan="8">中午</td></tr></tbody><tbody><tr><td rowspan="2">下午</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td></tr><tr><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td><td>课程</td></tr></tbody><tfoot><tr><td>备注</td><td colspan="7"></td></tr></tfoot></table></body></html>test.css代码/* 添加单元格表格线，添加到td、th级别。 */table th,table td{border: 1px solid #000;}/* 折叠表格线 */table{border-collapse: collapse;/* 表格（块级元素）水平居中 */margin: auto;/* 文本水平居中 */text-align: center;}/* 调整标题 */caption{/* 调整表标题字体大小 */font-size: 1.2em;/* 调整与表主体的距离 */margin-bottom: 0.6em;}table thead{background-color: lightblue;}/* 使用位置类伪类选择器进行样式设置 */table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type{background-color: lightgreen;}
调整后的效果入下：
三、class方式引入字体图标
基础HTML代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="test.css"></head><body><div><span class="iconfont icon-jingdong myicon"></span></div></body></html>test.css代码/* 导入官方库 */@import 'font_icon/iconfont.css';/* 设置图标样式 */.myicon{/* 可以把文字图标当普通文字一样设置样式 */font-size: 100px;color: green;box-shadow: 2px 2px 2px yellow;border: 10px solid coral;}
引用效果如下：
四、媒体查询（PC优先）
媒体：手机/pad/pc等的屏幕，打印机都是媒体
查询：获取媒体当前状态。
布局的前提：用户在一个宽度/高度受限，高度/宽度随用户内容增长的空间进行布局。高度/宽度必须固定一个。
媒体查询PC优先，即先从最大屏开始匹配
HTML代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="test.css"></head><body><button class="btn small">btn1</button><button class="btn middle">btn2</button><button class="btn large">btn3</button></body></html>test.css代码用html根元素伪类设置:root{font-size: 16px;}.btn{background-color: seagreen;color: white;border: none;outline: none;}.btn:hover{cursor: pointer;opacity: 0.1;transition: 0.3s;}.small{font-size: 1.2rem;}.middle{font-size: 1.6rem;}.large{font-size: 2rem;}@media (min-width: 1000px){:root{font-size: 256px;}}@media (min-width: 500px) and (max-width:999px){:root{font-size: 128px;}}@media (min-width: 250px) and (max-width:499px){:root{font-size: 64px;}}@media (min-width: 125px) and (max-width:249px){:root{font-size: 32px;}}
效果描述：
当屏幕宽度大于1000px时，html的font-size被修改为256px，三个按钮使用了rem的相对单位，对应大小调整为：
small按钮,font-size=256*1.2=307.2pxmiddle按钮,font-size=256*1.6=409.6pxlarge按钮,font-size=256*2=512px