一些Css记录

蓝湖:指定宽度: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属性:不用用户按鼠标就可以直接聚焦。适用于所有标签的类型。


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;
  }
}

双向绑定:


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 ;
} 

你可能感兴趣的:(一些Css记录)