CSS笔记

1、弹框带区域
        

        padding: 15px;
        width: 180px;
        background: #fff;
        box-sizing: border-box;
        border-radius: 10px;

2、两个div在同一行
      display: flex
3、虚线 
    divCss{border-bottom:1px dotted #C0C0C0;}
4、字体颜色
      #666

5、flex布局（Uni-app）

     display: flex;
     justify-content: flex-end; /**水平位置*/
     align-items: flex-end; /**垂直位置*/
     flex-direction: column; /**按列垂直布局*/
     flex-shrink: 0; /**0不被压缩 1被压缩*/
     flex: 1; /** 1平均填充,按份数比例平均分配*/
     align-self: flex-end; /**置于底部，例如重写align-items的值*/

     display:flex;
     flex-direction:row | row-reverse | column | column-reverse;
     flex-wrap: nowrap | wrap | wrap-reverse;
     justify-content: flex-start | flex-end | center | space-between | space-around;
     align-items: flex-start | flex-end | center | baseline | stretch;
     align-content: flex-start | flex-end | center | space-between | space-around | stretch;
     flex-shrink: 0,不被压缩
     align-self: auto | flex-start | flex-end | center | baseline | stretch; 

     
     
             
     
     

6、flex:1; 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
     flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
     overflow ：visible|hidden|scroll|auto|inherit
     border-bottom: 1upx solid #EEEEEE; 画一条线
     position ：absolute|fixed|relative|static|sticky|inherit|initial 相对布局，一般小范围外div是relative，内多个div是absolute，然后根据right、left等来绝对定位

7、line-height:normal|number|length|%|inherit  行高:
   flex-grow :number 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
   -moz- 代表Firefox
   -webkit- 代表 Safari and Chrome
    -ms- 代表IE
   opacity: 指定不透明度。从0.0（完全透明）到1.0（完全不透明）
   content content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。 如a:after {content: " (" attr(href) ")";}
   white-space:normal|pre 空白会被浏览器保留|nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。|pre-wrap|pre-line|inherit 
   text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。none|underline|overline|line-through|blink|inherit

8、background-attachment：scroll|fixed|inherit 设置背景图像是否固定或者随着页面的其余部分滚动。
   letter-spacing：normal|length|inherit 属性增加或减少字符间的空白
   text-indent：length|%
   border-style:dotted solid double dashed; 属性设置一个元素的四个边框的样式。此属性可以有一到四个值
   上边框是点状
   右边框是实线
   下边框是双线
   左边框是虚线

9、在flex布局时，有时width:100%时，并不是充满整个屏幕，此时加一个flex:1，就可以充满屏了

10、 弹框写法

   .paper-left-popup{
        position: fixed;
        right: 0;
        top: 10upx;
        background: #FFFFFF;
        z-index: 2000;
        width: 55%;
        box-shadow: 1upx 1upx 20upx 2upx #CCCCCC;
    }

12、 蒙板写法
       

        position: fixed;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        background: black;
        filter:Alpha(Opacity=40);
        opacity:0.4;
        z-index: 1999;

13、flex: 1; 在绝对定位，其它组件设置了固定宽度或高度，用flex:1代表，占剩余所有空间

14、在用flex：1填充整个剩余空间时，它其中有一个元素，又期望它不填充整个剩余空时，此时可以将这个元素的
       样式设置为display: inline-block;

15、画三角形

.user-chat-list-body:after{
    position: absolute;
    left: -30upx;
    right: 0;
    top: 30upx;
    content: '';
    width: 0;
    height: 0;
    border: 16upx solid #F4F4F4;
    border-color: transparent #F4F4F4 transparent transparent;
}

16、鼠标移上去放大动化效果

/*效果二：放大 修改scale(放大的值)*/
.img2 {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}

.img2:hover {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
}