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; /**置於底部*/

     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; 

     <!-- class 支持的語法: -->
     <!-- <view :class="{ 'active': isActive}">111</view>
     <view :class="{ 'active': isActive, 'text-danger': hasError}">111</view>
     <view :class="[class1,class2]">111</view>
     <view class="static" :class="[num>10 ? 'active' : 'text-danger',class3]">444</view> -->
             
     <!-- style 支持的語法: -->
     <!-- <view :style="{ color: activeColor, fontSize: fontSize +'px' }">666</view> -->

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章