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