1.常用标签的使用
前往本页面中个某个位置：Top =>锚点
1.设置锚点
2.设置前往锚点的a跳转
设置前往锚点的a跳转：#锚点名
<div id="t_123">123</div>
<a href="#page_top"Top</a>
<a href="#t_123">123</a>
<a href="00_复习预习.html#md">前往锚点</a>
2.边界圆角
边界圆角用百分比控制，border-radius: 50%;
3.背景样式
background-image: url(‘图片地址‘） #导入图片作为背景
background-size: 200px 200px; #规定背景图片显示尺寸
background-repeat:no-repeat;#平铺图片大小不够，复制后填充
background-position: 10px 40px;#控制图片移动
background: url(‘img/123.png‘) red no-repeat 50px 50px;
4.精灵图
精灵图： 各种小图拼接起来的一张大图。
为什么使用精灵图：减少请求次数，降低性能的消耗，二次加载图片资源时极为迅速（不需要发送请求）
.box{
background-image: url(‘img/bd.png‘);
background-position:0 -150px;
}
.box:hover {
cursor: pointer;
background-position:0 -250px;
}
5.盒布局细节
margin坑：
上兄弟margin-bottom与下兄弟margin-top重合，取大值。
解决方案：
只设置一个，建议设置下兄弟margin-top
margin布局： 下盒子的垂直起始位置决定于同结构中上盒子的margin结果位置；水平起始位置就是父级content最左侧。
原文地址：https://www.cnblogs.com/gongcheng-/p/10105295.html