1.盒模型计算
演示效果
代码如下：
<!DOCTYPE html><html lang="zh-CN"> <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> <style> .box { width: 200px; height: 200px; background-color: cyan; /* 边框线 */ /* border: 5px solid black; */ border-right-width: 10; border-right-style: solid; border-right-color: red; /* 可以简化为如下： */ border-top: 2px solid yellow; border-left: 10px solid gray; border-bottom: 6px dashed green; /* 四值：上、右、下、左 顺时针*/ padding: 5px 10px 15px 20px; /* padding裁切后可见，具有呼吸特征 */ background-clip: content-box; /* 控制盒子的计算方式: 扩展到内容*/ /* box-sizing: content-box; */ /* 控制盒子的计算方式: 扩展到边框*/ box-sizing: border-box; } .box { margin: 20px; } .box:last-of-type { background-color: black; margin-top: 50px; /* margin会在垂直方向出现折叠，两个盒子谁的大以谁的为值扩展 */ border-top: 10px dashed beige; background-clip: border-box; } </style> </head> <body> <div class="box"></div> <div class="box"></div> <!-- 页面所有元素都是矩形块，矩形块只有两种排列方式：垂直和水平，对应两种元素：块元素和行内元素 --> <div>div是块元素</div> <a href="">a、input都是行内元素</a> </body></html>
2.字体图标
效果演示
html代码
<!DOCTYPE html><html lang="zh-CN"> <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" /> <!-- 第一步：引入项目下面生成的 fontclass 代码： --> <link rel="stylesheet" href="myfont.css" /> <title>字体图标</title> </head> <body> <!-- 第二步：挑选相应图标并获取类名，应用于页面： --> <div><span class="iconfont icon-huiyuan1"></span></div> </body></html>
CSS代码
@import url(font_icon/iconfont.css);.iconfont.icon-huiyuan1 { font-size: x-large; color: yellowgreen;}
3.媒体查询
效果演示
代码部分
<!DOCTYPE html><html lang="zh-CN"> <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> <style> /* body { background-color: red; } @media (max-width: 500px) { body { background-color: yellow; } } */ html { /* em:默认元素字号，16px */ /* rem:根元素字号，16px */ /* 在根元素中设置的字号，在其他地方用rem倍数代替，不会改变 */ /* 一个页面只有一个根元素，如下：1rem=10px */ font-size: 10px; /* 1rem=10px; */ } .btn { background-color: seagreen; color: white; border: none; outline: none; } .btn:hover { cursor: pointer; opacity: 0.8; transition: 0.3s; padding: 0.5rem 0.8rem; } .small { font-size: 1.2rem; } .middle { font-size: 1.8rem; } .large { font-size: 2.2rem; } /* 最大300px生效，宽度小于300px时font-size为15px */ @media (max-width: 300px) { html { font-size: 12px; } } /* 最小300px到最大500px生效，font-size为15px */ @media (min-width: 301px) and (max-width: 500px) { html { font-size: 14px; } } /* 最小500px时font-size为15px */ @media (min-width: 501px) { html { font-size: 10px; } } /* 以上从小到大的匹配过程：移动优先 */ div { font-size: 2rem; } div span { font-size: 3rem; } div h2 { font-size: 1.5rem; } </style> </head> <body> <!-- 媒体：显示/输出信息的载体 --> <!-- 查询：根据媒体界面自动选择最佳的显示方式 --> <button class="samll">btn1</button> <button class="middle">btn2</button> <button class="large">btn3</button> <div> <span>px:像素，绝对单位，1in=96px</span> <h2>1em浏览器默认等于16px，但是当em在随自身或者父元素中变化时，会重新按照自定义的进行计算</h2> <h2>一个页面只有一个根元素,在根元素中设置的字号，在其他地方用rem倍数代替，不会改变</h2> <h2></h2> </div> </body></html>
