CSS常用设置

　　样式初始化:

html,p,span,em,img,ins,kbd,q,b,i,dl,dt,dd,ol,ul,li,thead,tr,th,td,header{
  margin:0;
  padding:0;

}

body{
  margin: 0;
  border: 0;
}
em,i {
  font-weight:100;
  font-style:normal;
}
ul,ol,li {
  list-style-type:none;
}
a {
      color: black;
	text-decoration:none;
	outline:0;
}
a:hover {
	text-decoration:none;
}  

　　响应式媒体查询：

@media screen and (max-width:1200px){
 
}
@media screen and (max-width:900px ){
 
}
@media screen and (max-width:414px ){
 
}
@media screen and (max-width:331px ){
 
}

　　超出行数省略：

overflow:hidden;  //超出文本隐藏
 
text-overflow:ellipsis;  ///超出部分省略号显示
 
display:-webkit-box;  //弹性盒模型
 
-webkit-box-orient:vertical;  //上下垂直
 
-webkit-line-clamp:4;  //自定义行数

　　

　　字体间隔：

letter-spacing

　　控制输入框点击border：

#dz_input input:focus{
  border: 1px solid #2e2c2c;
}

　　flex居中：

display: flex;

  justify-content: center;

　　

　　border边距叠加处理：

border-collapse:collapse; //边距叠加问题

　　滚动条样式:

::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

  border-radius: 10px;
  background: #535353;

}
::-webkit-scrollbar-track {/*滚动条里面轨道*/

  -webkit-box-shadow: inset 0 0 5px rgba(54, 50, 50, 0.2);

  border-radius: 10px;

  background: #f3f1f1;

}
::-webkit-scrollbar {/*滚动条整体样式*/

  width: 7px;     /*高宽分别对应横竖滚动条的尺寸*/

  height: 1px;

}

　　渐变色文字：

<div> background-clip: text</div>

　　

div {
    margin: 50px auto;
    font-size: 54px;
    font-weight: bold;
    text-align: center;
    text-transform:uppercase;
    color: transparent;
    background: linear-gradient(45deg, #ffeb3b, #009688, yellowgreen, pink, #03a9f4, #9c27b0, #8bc34a);
    background-size: cover;
    background-position: center center;
    background-clip: text;
    animation: huerotate 3s infinite;
}

@keyframes huerotate {
    100% {
        filter: hue-rotate(360deg);
    }
}

　　文字颜色渐变：

.navList_box li:hover .nav_tit{
  background-position: 0% 50%;
}
.nav_tit{
  color: transparent;
  z-index: 33;
  font-size: 62px;
  background-image: linear-gradient(to right, rgb(207,152,105) 45%, rgb(112,112,112)  55%);
  background-size: 220% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -o-transition: all 0.8s;
}

　　

 　　字母大小写：

首个字母大写
text-transform : capitalize

全部实现转换为大写
text-transform : uppercase

全部小写
text-transform : lowercase

　　CSS三角形:

.logo_jiao{
  display: none;
  left: 3px;
  position: absolute;
  top: -50%;
  width: 0;
  height: 0;
  border-left: 1px solid transparent;
  border-right: 20px solid transparent;
  border-top: 15px solid #fff;
}
//常见于hover出现二维码

　　移动端超出滑动效果：

  overflow-x: auto;
  white-space: nowrap;

　　然后隐藏横向滚动条：

  #nav1_tag::-webkit-scrollbar{
    width: 0;
    height: 0;
  }