一、常用样式
1.设置滚动条
<html>
overflow: auto; // x 和 y
overflow-x: auto; // x
overflow-y: auto; // y
</html>
2.设置省略号
<html>
text-overflow: ellipsis;
white-space: nowrap;
</html>
3.设置高度自适应
<html>
height: auto;
white-space:normal; word-break:break-all;overflow:hidden;
</html>
4.高度算法
<html>
采用算法，加减补齐
height=100%
height: calc(100vh - 55px)
style="height: calc(100% - 35px);"
overflow: auto;
</html>
5.按钮样式
<html>
1、下载
<el-button circle title="下载模板" @click="downloadExcel">
<i class="fa fa-download" aria-hidden="true"/>
</el-button>
2、上传
<el-button circle title="导入" @click="importData">
<i class="fa fa-upload"></i>
</el-button>
3、新增/添加设备/添加物资
<el-button circle title="新增" @click="onCommentAdd('commentForm')">
<i class="fa fa-plus" aria-hidden="true"/>
</el-button>
4、修改
<el-button circle title="修改" @click="updateStock()">
<i class="fa fa-pencil"></i>
</el-button>
5、删除
<el-button circle title="删除" @click="deleteStock()">
<i class="fa fa-trash"></i>
</el-button>
6、保存
<el-button circle title="保存" @click="saveStock('form')">
<i class="fa fa-file-text-o"></i>
</el-button>
7、返回
<el-button circle title="返回" @click="onCancel">
<i class="el-icon-back" aria-hidden="true"/>
</el-button>
8、取消
<el-button circle title="取消" @click="onCancel">
<i class="fa fa-times"></i>
</el-button>
9、打印
<el-button circle title="打印" @click="print">
<i class="fa fa-print"> </i>
</el-button>
10、审核/提交
<el-button circle title="审核" @click="checkStock()">
<i class="fa fa-check"></i>
</el-button>
*************************************************************************
弹窗：
浓厚：
<el-button type="success" size="mini" @click="load"><i class="el-icon-search">查询</i></el-button>
<el-button type="warning" @click="resetSearch"><i class="el-icon-refresh">重置</i></el-button>
<div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 38px;margin-right: 5px;">
<el-button @click="cancelMaterial">取 消</el-button>
<el-button type="primary" @click="getAllMaterial">确 定</el-button>
</div>
清淡：
<el-button plain type="primary" @click="fetchData"><i class="el-icon-search">搜索</i></el-button>
<el-button plain type="warning" @click="resetSearch"><i class="el-icon-refresh">重置</i></el-button>
<div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 5px;margin-right: 5px;">
<el-button plain size="mini" @click="cancelMaterial">取 消</el-button>
<el-button plain size="mini" type="primary" @click="getAllMaterial">确 定</el-button>
</div>
</html>
6.按钮颜色
<html>
<input type="button" value="添加" class="btn btn-success" @click="add">
按钮对应的class为：
灰白色：btn
浅蓝色：btn btn-primary
天蓝色：btn btn-info
深绿色：btn btn-success
菊黄色：btn btn-warning
深红色：btn btn-danger
黑 色：btn btn-inverse
</html>
二、DIV
1.并排显示
<html>
在HTML中让两个div并排显示bai，通常情况下有三种实现方式，du包括:
（1）设置为行内样式，display:inline-block
（2）设置float浮动
（3）设置position定位dao属性为absolute
以下为三种方式的具体实现代码：
1、设置每个div的展现属性为行内样式，示例代码为：
<div class="app">
<div style="display:inline-block;background:#f00;">div1</div>
<div style="display:inline-block;background:#0f0;margin-left:10px;">div2</div>
</div>
2、设置float浮动，示例代码为：
<div class="app">
<div style="float:left;background:#f00;">div1</div>
<div style="float:left;background:#0f0;margin-left:10px;">div2</div>
</div>
3、设置position定位属性为absolute, 示例代码为：
<div class="app">
<div style="position: absolute;width:100px;background:#f00;">div1</div>
<div style="position: absolute;left:100px;background:#0f0;margin-left:10px;">div2</div>
</div>
扩展资料：
css清除浮动方法
（1）添加新的元素 、应用 clear：both
.clear {
clear: both;
height: 0;
height: 0;
overflow: hidden;
}
（2）父级div定义 overflow: auto
.over-flow {
overflow: auto;
zoom: 1; //处理兼容性问题
}
（3）伪类 :after 方法 outer是父div的样式
.outer { zoom:1; } /*==for IE6/7 Maxthon2==*/
.outer :after {
clear:both;
content:'.';
display:block;
width: 0;
height: 0;
visibility:hidden;
}
</html>
三、Input
1.漂浮显示
<html>
<input onmouseover="this.title=this.value"/>
如果input里面的内容固定,或者悬浮显示div里面的文字,需要悬浮显示,可以直接写为
<input title="这个是悬浮显示的文字"/> ,<div title="这个是悬浮显示的文字"></div>
vue中悬浮的内容是变化的，可以用 : 绑定数据
<el-input :title="item.value" v-model="item.value" :disabled="disabledYanqi"></el-input>
</html>