css基础总结(3)元素位置

css定位机制 默认:普通流(标准流) 浮动 绝对定位
标准流是指 元素自动由上到下 由左至右
当给多个元素同时设置左浮动或右浮动时两个元素将会按先后顺序出现在同一行，不管他是行元素还是块元素，但设置浮动后元素将脱离页面的常规流，该元素附近没有设置浮动的元素将会出现异位，附件的高度也将不会受该元素的影响，浮动只对自己之后的元素造成影响
both比较常用
如何让样式能实现浮动排序效果又不影响后面的元素位置
方法1 在浮动元素后添加一块空盒子div，并给这块空div设置样式 clear:both;
方法2 给浮动元素的父级元素添加一个 overflow:hidden; 样式
方法3 给浮动元素的父元素添加类名 clearfix 并在css中写

clearfix:after
{
	content:",";
	height:0;
	display:block;
	visibility:hidden;
	clear:both;
}

第二和第三种方法存在兼容问题，低版本的IE会不识别，需要添加样式 zoom:1;
还有两种比较捞的方法
1 给父元素添加高度，比如浮动元素高度100px，给他的父元素也设100px的高度就会有包裹的假象(不建议使用)
2 给浮动元素的父元素也添加浮动，但会出现新的浮动问题(非常不建议使用)

浮动可以实现列表同行展示，给li标签添加左浮动 float:left;不过这样li会挤在一起，需要调一下右边距 margin-right:20px;然后就是给父元素添加去除浮动的样式 overflow:hidden;
注意li的父元素是ul或ol而不是列表外的元素

nth-child可选择同一标签中的其中一个
比如 div:nth-child(2) 选择第二个页面上的第二个div元素

比起浮动 定位显然在位置调度上更有优势
position:static;是元素的默认值，就是没有定位，大部分情况下是用于清楚定位的，因为定位确实存在不小的问题

position:static;的三大特性
1 position:static;会自动无视其他定位属性
2 外边距规则，两个相邻元素都设置外边距的情况下，如果相等，则外边距重叠，如果不等，则外边距采用大的那个
3 当元素具有固定的高度和宽度时，如果把左右外边距的值都设为auto，元素将会出现在页面中水平居中的效果

position:relative;特性
1 relative可以使用 top/right/left/bottom/z-index 属性
2 相对定位元素发生偏移，但本体还会留在原地
3 设置相对定位的元素内的子元素如果设置了绝对定位，就不会以整个页面为定位，而是根据父元素定位(灵魂所在)
4 元素有浮动时可以在浮动的基础上发生偏移，且可以改变他们的堆叠顺序
相对定位使用方法如下

position:;relative;
top:0;
left:0;
Z-index:1;/*改变样式的优先级*/

position:absolute;特性
1 元素脱离常规流
2 绝对定位的起点为设置了relative的祖先元素，如果没用则从body的左上角为起点
3 当把某个方向值设为0时他将会在起点元素的那个方向的最边上对齐
比如 position:absolute;right:0;就能实现元素右对齐的效果
当你的元素没有宽度和高度时，将全部方向值设为0他将占满整个起点容器
或者给高宽将外边距xy轴设为设为auto就可以实现xy轴方向的居中
一但将方向值设为auto就会被打回原形

position:fixed;特点
1 永远以页面的左上角为起点，无法改变
2 他的定位是相对于整个屏幕不会因页面滚动而改变位置

position:sticky;特点
1 如果设置了偏移，原位置会留在常规流中
2 如果他的祖先元素有滚动，那么他的偏移标尺就是他的祖先元素
3 如果最近的祖先元素没有滚动条 他的标尺就是视口
4 上下左右偏移

position:inherit;继承父级的定位方式

cursor可以控制光标的一些行为
cursor属性值
类型 CSS值 叙述


overflow属性值
overflow:visible; 设置超出部分可见(元素默认值)
overflow:hidden; 设置超出部分隐藏
overflow:auto; 元素超出时给滚动条
overflow:scroll 内部元素会变修剪，浏览器出滚动条
overflow:inherit 下级元素会继承上级的overflow属性值

对这两种布局感兴趣的可以去了解一下这两款靠浮动产生的布局
但现在最好用的个人感觉还是flex布局