利用css 使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移。本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移。
一、使用css3 transform:translate(X,Y)来偏移元素
①transform属性应用于元素的2D或3D转换,这个属性允许你将元素旋转,缩放,移动,倾斜等。其基本属性如下所示:
值 描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
②其中,使用transform:translate(X,Y)来偏移元素
语法运用:
.div1{
transform:translateY(-50%);/**上移元素**/
-ms-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}
.div2{
transform:translateY(50%);/**下移元素**/
-ms-transform:translateY(50%);
-webkit-transform:translateY(50%);
}
.div3{
transform:translateX(-50%);/**左移元素**/
-ms-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
}
.div4{
transform:translateX(50%);/**右移元素**/
-ms-transform:translateX(50%);
-webkit-transform:translateX(50%);
}
二、使用css相对定位来偏移元素
css相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
如果将top设置为20px,那么框将在原位置顶部下面的20像素的地方。如果left设置为30像素,那么会在元素左边创建30像素的空间,也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
如下图所示:
注意:在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框。相对定位会按照元素的原始位置对该元素进行移动。
三、总结与思考
这次,把html中用过的div元素位移的方法,记录一下。
如文章哪里有问题,欢迎大家留言,进行指正,谢谢!
参考博客:深入理解CSS定位中的偏移点击打开链接
---------------------
作者:qq_26780317
来源:CSDN
原文:https://blog.csdn.net/qq_26780317/article/details/80486766
版权声明:本文为博主原创文章,转载请附上博文链接!
利用css 使div上下左右移动相关推荐
- html怎么设置一个div可以左右移动,利用css 使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...
- 前端 使用CSS属性,使Div上下左右移动指定像素
前言 前端 使用CSS属性,使Div上下左右移动指定像素 前端的Css属性真的太多了,很不容易记下,所以写一篇博客记录,加深记忆. 需求 上面是美工出的图 大概就是2个横着排列的div和分页器居中对齐 ...
- 应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
- 用CSS使DIV水平居中
一,用CSS使DIV层水平居中 对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto; 这样在FF中已经居中了,可是在IE中看 ...
- 使用css属性,使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...
- css设置div上下左右均居中 、底部居中
css设置div或盒子居中 #垂直居中 #左右居中 #底部居中 类型一:固定宽度高度 html代码 <div class="login_container"><d ...
- 用CSS让DIV上下左右居中的方法
例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格单元格的居中属性. 步骤 ...
- div内上下左右距离_用CSS让DIV上下左右居中的方法
当父div的行高等于自身高度时,内部的行内元素会上下居中显示.行内块没有固定高度时也会上下居中显示.所以需要对父div的 line-height 进行调整.利用定位属性(top.left.right. ...
- js+css 使div背景图在ie6中透明
一个小东西 就不叙述了 banner为div的ID <script type="text/javascript"> var banner = document.getE ...
最新文章
- linux在文档中查找内容,【Linux】用grep在文档中查找内容
- OpenGL 光照贴图Lighting maps
- php连接redis的操作库predis操作大全
- seo建设者_SEO建设者,有哪些说不出的苦?
- [css] 请描述margin边界叠加是什么及解决方案
- 剑指Offer - 面试题6. 从尾到头打印链表(栈,递归,反转链表)
- PHP地图规划骑行路径,骑行路线规划-路线规划-开发指南-iOS 导航SDK | 高德地图API...
- c语言 overflow_一文读懂:C语言编程中“堆”和“栈”的七大区别
- Python得到字符的阿斯克码值 chr ord
- vs2008 sp1 regex
- 《Windows程序设计》学习笔记(chap10菜单及其它资源)(一)
- VMware虚拟机三种网络连接模式详解
- python画罗小黑_python股票数据聚类算法:罗小黑战记的股票_XAC配资之家
- 判断一个数是否是素数的 n 多种方法
- 专升本英语——语法知识——高频语法——第六节 名词性从句(主语从句-表语从句-同位语从句-宾语从句)【学习笔记】
- springboot+毕业设计管理系统 毕业设计-附源码221032
- 乐行学院Redis5学习教程 第二章 redis5远程访问及工具Redis Desktop Manager使用
- 冒泡排序算法,简单明了哦。
- 机器学习——支持向量机——硬间隔与支持向量
- python复数的经典题解析
热门文章
- 思维挑战11:摘苹果问题-一维数组
- 【DOTA】制作Efficientdet训练数据
- 策略模式的应用——游戏中武器的选择
- The app references non-public selectors in Payload/XXX.app/XXX: fontWeight, relativeSize
- 起床困难综合征(位运算)
- Java实现简易客房管理系统
- Html中加入文字和图片
- matlab求因子载荷矩阵,因子分析中因子旋转用matlab怎么实现?
- Android之AndroidStudio输入中文不提示候选字解决办法
- SpringSecurity之RememberMe