VUE-用到的样式左右（transform，translate，padding）

已于 2022-10-14 16:44:25 修改
阅读量2.2k 收藏 1
点赞数
分类专栏： vue web前端 文章标签： css vue 前端
于 2021-08-24 14:15:46 首次发布
本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45266979/article/details/119888654
版权

VUE-用到的样式左右

1.transform：translate
transform：translate(0,100%) 表示从元素的当前位置延y轴方向，向下移动整个元素高度的距离
transform：translate(-20px,0) 表示从元素的当前位置延x轴方向，向左移动20px

	//表示距离页面左侧450px,距离页面上侧120px
	//或者说向右移动450px,向下移动120px
  transform: translate(450px, 120px);

2.padding

/* 表示：  上内边距是 10px
    	右内边距是 5px
    	下内边距是 15px
    	左内边距是 20px*/
padding:10px 5px 15px 20px;
Coisini_甜柚か
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue 后台翻译_vue translate peoject实现在线翻译功能【新手必看】
weixin_39737317的博客
12-28 1049
开始这是一适合新手练习的小项目，一个在线翻译的demo。在正式开始前，先啰嗦一下，是一位网友给我的建议，就是不要强行组件化的问题 开始做Vue时我们可能会喜欢拆很多组件出来 但记住组件是为了复用(常见如公共菜单按钮栏等) 如非能够复用的情况其实并不用真的拆出组件来 。当然，这个项目里因为是练手，所以强行组件化来涉及更多的vue用法。目录结构src下新建了两个文件：TranslateForm.vue...
vuetranslate:VueJS插件翻译
05-17
Vue翻译 一个VueJS（1.x，2.0+）插件，用于基本翻译。 这是什么？ 是一个用于处理组件基本翻译的插件，它添加了mixin和指令以最舒适的方式对其进行处理。 像Vue-i18n吗？ 是的，不是，Vue-i18n是一个很棒的插件，比这个插件完整得多。 该句柄也可以翻译，但这是一个更基本的思想，并且文件更小（仅一个文件！）。 期待什么？ 只是翻译，就是这么简单。 例子 import Vue from 'vue' ; import VueTranslate from 'vue-translate-plugin' ; Vue . use ( VueTranslate ) ; var myComp = Vue . extend ( { template : `<div> {{ t('Hello World') }} <span v-transl
vue transition 动画
我们明天会更好的博客
07-19 117
1、html <div id="example"> <button @click="show = !show">Toggle show</button> <transition name="bounce"> <p v-if="show">Lorem ipsum dolor sit amet, consectetur adi...
vue+elementUI实现点击左右箭头切换按钮功能
最新发布
weixin_45904557的博客
04-30 726
如果放六个超出了,就设置一下button不换行 再给里面的文字设置超出显示省略号就好了。最后用button和element里面的el-carousel(走马灯)结合了一下。原本是可以用el-tabs做的,就像下面的样式,但是领导说不行。循环来生成足够的 Carousel 页面，存放所有的按钮。来选取每页6个按钮，确保在当前页面范围内显示正确的按钮。：这是 Carousel 的每一页, 用。循环来生成每一页中的6个按钮。计算出需要多少页，每页6个按钮。表示每页显示6个按钮。
基于vue transform: translateY 上下滑动实现
hanwei020502的博客
09-23 5134
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、基于vue transform: translateY 上下滑动实现 二、使用步骤 总结 前言 提示：这里可以添加本文要记录的大概内容： 提示：以下是本篇文章正文内容，下面案例可供参考 一、基于vue transform: translateY 上下滑动实现？ javaScript -- touch事件详解（touchstart、touchmove和touchend） touchsta..
Vue项目引入translate.js 国际化自动翻译组件
weixin_46607967的博客
11-15 5266
建议 translate.js 配合 i18 使用本文只介绍 translate.js 的引入和使用方式无论什么库 在翻译上 都不会做到 （ 100%翻译 && 100%准确 ） 所以不要吹毛求疵。
vue页面添加背景滚动动画（translate实现）
weixin_44258964的博客
04-01 1693
vue的背景动画
babel-plugin-transform-vue-jsx:vue 2.0 jsx的babel插件
05-02
babel-plugin-transform-vue-jsx Vue 2.0 JSX的Babel插件 Babel相容性说明 如果使用Babel 7，请使用4.x 如果使用Babel 6，请使用3.x 要求 假设您将Babel与模块捆绑器（例如Webpack）一起使用，因为扩展合并帮助器...
vue-element-admin中文版本
07-20
该资源为一个后台管理系统，为vue-element-admin在git下搭建而成
vue-panzoom:Vue插件到zoompan dom元素
04-30
import Vue from 'vue' import App from './App.vue' // import vue-panzoom import panZoom from 'vue-panzoom' // install plugin Vue . use ( panZoom ) ; new Vue ( { render : h => h ( App ) , } ) . $mount ...
vue-print-nb 兼容低版本浏览器
11-28
vue-print-nb 兼容低版本浏览器 import Print from '@/lib/vue-print-nb/print.umd.min'Vue.use(Print)
vue translate peoject实现在线翻译功能【新手必看】
08-27
主要介绍了vue translate peoject实现在线翻译功能，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-auto-routing：自动生成Vue路由器路由
02-27
// Import generated routesimport routes from 'vue-auto-routing'import Vue from 'vue'import Router from 'vue-router'Vue . use ( Router )export default new Router ( { // Pass the generat
Vue-在线翻译工具
caott666的博客
08-13 1505
一、核心目录结构 涉及的内容 V型，V系列 组件通信：$放出，道具 翻译服务的API：第三方翻译服务商，申请可以免费的金钥https://translate.yandex.com/developers/keys App.vue &lt;template&gt; &lt;div id="app" &gt; &lt;h1&gt;在线翻译&lt;/h1&gt; &lt...
pytorch transforms将图像padding成正方形
一个菜鸟的奋斗
08-25 2604
我的目标是在不要改变原图中物体的长宽比例的前提下，将图像变成一个正方形。SquarePad可以将图像短的一边padding到与长边一致，再将该正方形做一个resize，就可以保证内部物体比例不会发生改变了。
vue 轮播图(translate)带缓动效果
weixin_44042792的博客
04-08 1055
<template> <div class="system-num" :style="{ width: contentWidth + 'px' }"> <div class="prev" @click="prevHandle" :style="{ width: btnWidth + 'px' }" :class="{ 'btn-opacity': index == 0 }" > ...
vue对接谷歌翻译
bright的博客
10-10 3339
1.安装依赖 npm install --save google-translate-open-api 2.使用 import translate from 'google-translate-open-api'; const result = await translate(`I'm fine.`, { tld: "cn", to: "zh-CN", }); const data = result.data[0]; git地址： https://gitee.com/jsqiufeng/goog
vue 响应式页面使用transform实现
weixin_46328739的博客
12-21 712
index.js 文件中定义了一个名为 throttle 的函数，用于实现函数节流的功能。该函数接收两个参数：fn 表示要执行的函数，delay 表示延迟时间。为了在 Vue 应用中实现一个响应式页面缩放功能，使页面能够根据屏幕大小自动进行缩放。通过监听窗口大小变化事件，并结合节流函数和 resize 函数，实现了页面元素的动态缩放效果。但是希望页面缩放后尽量保持原样，所以使用了两套UI，1920和1024,根据页面缩放监听resize动态添加类名进行实现的响应式，因此封装了scss函数。
巧妙使用 translate(-50%,-50%)
吴佳强的博客
07-10 798
如果知道宽高 正常使用 绝对定位，left: 50;top:50%; margin-left: -width / 2; margtin-top:-height/2; 在 不知道宽高的情况下，如何做？ translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。
vue-baidu-map如何在bm-polygon组件上显示文字
05-05
transform: translate(-50%, -50%); } ``` ```html <bm-label v-for="(polygon, index) in polygons" :key="polygon.id" :forId="polygon.id" :content="polygon.label" style="text-align:center;"></bm-label> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Coisini_甜柚か

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值