©2020-2024 ioDraw All rights reserved,
Privacy Policy
我们通常把样式层叠表叫做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却还是非常常用的。