构建前端第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的位置在外部式的后面
可以理解为:就近原则--离被设置元素越近优先级别越高

 

posted @ 2021-01-20 14:26  张艳涛&java  阅读(2310)  评论(0编辑  收藏  举报