一、css盒模型
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最左侧。
二、display
inline
1.同行显示，详单与纯文本，当一行显示不下，如果就是一个字显示不下，那么显示不下的哪一个字就会自动换行，和纯文本的区别就是有标签整体的概念，标签与标签间有一个空格的隔断。
2.支持部分css样式，不支持宽高|行高（行高会映射到父级block标签）| margin上下
3.centent由文本内容撑开
4.inline标签只嵌套inline标签
inline-block
1.同行显示，当一行显示不下，标签作为一个整体换行显示。
2.支持所有css样式
3.content默认由文本（图片）内容撑开，也可以自定义宽高，当自定义宽高后，一定采用自定义宽高（显示区域不足，内容会在标签内容换行显示，可能超出显示区域）
4.inline-block标签不建议嵌套标签。
block
1.异行显示，不管自身区域多大，都会独占一行。
2.支持所有css样式。
3.width默认继承父级，height由内容（文本，图片，子标签）撑开，当设置自定义宽高后，一定采用自定义宽高。
4.block可以嵌套任意标签。
三、overflow知识
本质
overflow:处理内容超出盒子显示区域
overflow:auto | scroll | hidden
auto:自适应，内容超出，滚动显示超出部分，不超出则正常显示。
scroll:一直擦爱用滚动方式显示
四、浮动布局
float:浮动布局，改变BFC的参照方位
为什么要使用：使用它，块级盒子机会同行显示
float: left | right； 左 | 右 浮动
left:BFC参照方向从左向右
right:BFC参照方向从右向左
浮动的区域有父级的width决定
五、清浮动
浮动问题：子级浮动了，不再撑开父级的高度，那么父级如果拥有兄弟 标签，可能就
会出现布局重叠的问题
清浮动：解决上面的问题，通过使父级获取一个合适的高度，这样子级就不会和父级的
兄弟布局发生重叠
clear:left | right | both
1.设置父级的死高度
2.通过兄弟设置 clear:both
3.设置父级overflow属性
.sup{
overflow:hidden;
}
4.通过父级：after伪类
.sup:after{
content:"";
display:block;
cler:both;
}