css的定位

一、定位

所为定位，实际上就是定义元素框相对于其正常位置，应该出现在哪儿
定位就是改变元素在页面上的默认位置

分类：

普通流定位：static（元素默认的定位方式）

文档流是页面元素默认的定位方式
块级：从上到下排列（独占一行）
行级：从左到右排列（不独占一行）

浮动定位 float

如果将元素的定位方式设置了浮动定位那么具有以下几个特点

1. 浮动元素会脱离文档流，其他未浮动的元素要上前补位
2. 浮动元素会停靠在父元素的左边或者右边，或者停靠在其他浮动元素的边缘上
3. 浮动元素只会在当前行内浮动
4. 浮动元素依然位于父级元素内
5. 让多个块级元素处于一行

浮动引发的效果
当父元素的宽度显示不下所有已浮动的元素时，最后一个元素将换行（有可能会被卡住）
元素一旦浮动起来，那么将变成块级元素，尤其对行内元素影响最大。
文本、行内元素、行内块元素 采用文字环绕的方式排列，是不会被浮动元素压在底下的会巧妙的避开浮动元素
清除浮动
元素浮动起来之后，除了影响到自己的位置，还会影响后续元素
如果不想被前面浮动元素影响 可以使用清除浮动来解决这个问题
谁被影响 就在谁身上用
关键字 ：clear ：
left 清除左浮动
right 清除右浮动
both 不管是左右都清除
浮动元素对父级元素带来的影响
如果父级的高度设置100% 或者 没有设置（自适应） 当元素全部浮动起来之后 父级的高度为0
如何去解决：

				1.直接给父级设置高度px
					弊端：必须要知道父级准确的高度
				2.设置父元素浮动
					弊端：对后续元素又影响
				3.为父级元素设置overflow（溢出） 
					弊端：如果子级内容有溢出显示的话会被一同隐藏
				4.在父元素中追加一个空元素  设置清除浮动

相对定位 relative

相对自身原来位置进行偏移（未脱离文档流）

绝对定位 absolute

以它最近的一个“已经定位”的祖先元素为基准，没有祖先元素时，以浏览器窗口为基准，原位置消失。

固定定位 fixed

以浏览器窗口为基准，相对浏览器定位

CSS的伪类

hover：鼠标触碰到元素时触发的伪类

显示相关

1.显示方式

作用： 决定了元素在页面中如何摆放定位。
属性： display：none 让元素的分类变为空 从而不见，脱离了文档流。
visibility 显示/隐藏元素
visible 可见的
hidden 隐藏的
collapse 使用在表格元素上 ，删除一行或者一列 不影响表格整体布局

区别：
display 脱离了文档流 。
visibility 不脱离文档流导致空间依然占据。

opacity： 改变元素的透明度

2、光标的属性

属性：cursor
取值：

cursor	光标的属性
default	默认的属性
pointer	手
crosshair	文本
text	默认的属性
wait	加载等待
help	帮助

3.列表的属性
list-style：none 去掉小黑点或序列号