Vue中的padding填充。

2023-06-06 14:52| 来源: 网络整理| 查看: 265

简单介绍一下Vue中的style部分中的padding样式是如何用的。

文章目录前言代码事例总结

前言

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。：

一、使用步骤

代码如下（示例）：

片段一

//引入组件 import Student from './components/Student.vue' import School from './components/School.vue' export default { name:'App', components:{ Student, School } } .app{ background-color: gray; padding-left: 65px; }

片段二

学生姓名：{{ name }} 学生性别：{{ sex }} 学生年龄：{{ age }} export default{ name:'Student', // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器 data(){ return{ } }, props:['name','age','sex'] } .student{ background-color: pink; padding-left: 105px; margin-top: 30px; }

片段三

学校名称：{{ name }} 学校地址：{{ address }} 点我提示学校名 // 组件交互相关的代码（数据、方法等等） export default{ name:'School', // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器 data(){ return{ name:'尚硅谷', address:'北京昌平' } }, methods: { showName(){ alert(this.schoolName) } } } .school{ background-color: skyblue; padding-left:200px; } 总结:

在以上代码中App.vue的style样式在最底层，在调整粉色和天蓝色样式离着边距的距离时需要修改的是App.vue中的padding。例如将其中代码改为

.app{

background-color: gray;

padding-left: 65px;

padding-right: 65px;

}

样式则改为：

padding 是一个 CSS 属性，用于设置元素的内边距。内边距是指元素的内容与其边框之间的空间。

padding 属性可以接受一个或多个值，用于设置元素的上、右、下、左四个方向的内边距。如果只提供一个值，则这个值会应用于所有四个方向。例如，padding: 10px 会将元素的上、右、下、左四个方向的内边距都设置为 10 像素。

如果提供两个值，则第一个值会应用于上下方向，第二个值会应用于左右方向。例如，padding: 10px 20px 会将元素的上下方向的内边距设置为 10 像素，左右方向的内边距设置为 20 像素。

如果提供三个值，则第一个值会应用于上方向，第二个值会应用于左右方向，第三个值会应用于下方向。例如，padding: 10px 20px 30px 会将元素的上方向的内边距设置为 10 像素，左右方向的内边距设置为 20 像素，下方向的内边距设置为 30 像素。

如果提供四个值，则分别应用于上、右、下、左四个方向。例如，padding: 10px 20px 30px 40px 会将元素的上方向的内边距设置为 10 像素，右方向的内边距设置为 20 像素，下方向的内边距设置为 30 像素，左方向的内边距设置为 40 像素。

【本文地址】

公司简介

联系我们