css中如何调整元素位置

我们通常把样式层叠表叫做css，它是用来修饰html内容的，给内容加各种各样的样式和效果。

那么在写实际项目过程中经常会遇到一个普遍性问题：就是调整元素的位置

如果只对于初学编程的人来说，只能用css的知识去做，我们也可以总结一些实用性办法；

1.利用盒子模型

 盒子模型，就是在讲四个属性：

内容区        

                        max-width 	最大宽度
			min-width 	最小宽度
			max-height      最大高度
			min-height      最小高度

内边距（内容与盒子内壁之间的距离）

                        margin-top        
			margin-left
			margin-right
			margin-bottom

边框（盒子的厚度）        

			border-top
			border-left
			border-right
			border-bottom

 外边距（当前盒子与其他盒子之间的距离）

                        margin-top
			margin-left
			margin-right
			margin-bottom

常见的盒子比如：

div标签：可以理解为大盒子，独自占一行

span标签：可以理解为小盒子，一行可以有多个span标签

2.可以利用定位：

position 	
static 		静态定位，默认值，没有任何定位效果。
						
relative	相对定位，根据自身原本的位置进行定位
		不会脱离文档流，移动后原本的位置会留出空白
						
fixed 		固定定位，根据浏览器窗口的位置进行定位
		脱离文档流，一般用于制作导航栏
						
absolute 	绝对定位，根据最近的有定位方式的父元素进行定位
		脱离文档流，一般配合相对定位去使用
						
sticky 		粘性定位，根据页面滚动的位置进行定位，
		类型于 相对定位 和 固定定位 的结合。
		 
可以使用top， left， right， bottom四个方向的值去调整元素的位置

但需要强调一点，使用定位，尤其是postion和fixed时，会脱离文档流，所以一般配合z-index：；使用，得给元素设置层级，不然会出现在下滑的时候会覆盖导航栏这种情况。

3.使用transform

translate(x,y) 平移

一般我们这样用：transform:translateY(-70%)表示Y轴反方向平移70%

4.使用float

float ：left / right
			
脱离文档流，向左或向右浮动，直到碰到另一个浮动元素或父元素的边框
			
浮动可能会造成高度坍塌

5.可以利用弹性容器

我们给一个容器，比如说给一个div加入display：flex；，那么这个div就会变成弹性容器

当这个div变成弹性容器时，那弹性容器对应的项目属性才有用，才会有效果。如果只给一个div加项目属性，而没有加display：flex；使之变为弹性容器，那写再多项目属性，也是不会有任何效果的。

总结5个常用的项目属性：

.div {
	    display: flex;
		flex-direction:column-reverse;
	     /* row （默认值）：左→右
		    row-reverse 主轴为x轴方向，起点在右端。
		    column 主轴为垂直方向，起点在上沿。
		    column-reverse 主轴为垂直方向，起点在下沿
		    */
	}

.div {
		display: flex;
		width: 100%;
		flex-wrap: wrap-reverse;
		     /* nowrap（默认）：不换行。
		        wrap：换行，第一行在上方。
				wrap-reverse：换行，第一行在下方。
			    */
	}
.div {
		display: flex;
		width: 100%;
		flex-flow: row-reverse wrap;
				/* flex-direction属性值
				   flex-wrap属性值 
                    */
			}

.div {
		display: flex;
		width: 100%;
		justify-content:space-around;
				 /* flex-start（默认值）：左对齐
					flex-end：右对齐
					center： 居中
					space-between：两端对齐，项目之间的间隔都相等。
					space-around：每个项目两侧的间隔相等。
                     */
				}

.div {
		display: flex;
		align-items:flex-start;
		height: 400px;
			/* 
			flex-start：y轴的起点对齐。
			flex-end：y轴的终点对齐。
			center：y轴的中点对齐。
            */
        }

5种方法去解决元素位置问题，诚然，如果掌握了弹性容器，就完全没有必要使用float，但是transform却还是非常常用的。