张艳涛写于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的位置在外部式的后面
可以理解为：就近原则--离被设置元素越近优先级别越高

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

  1. div style标签内嵌CSS样式

    我们在DIV标签内.SPAN标签内.p标签等html标签内使用style属性直接设置div的样式. 一.在<div>标签内使用style设置css样式   -   TOP 1.实例html ...

  2. Spring Boot 揭秘与实战（五） 服务器篇 - 其他内嵌服务器 发表于 2017-01-03 | Spring框架 | Spri

    文章目录 1. Jetty 的切换 2. Undertow的使用 Spring Boot 可选择内嵌 Tomcat.Jetty 和 Undertow,因此我们不需要以 war 包形式部署项目.< ...

  3. 『Asp.Net 组件』Asp.Net 服务器组件 内嵌CSS：将CSS封装到程序集中

    代码: <span style="font-family:Microsoft YaHei; font-size:12px">using System; using Sy ...

  4. [Web 前端] 031 bootstrap 的使用和全局 css 样式

    目录 0. 前言 1. 基本模板 2. 布局容器 2.1 container 2.2 container-fluid 3. 栅格系统 3.1 简介 3.2 栅格参数 3.3 实例:从堆叠到水平排列 2 ...

  5. 构建前端第12篇之---在Vue中对组件,变量,函数的全局引入

    张燕涛写于2020-01-16 星期two 本篇还是源于import和export的使用,昨天看es6入门 和MDN文档,大体上用法了解了,但今天看ElementUI源码的时候,看到 //src/in ...

  6. 构建前端第7篇之---elementUI设置主题,进而改变全局button底色

    张艳涛写于2020-1-20 What:是elementUI主题? 是内置的格式,elementUI默认只有一个主题,如果想整体替换按钮的颜色等问题,那么就可以用主题 设置步骤 在路径src/styl ...

  7. 构建前端第2篇之--ESLint 配置

    张艳涛 写于2021-1-19 报错: http://eslint.org/docs/rules/space-before-function-paren Missing space before fu ...

  8. 构建前端第13篇之---VUE的method:{}的括号未括到方法导致 _vm.linkProps is not a function

  9. 构建前端第10篇之---Function.prototype.call()

    张艳涛写于2020-01-25,参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ ...

随机推荐

  1. Django基础之cookie与session

    cookie与session 由来及简介 HTTP协议四大特性 1.基于请求响应 2.基于TCP.IP作用于应用层之上 3.无连接 4.无状态 基于HTTP协议的通信无法记录客户端状态 但是现在很多软 ...

  2. HTTP请求方法及响应状态码详解

    HTTP请求方法和响应状态详解 HTTP请求方法 HTTP1.0/1.1支持的所有请求方法如下所示: GET 用来请求访问已被URI识别的资源.指定的资源经服务器解析后返回响应内容. POST POS ...

  3. Java8-四个函数式接口(Consumer,Supplier,Predicate,Function)

    Java8---函数式接口 Consumer---消费者(accept方法,Lambda与方法引用返回都是Consumer) Supplier---供给型(get方法,返回数据,与Optional可以 ...

  4. Fiber 树的构建

    我们先来看一个简单的 demo: import * as React from 'react'; import * as ReactDOM from 'react-dom'; class App ex ...

  5. WEB安全新玩法 [6] 防范图形验证码重复使用

    在完成关键业务操作时,要求用户输入图形验证码是防范自动化攻击的一种措施.为安全起见,即使针对同一用户,在重新输入信息时也应该更新图形验证码.iFlow 业务安全加固平台可以加强这方面的处理. 某网站系 ...

  6. 关于使用Draw.io画数据库E-R图的说明

    背景简介 E-R图也称实体-联系图(Entity Relationship Diagram),提供了表示实体类型.属性和联系的方法,用来描述现实世界的概念模型. diagrams.net是用于构建图表 ...

  7. 31、服务器磁盘、内存、cpu使用率监控

    31.1.监控磁盘: #!/bin/sh diskspace="`df -hT`" IFS="\n" disk_value="80" ech ...

  8. ps 合并两张图片

    1.ps 打开第一张图片,2.打开另一张图片为图层.3.选中图层,创建蒙版: 4.点击蒙版+按Alt键,打开蒙版:5.打开蒙版后选中渐变工具,途中黑色为不显示区域,(注意渐变模式要改为正常):6.调整 ...

  9. 重启outlook的bat脚本

    @echo off :openie echo -------------closeing outlook---------- taskkill /f /t /im OUTLOOK.exe echo - ...

  10. python字典和列表使用

    一.字典中健值为列表或字典 1 a.setdefault(key,[]).append(b)--键值是列表 2 a.setdefault(key,{}).append(b)--键值是字典 二.键值为列 ...