css 记录

段落属性

p{
    /*  font-family: "楷体","宋体";
        font-variant: small-caps;*/
        /*文字属性的简写形式*/
        /*font: 40px/50px "serif";*/       /*大小 行高*/
        /*text-decoration: underline;*/   /*下滑线*/
        /*text-align: center; */         /*一般用于单行文本居中*/
        /*text-indent:220px; */         /* 首行缩进*/
        /*line-height: 150px;*/     /*行高*/
        /*word-spacing:20px;*/      /*单词间隔*/
        /*letter-spacing:30px; */         /*字符间隔*/
        /*text-transform: uppercase;*//*转换成大写字母*/
        /*text-transform: lowercase;*//*转换成小写字母*/
        /*text-transform: capitalize;*//*首字母大写*/
    
    }
    
    img{
        // vertical-align:middle;
        vertical-align:top;
        /*vertical-align:bottom;*/
    }

背景属性

div{
    height:400px;
    width: 1700px;
    background-color: red;
    background-image: url(img/img5.jpg); 
    
    background-repeat: no-repeat;
    /*background-repeat: repeat-x;*/  /* 图片像素小于背景盒子时，重复排列效果*/
    /*background-repeat: repeat-y;*/

    /*background-position:0 -110px;*/  /*图片显示在盒子里的位置 x不动，y向下110个像素*/

    /*background :color image repeat position attachment;*/
    /*background:red url(img/4.jpg) 20px -30px no-repeat fixed;*/
    /*background-size:100% 100%;     /*不等比例放大填充*/
    background-size:cover:;          /*等比例放大后填满*/
  /*background-size:contain:;*//*使原始图像的宽度或高度完全等于盒子的宽度或高度*/
      background: url('./0.jpg') background-position/background-size no-repeat;  //position size组合  用 / 隔开
}
/*父盒子高度由背景图大小自动撑开,保质背景图不拉升失真*/  
.box{
        width: .5rem;
        background: #ddd;
        position: relative;
    }
.box::after{
        content: ' ';
        display: block;
        padding-top: 280%;   // height/width*100%
        background: url('./0.jpg') 10px/cover no-repeat;
}
//图片自适应填充 类似背景图的 background-size:cover:
img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

圆角 阴影 渐变

.div1{
    width:100px;
    height:100px;

    margin-top:10px;     /*框距*/
    margin-right:20px;
    margin-bottom:30px;
    margin-left:40px;
    
    box-shadow:2px 2px 12px #666;   /*阴影*/
    text-shadow:2px 2px 2px #666;
    
    white-space:nowrap;
        overflow: hidden;              /*不显示的字省略号代替*/       
        text-overflow: ellipsis;

background: linear-gradient(to top,red,yellow); /* 线性渐变；*/
/*background: radial-gradient(red,yellow);  */   /*径性渐变*/
}     

清除浮动

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
      content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }
  .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
   }

  .clearfix:after,.clearfix:before{
            content: "";
            display: table;
        }
        .clearfix:after{
            clear: both;
        }
        .clearfix{
            *zoom: 1;
        }

不显示的字省略号代替

white-space:nowrap;
overflow: hidden;      
text-overflow: ellipsis;

超出3行省略号代替

overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

隐藏滚动条

    //兼容火狐
    /*三角箭头的颜色*/
    scrollbar-arrow-color: #ddd;
    /*滚动条滑块按钮的颜色*/
    scrollbar-face-color: rgba(250, 250, 250, 0.3);
    /*滚动条整体颜色*/
    scrollbar-highlight-color: #ddd;
    /*滚动条阴影*/
    scrollbar-shadow-color: rgba(250, 250, 250, 0.3);
    /*滚动条轨道颜色*/
    scrollbar-track-color: #ddd;

      ::-webkit-scrollbar {
            width: 10px;
            height: 6px;
            background-color: #29326d;
            border-radius: 6px;
        }
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 6px;
            background-color: #29326d;
        }
        ::-webkit-scrollbar-thumb {
            border-radius: 6px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #4276bd;
            cursor: pointer;
        }

居中

• 已知高度1   width: 600px;  height: 400px;   
  

  position:absolute;
  left: 50%;
  top: 50%;   
  margin-top: -200px;\/* 高度的一半 */\  
  margin-left: -300px;\/* 宽度的一半 */\

• 已知高度2
  

  position: absolute;//
  left: 0;
  top: 0;
  right: 0; 
  bottom: 0;   
  margin: auto;

• 已知高度3
  

 /*父级垂直居中*/
  display: flex;
  align-items: center;
/*自己本身设置水平居中*/
   margin: 0 auto;

•  未知高度
  

  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform:translate(-50%,-50%);

画一个三角形

 .a{
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent #0099CC transparent transparent;
            transform: rotate(90deg); /*顺时针旋转90°*/
 }

<div class="a"></div>