蓝湖:指定宽度:1875px
padding不能使用负值
background: -webkit-linear-gradient(to right, #6291E0 , #64ACE7);
background: linear-gradient(to right, #6291E0 , #64ACE7);
自动换行:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
justify-content:space-around;
align-self: flex-end;
align-self:center;
flex-direction: column;
autofocus属性:不用用户按鼠标就可以直接聚焦。适用于所有<input>标签的类型。
<input type="text" name="text" autofocus="autofocus"/>
box-shadow: 0px -2px 5px 0px #e6e6e6;
li{
list-style:none;
}
在display布局中,使用flex:1,那么能够让这一部分自适应剩余宽度。
当flex布局的时候,使用flex:1的部分,如过用white-space:nowrap那么布局会错乱。这时候给flex:1的部分加上min-width:0,就可以了。
参考:https://blog.csdn.net/honiler/article/details/81155026
垂直居中:
// 方法1
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
}
// 2
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
// 3
.wraper {
.box {
display: flex;
justify-content:center;
align-items: center;
height: 100px;
}
}
双向绑定:
<input id="input"/>
const data = {};
const input = document.getElementById('input');
Object.defineProperty(data, 'text', {
set(value) {
input.value = value;
this.value = value;
}
});
input.onChange = function(e) {
data.text = e.target.value;
}
jsp中使用vue
[v-cloak] {
display:none !important;
}
修改placeholder默认颜色
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #fff;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #fff;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #fff ;
}