我们通常把样式层叠表叫做css,它是用来修饰html内容的,给内容加各种各样的样式和效果。
那么在写实际项目过程中经常会遇到一个普遍性问题:就是调整元素的位置
如果只对于初学编程的人来说,只能用css的知识去做,我们也可以总结一些实用性办法;
1.利用盒子模型
![](https://img-blog.csdnimg.cn/9fca0f97cf6a4a4a846cb5793d4ffeef.png)
盒子模型,就是在讲四个属性:
内容区
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却还是非常常用的。