html怎么设置一个div可以左右移动,利用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
版权声明:本文为博主原创文章,转载请附上博文链接!
html怎么设置一个div可以左右移动,利用css 使div上下左右移动相关推荐
- 利用css 使div上下左右移动
在html中,有时需要使某个div上下左右移动,使div元素位置产生偏移.本文使用了css3的transform:translate(X,Y),和css的相对定位来实现div元素的偏移. 一.使用cs ...
- html div 水平垂直居中显示,利用CSS实现div水平垂直居中
实现居中的方案有很多,这里介绍下纯CSS使用absolute配合margin的方案. 1. p宽高固定width: 400px; height: 200px; position: absolute; ...
- 应用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垂直居中,div垂直,div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
- html怎么给div加阴影,怎么用css实现div的阴影效果?
在css中,给div添加阴影效果主要使用box-shadow属性,但需要注意不同的浏览器需要作不同的处理来提高样式的兼容性.下面介绍如何用CSS实现DIV块的阴影效果. css可以使用box-shad ...
- html中如何把一个div变成三角形,是否可以使用CSS从div中切出三角形部分?
它的幻觉是可能的: http://jsfiddle.net/2hCrw/4/ 测试:IE 9,10,Firefox,Chrome,PC和iPad上的Safari. > :: before和::伪 ...
- js+css 使div背景图在ie6中透明
一个小东西 就不叙述了 banner为div的ID <script type="text/javascript"> var banner = document.getE ...
- css使div元素水平并垂直的方法(4种)
这里以一个120x120的div块状物体做测试 法1: position:absolute; left:0;top:0;right:0;bottom:0; margin:auto 法2: positi ...
最新文章
- r语言和metawin_如何创建R的HelloWorld包(Windows或Linux环境下)
- VTK:PolyData之GetMiscPointData
- 有关sublime的一些使用
- .Net Core创建Docker镜像
- 科研汪的日常--一朝误入静电容,从此机械了如空(Niz静电容开箱)
- wordpress 运行_如何为您的教室设置和运行WordPress
- html中div页面布局,前端入门篇(二):利用Div + CSS快速布局页面
- [Pyecharts 可视化] B站推荐视频分析
- TCP通信丢包原因总结
- 【钛媒体】社交网络广告怎么做才不让人反感?
- 【数学 博弈论】JZOJ_3339 wyl8899和法法塔的游戏
- win10控制面板快捷打开方式
- Android设置默认输入法
- Linux命令行模式启动VMware时vmnet-dhcpd和vmnet-natd进程无法启动 VMware进程不全 解决办法
- VL53L0X 底层思路整理(1)
- HTML5印章绘制电子签章图片,中文英文椭圆章、中文英文椭圆印章 电子签章图片采集
- C语言单元测试---cunit(一) ---- 博客经典;
- libxml2下载,下载地址大全
- HTML网页设计期末课程大作业 :汽车网页——宝马轿车 6页 带背景音乐 学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载
- cadence17.4在quick place器件时显示cannot find symbol
热门文章
- Git步步进阶---实战git的windows安装和使用
- gmail 邮箱发送邮件 连接超时解决
- src下创建java文件_Eclipse下maven项目创建src/main/java 源文件夹报错文件文件已存在问题...
- B2:Unity制作Moba类游戏——聊天系统
- excel口令密码如何破解
- 下面整理了几种让网页变灰色的CSS代码,供各位站长参考!
- 为什么无名管道只能用于具有亲缘关系的进程间通信
- Unhandled event loop exception解决办法
- C语言 ——二维数组
- java电商面试问题以及回答,帮你解决90%的问题!