Vue中的padding填充。

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

文章目录

• 前言
• 代码事例
• 总结

---

前言

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

---

一、使用步骤

代码如下（示例）：

片段一

<template>
  <div class="app">
    <!-- <img src="./assets/logo.png" alt="logo"> -->
    <student name="张三" sex="男" age="23"/>
    <School/>
  </div>
</template>

<script>
    //引入组件
    import Student from './components/Student.vue'
    import School from './components/School.vue'
    export default {
        name:'App',
        components:{
            Student,
                School
        }
    }
</script>

<style>
  .app{
    background-color: gray;
    padding-left: 65px;
  }
</style>

片段二

<template>
    <!-- //组件的结构 -->
    <div class="student">
        <h2>学生姓名：{{ name }}</h2>
        <h2>学生性别：{{ sex }}</h2>
        <h2>学生年龄：{{ age }}</h2>
    </div>
</template>

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

片段三

<template>
    <!-- //组件的结构 -->
    <div class="school">
        <h2>学校名称：{{ name }}</h2>
        <h2>学校地址：{{ address }}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    // 组件交互相关的代码（数据、方法等等）
    export default{
        name:'School',
        // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
        data(){
            return{
                name:'尚硅谷',
                address:'北京昌平'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        }   
    }
</script>

<style >
  .school{
    background-color: skyblue;
    padding-left:200px;
  }
</style>

---

总结:

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

<style>

  .app{

    background-color: gray;

    padding-left: 65px;

    padding-right: 65px;

  }

</style>

样式则改为：

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 像素。