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

已于 2022-10-14 16:44:25 修改
阅读量2.3k 收藏 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中transform属性的使用，包括translate函数如何实现元素的平移，以及padding属性设置元素内部间距的方法。通过实例解释了translate(0,100%)、translate(-20px,0)和translate(450px,120px)的效果，以及padding的四边不同值的设置方式。文章旨在帮助开发者更好地理解和运用这些CSS技巧。
摘要由CSDN通过智能技术生成

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-Element-Admin（十）：HTML和CSS快速学习笔记
叶子叶来
05-11 742
目录 html标签分类 网页布局 盒子模型 浮动 定位 css标签选择 flex布局 transform转换 Vue开发tips less和scss VScode常用插件 后端语言框架很多，Java适合企业级应用（规范且稳定），Go适合高并发场景（比如云上产品），Python框架（bottle，tornado，django）简单且快速，也天然适合数据分析场景，PHP适合快速建站，前端变化小，所见即所得，因此抽空记录下学习笔记。 如果把页面理解成一台运转的机器，html使用标签（..
Vue和Vue-Element-Admin（十一）：axios，mockjs和vuex
叶子叶来
05-17 772
axios，mockjs和vuex在开发/生产环境基本是耦合的，axios完成请求发送/接收及封装，mockjs进行数据的拦截/模拟，vuex进行本地数据存储及全局变量维护。 以登录场景为例，登录表单el-form标签绑定form.item数据，el-input分别对应item.username和item.passwd，点击登录的button触发login()方法，入参即item数据，login()方法使用被axios统一封装的request（增加baseurl，请求头等）发起http请求，mockjs拦截
transform: translateY(-100%)偏移实现上滑隐藏导航栏
热门推荐
魏少
07-03 2万+
transform:translateY(100%) 语法： Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，老样子，我们就从transform的语法开始吧。 语法： transform ： none ; 也就是： tran...
vue 后台翻译_vue translate peoject实现在线翻译功能【新手必看】
weixin_39737317的博客
12-28 1082
开始这是一适合新手练习的小项目，一个在线翻译的demo。在正式开始前，先啰嗦一下，是一位网友给我的建议，就是不要强行组件化的问题 开始做Vue时我们可能会喜欢拆很多组件出来 但记住组件是为了复用(常见如公共菜单按钮栏等) 如非能够复用的情况其实并不用真的拆出组件来 。当然，这个项目里因为是练手，所以强行组件化来涉及更多的vue用法。目录结构src下新建了两个文件：TranslateForm.vue...
深入理解 Vue 中的 Transition 组件
最新发布
My_wife_QBL的博客
07-02 1390
</p>data() {return {show: true
基于vue transform: translateY 上下滑动实现
hanwei020502的博客
09-23 5216
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、基于vue transform: translateY 上下滑动实现 二、使用步骤 总结 前言 提示：这里可以添加本文要记录的大概内容： 提示：以下是本篇文章正文内容，下面案例可供参考 一、基于vue transform: translateY 上下滑动实现？ javaScript -- touch事件详解（touchstart、touchmove和touchend） touchsta..
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项目引入translate.js 国际化自动翻译组件
weixin_46607967的博客
11-15 6913
建议 translate.js 配合 i18 使用本文只介绍 translate.js 的引入和使用方式无论什么库 在翻译上 都不会做到 （ 100%翻译 && 100%准确 ） 所以不要吹毛求疵。
vue页面添加背景滚动动画（translate实现）
weixin_44258964的博客
04-01 1719
vue的背景动画
nuxt.js框架使用vue-waterfall-easy插件如何引入--语法引用
weixin_45041261的博客
05-31 1533
实话：我之前完全不知道vue-waterfall-easy这个插件，当我看到需求瀑布流+无限滚动的时候，我脑子里想的还是flex布局。。。 我们大佬说“你自己写的瀑布流+无限滚动肯定会出问题的”，然后我就果断放弃了（毕竟我是一个还没有入门的菜鸡），大佬给我普及了这个插件以及在vue中如何使用，让我自己找一找在nuxt里面的引入方法（这个任务，我也很果断，20分钟没有头绪，直接回头找大佬，哈哈哈哈哈哈） 所以在这里再总结一下引入的方法（使用方法我也是一知半解，探索中，所以不敢胡乱BB）。 这次在nuxt的引入
Vue 使用 vue-cropper实现图片裁剪
gooodi的博客
07-26 2140
1.安装vue-cropper 使用npm本地安装vue-cropper npm install vue-cropper --save-dev 2.实现代码 <template> <div> <div> <div class="pos movediv" :style="cutPhotomodel?'z-index:10':'z-in...
vue translate peoject实现在线翻译功能【新手必看】
08-27
主要介绍了vue translate peoject实现在线翻译功能，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
使用ant-design-vue和vue-cropper实现裁剪图片并上传到服务器
年轻人
02-13 2741
安装vue-cropper npm install vue-cropper 在main.js里面使用 import VueCropper from 'vue-cropper' Vue.use(VueCropper) 需求： 用户上传图片后，需要裁剪，并保留，上传到服务器 思路： 点击上传，从本地选择图片文件 选择文件后弹出模态框（将选择的图片传递过去） 模态框作为裁剪图片的容器 进行裁剪 获取...
Vue-在线翻译工具
caott666的博客
08-13 1524
一、核心目录结构 涉及的内容 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...
vue 响应式页面使用transform实现
weixin_46328739的博客
12-21 1178
index.js 文件中定义了一个名为 throttle 的函数，用于实现函数节流的功能。该函数接收两个参数：fn 表示要执行的函数，delay 表示延迟时间。为了在 Vue 应用中实现一个响应式页面缩放功能，使页面能够根据屏幕大小自动进行缩放。通过监听窗口大小变化事件，并结合节流函数和 resize 函数，实现了页面元素的动态缩放效果。但是希望页面缩放后尽量保持原样，所以使用了两套UI，1920和1024,根据页面缩放监听resize动态添加类名进行实现的响应式，因此封装了scss函数。
pytorch transforms将图像padding成正方形
一个菜鸟的奋斗
08-25 2769
我的目标是在不要改变原图中物体的长宽比例的前提下，将图像变成一个正方形。SquarePad可以将图像短的一边padding到与长边一致，再将该正方形做一个resize，就可以保证内部物体比例不会发生改变了。
vue 轮播图(translate)带缓动效果
weixin_44042792的博客
04-08 1066
<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 3513
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内置组件Transition的详解
qq_44741577的博客
04-15 3695
会在一个元素或组件进入和离开 DOM 时应用动画。会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。简单地说，就是当元素发生变化，比如消失、显示时，添加动画让它更自然过渡。它是vue内置组件，不需要引入注册就可以直接使用。通过name可以自定义的过渡类名。注意：里面只能有一个根组件，但使用v-if、v-else、v-else-if切换显示是可以的。如果想对列表中的元素设置过渡，可以使用。
vue-baidu-map如何在bm-polygon组件上显示文字
05-05
要在`bm-polygon`组件上显示文字，你可以通过以下步骤实现： 1.通过Vue的`v-for`指令循环渲染多个`bm-polygon`组件，每个组件对应一个多边形，同时设置一个唯一的`id`属性，如下所示： ```html <template> <div> <bm-polygon v-for="(polygon, index) in polygons" :key="polygon.id" :id="polygon.id" :path="polygon.path"></bm-polygon> </div> </template> ``` 2.在每个`bm-polygon`组件后面添加一个`bm-label`组件，同时绑定`forId`属性和`content`属性。`forId`属性的值应该与对应的`bm-polygon`组件的`id`属性相同，`content`属性的值则为你要显示的文字内容，如下所示： ```html <template> <div> <bm-polygon v-for="(polygon, index) in polygons" :key="polygon.id" :id="polygon.id" :path="polygon.path"></bm-polygon> <bm-label v-for="(polygon, index) in polygons" :key="polygon.id" :forId="polygon.id" :content="polygon.label"></bm-label> </div> </template> ``` 3.在Vue组件的`data`选项中定义多个多边形对象，每个对象包含一个唯一的`id`属性、一个`path`属性表示多边形的路径、一个`label`属性表示要显示的文字内容，如下所示： ```js export default { data() { return { polygons: [ { id: 'poly1', path: [ {lng: 116.191031, lat: 39.988585}, {lng: 116.41248, lat: 39.908718}, {lng: 116.382905, lat: 39.947246} ], label: '多边形1' }, { id: 'poly2', path: [ {lng: 116.191031, lat: 39.988585}, {lng: 116.233516, lat: 39.909187}, {lng: 116.191031, lat: 39.876516}, {lng: 116.148546, lat: 39.909187}, {lng: 116.191031, lat: 39.988585} ], label: '多边形2' } ] } } } ``` 4.在`bm-polygon`组件和`bm-label`组件中分别设置样式，以及`bm-label`组件中设置`style`属性来控制文字的样式和位置，如下所示： ```css <style scoped> .bm-polygon { fill-opacity: 0.5; stroke: #333; stroke-width: 2; } .bm-label { font-size: 14px; color: #fff; background-color: #f00; padding: 5px; border-radius: 5px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> ``` ```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、付费专栏及课程。

余额充值