CSS样式重置表 斜切样式 宽度高度过渡

@charset "utf-8";
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input{
    margin:0;
    padding:0;
}
body{
    font-size:16px;
    font-family: "MicrosoftYaHei";
}
ul,li,ol{
    list-style:none;
}
em,i{
    font-style:normal;
}
b,strong{
    font-weight: normal;
}
a,u{
    text-decoration: none;
}
fieldset,input,img{
    border:0;
}
input{
    outline:none;
}
img{
    display:block;
}
h1,h2,h3,h4,h5,h6{
    font-weight: normal;
    font-size:16px;
}
textarea{
    resize:none;
}

/* 提前封装一些类 */
.float_l{
    float:left;
}
.float_r{
    float:right;
}
.border_none{
    border:none!important;
}
.bg_none{
    background:none!important;
}
.clear_fix:after{
    content:" ";
    clear:both;
    height:0;
    overflow:hidden;
    display:block;
    visibility: hidden;
}
.clear_fix{
    zoom:1;
}
/* 让单行文本省略号显示 */
.text_ellipsis{
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}
/* 让2行文本省略号显示 */
.two{
	   margin: 0 20px;
      font-size: 14px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden; //溢出内容隐藏
      text-overflow: ellipsis; //文本溢出部分用省略号表示
      display: -webkit-box; //特别显示模式
      -webkit-line-clamp: 2; //行数
      line-clamp: 2;
      -webkit-box-orient: vertical; //盒子中内容竖直排列
}
/* 让单行文本省略号显示无需设置宽度进行隐藏 */
.no_width_ellipsis{
	height: 44px;
    padding-left: 20px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 44px;
}
/* 让子元素在父元素里面左右上下居中 */
.dom_center{
    position: absolute;
    left:0;right:0;
    top:0;bottom:0;
    margin:auto;
}
/* 让元素在窗口左右上下居中 */
.dom_fixed{
    position: fixed;
    left:0;right:0;
    top:0;bottom:0;
    margin:auto;
}

// 斜切样式
-webkit-clip-path: polygon(0 0, 0 0, 200% 0, 47% 200%);
clip-path: polygon(0 0, 0 0, 200% 0, 47% 200%);

// 宽度高度过渡
.input-with-select { 
      height: 56px;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 9; 
      overflow: hidden;
      width: 0px;
      transition:width .3s ; 
    }
    &:hover {
      .input-with-select {
        display: inline-block !important; 
      	width: 233px;
      }
    }
————————————————
版权声明：本文为CSDN博主「人间艾斯卡诺」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42863800/article/details/103633203