我们通常把样式层叠表叫做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却还是非常常用的。

技术
今日推荐
阅读数 155
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信