css3 笔记1-20

1.

设置或检索当内容超过指定容器的边界时是否断行。

CSS3中将 <' word-wrap '> 改名为 <' overflow-wrap '>；

由于历史原因，当你使用 <' overflow-wrap '> 时，最好同时使用 <' word-wrap '> 作为备选，作向前兼容。

2、两行缩略词

.word-wrap{
    width: 100%;
    margin: 0;
    background: #fff;
    color: #000;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-align: -webkit-auto;
    font-size: 0.2rem;
}

3、垂直布局

.user-dialog{
    border-radius: 8px;
    background-color: #f7f7f7;
    width: 60%;
    height: 88%;
    top: 6%!important;
    display: flex;//主要这个代码
    flex-direction: column;//主要代码
    .el-dialog__header{
        text-align: center;
        background-color: #fff;
        padding: 20px;
        border-radius: 8px 8px 0 0;
    }
    .el-dialog__body{
      position: relative;
      padding: 20px 20px;
      flex: 1;//主要这个代码
      display: flex;
      flex-direction: column;
      overflow:hidden;
      overflow-y:scroll;
      border:1px solid #000;
    }
    .el-dialog__footer{
      position: relative;
    }
}

 4、display-flex

 1 .goods-dialog__container{
 2     display:flex;
 3     flex-direction:column;
 4 
 5 }
 6 .goods-list-section{
 7     position:relative;
 8     overflow: hidden;
 9     overflow-y: scroll;
10     flex:1;
11     ul{
12         display: -webkit-box;
13         display: -ms-flexbox;
14         display: flex;
15         -webkit-box-orient: horizontal;
16         -webkit-box-direction: normal;
17         -ms-flex-direction: row;
18         flex-direction: row;
19         -ms-flex-wrap: wrap;
20         flex-wrap: wrap;
21         padding: 0.2rem 0.1rem;
22         -webkit-box-pack: center;
23         -ms-flex-pack: center;
24         justify-content:  center;
25         .goods-list-li{
26             position:relative;cursor:pointer;border:1px solid #fff;
27         }
28         .goods-list-li:hover,.active{
29             border:1px solid #f00;
30         }
31         li{
32             width: 180px;
33         height: 240px;
34         color: #000000;
35         background: #FFFFFF;
36         -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
37         box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
38         border-radius: 5px;
39         margin: 0.2rem 0.2rem;
40         display: -webkit-box;
41         display: -ms-flexbox;
42         display: flex;
43         -webkit-box-orient: vertical;
44         -webkit-box-direction: normal;
45         -ms-flex-direction: column;
46         flex-direction: column;
47         -webkit-box-align: center;
48         -ms-flex-align: center;
49         align-items: center;
50         position: relative;
51             .picture{
52                 width: 150px;
53                 height: 150px;
54                 background: #cccccc;
55                 margin: 0.32rem 0 0.3rem 0;
56                 img{
57                     width: 100%;
58                     height: 100%;
59                 }
60             }
61             .title{
62                 width:150px;
63                 line-height:16px;
64                 font-size:12px;
65                 color:#969696;
66                 overflow: hidden;
67                 text-overflow: ellipsis;
68                 display: -webkit-box;
69                 -webkit-line-clamp: 2;
70                 -webkit-box-orient: vertical;
71             }
72         }
73     }
74 
75 }
View Code

 5、

  .icon-hover:hover {
      border-radius: 50%;
      border: 1px solid #fff;
      -webkit-transform:scale(1.2);
      -moz-transform:scale(1.2);
      transition: 0.38s;
      .icon {
      }
    }

6、margin: 10px 5px 15px;

. 上外边距是10px

. 右外边距和左外边距是5px

. 下外边距是15px

posted @ 2016-06-24 10:29  renyangli  阅读(150)  评论(0)    收藏  举报