css中如何调整元素位置
CSS 如何 元素 位置 调整
2023-09-14 09:13:39 时间
我们通常把样式层叠表叫做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却还是非常常用的。
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- CSS面试题总结[通俗易懂]
- css gray rgb数值,CSS3 调色板 颜色值对照表
- css opacity属性_CSS中的opacity属性[通俗易懂]
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- 纯CSS实现“精灵图”动态特效
- UnCSS - 在线精简去除多余无用的 CSS
- 【说站】css内边框如何理解
- 【说站】css中box-shadow方法如何使用
- 【说站】css中sticky属性有什么特点
- 【说站】css旋转属性如何理解
- 【说站】css普通兄弟选择器如何理解
- CSS实现背景图毛玻璃效果和如何保持图片上的文字显示正常
- 如何用html+css+js做一个跳跃逃离坍塌房子
- 前端html和css总结
- 如何使用CSS创建高级动画,这个函数必须掌握
- 【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)
- 不使用构建工具,如何对css进行模块化?
- 八个解决你80%需求的CSS动画库
- [css代码]如何规范写css代码?
- 前端必备的 CSS 库,normalize.css
- CSS 如何设置背景透明,并使用 PHP 将十六进制的颜色值转换成 RGBA 格式
- 【CSS】使用 CSS 实现三角形 ( 宽高设置为 0 | 设置四个边框宽度 / 样式 / 颜色值 | 兼容低版本浏览器 | 基本示例 | 对话框示例 )
- CSS学习摘要-层叠和继承详解编程语言
- CSS 下拉菜单详解编程语言
- CSS 布局 – 水平 & 垂直对齐详解编程语言
- CSS 语法
- CSS 字体样式
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- CSS与MySQL合力提升网页性能(css与mysql结合)
- CSS样式表常用小技巧收藏
- css实现行间距效果
- 无js5款纯div+css制作的弹出菜单标准