构建前端第6篇之---内嵌css样式 <el-button style="width:100%"> 登录 </el-button>

张艳涛写于2021-1-20日

What: 如何让button的长度和input长度一致呢

最先想到的是给这个button加一个class ="buttonclass",然后在vue最后的<style标签中>设置

.buttonclass {
    width : 100%;
}

这个前两篇设置height为100%的方法是一致的.

还有一个更简单的方法就是内联式css

<el-form-item><el-button > 登录 </el-button></el-form-item>

并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：

<p style="color:red;font-size:12px">这里文字是红色。</p>

三种插入样式的优先级：

三种插入样式优先级从高到底为：内联式>嵌入式>外部式
其中嵌入式>外部式的条件为：嵌入式CSS的位置在外部式的后面
可以理解为：就近原则--离被设置元素越近优先级别越高