六、定位方式
1.简介
通过position属性实现对元素的定位，有四种定位方式
常用取值：
设置定位方式后，还要设置定位属性（偏移量）：top、bottom、left、right
2.相对定位
先设置元素的position属性为relative,然后再设置偏移量
3.绝对定位
先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量
注意：
- 一般来说都会将父标签设置为非static定位
- 如果父标签不是非static定位，则会相对于浏览器窗口进行定位
- 设置元素为绝对定位后，元素会浮到页面上方
4.固定定位
先设置元素的position属性为fixed，然后再设置偏移量
设置元素为固定定位后，元素会浮动在面面上方
5.z-index
设置元素定位方式后，元素会浮在页面上方，此时可以通过z-index属性设置优先级，控制元素的堆叠顺序
取值为数字，值越大优先级越高，默认为auto(大多数浏览器默认为0)
注意：只能给非static定位的元素设置z-index属性
示例：
七、其他CSS属性
1.浮动和清除
1.1 浮动属性
通过float属性来实现元素的浮动，可以让块级元素脱离常规的文档流，向左或向右移动，在同一行显示，
如果一行显示不下，则会换行显示
常用取值：
- left左浮动
- right右浮动
- none不浮动，默认值
设置float属性后，元素会浮在页面上层，此时父容器无法计算自己尺寸，如果我们还想显示父容器通常会在末尾添加一个清除了float属性的空的div来解决
示例：
1.2 清除属性
通过clear属性来实现清除，设置元素的哪一侧不允许有浮动元素
常用取值：
- left左侧不允许出现浮动元素
- right右侧不允许出现浮动元素
- both两侧不允许出现浮动元素
- none允许两侧出现浮动元素，默值
结论：
- 对于非浮动元素，两边都可以设置清除（常用）
- 对于浮动元素，向哪边浮动，就只能设置哪边的清除
示例：
2.元素的显示和隐藏
2.1 display
通过display属性设置元素是否显示，以及是否独占一行
常用取值：
注意：
行级元素是无法设置宽度和高度的，可以为行级元素设置 display:inline-block ,然后就可以设置宽和高了
2.2 visibility
也可以通过visibility属性设置元素的显示和隐藏
常用属性：
2.3 区别
- display隐藏时不再占据页面中的空间，后面的元素会占用其位置
- visibility隐藏时会占据页面中的空间，位置还保留在页面中，只是不显示
示例：
3.轮廓属性
3.1 简介
轮廓outline,用于在元素周围绘制一个轮廓，位于border外围，可以突出显示元素
3.2 基本用法
常用属性:
- outline-width:轮廓宽度
- outline-color:轮廓颜色
- outline-style:轮廓样式
- outline简写
在浏览器中，当鼠标单击或使用TAB键让一个表单或链接获得焦点时，该元素会有一个轮廓outline
优点：可以提高使用表单的用户体验
缺点：有时会影响美观
3.3 outline和border的区别
- border可以应用于所有html元素，而outline主要用于表单元素、超链接元素
- 当元素获得焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为
- outline不影响元素的尺寸和位置，而border会影响
示例：
4.其他属性
4.1 宽高相关
- max-width:设置元素的最大宽度
- max-height:设置元素的最大高度
- min-width设置元素的最小宽度
- min-height设置元素的最小高度
4.2 overflow属性
当元素内容溢出时该如何处理
常用取值：
- visible溢出时可见，显示在元素外，默认值
- hidden溢出的部分不可见（常用）
- scroll无论是否出现溢出始终出现滚动条
- auto溢出时自动出现滚动条
4.3 cursor属性
用于设置光标的形状
常用属性：
- default默认光标，一般为箭头
- pointer手形，光标移动超链接上时一般显示为手形
- move表示可移动
- text表示文 本
- wait表示程序正忙，需要等待
- hep表示帮助
示例：
