微信小程序css篇----所有屬性(按字母排列:c,d,e開頭)

d,e,開頭的css屬性在小程序裏比較少,就放在一起了,先看圖:


那先說c開頭的屬性:

1.caption-side:這個是表格的標題所處的位置屬性。取值:bottom ,top。

小程序裏沒有table的標籤支持,不清楚怎麼設置。小程序裏設置表格其實很簡單,只需要用列表渲染就可以。如下圖:

<view class="container">
    <view class="table">
        <view class="tr">
            <view class="th">標題一</view>
            <view class="th">標題二</view>
            <view class="th">標題三</view>
            <view class="th">標題四</view>
            <view class="th">標題五</view>
        </view>
        <view class="tr" wx:for="{{5}}">
            <view class="td"> 內容</view>
            <view class="td">內容</view>
            <view class="td">內容</view>
            <view class="td"> 內容</view>
            <view class="td">內容</view>
        </view>
    </view>
</view>
樣式:

.table {
border: 1px solid greenyellow;
border-right: 0rpx;
border-bottom: 0rpx;
width: 98%
}
.tr {
width: 100%;
display: flex;
justify-content: space-between;
}
.th ,.td {
padding: 10px;
border-bottom: 1px solid greenyellow;
border-right: 1px solid greenyellow;
text-align: center;
width:100%
}
.th {
font-weight: 400rpx;
background-color: greenyellow
}

2.clear:指定位置不允許有浮動元素:取值:left,right,both,none。

3.clip:裁剪。見position

4.clip-path,取代clip。

5.color:顏色,見這裏.

(這裏插一句,本來這一篇都快寫完了,誰知道一不小心點錯了,沒保存,又得重新來搞,崩潰啊!怎麼就不帶自動保存的。差評!)

6.color-interpolation-filters:指定哪個彩色空間補白的使用影響。具體有啥用沒搞明白。

取值:auto:在指定的彩色空間不發生.linearRGB:顏色運算在線性化的RGB彩色空間應該發生。sRGB:顏色運算在sRGB彩色空間應該發生。

7.column-count: 指定某個元素應分爲的列數。假如要分成3列:column-count:3.

8.column-fill:指定如何填充列。取值:默認值:balance,列長短平衡。瀏覽器應儘量減少改變列的長度。auto:列順序填充,他們將有不同的。

9.column-gap:指定的列之間的距離。column-gap:40rpx,那兩列之間的距離爲40rpx。

10.column-rule: 指定列之間的規則:寬度,樣式和顏色。column-rule:column-rule-color  column-rule-style  column-rule-width

11.column-rule-color:這是顏色。沒啥可說的。

12.column-rule-style :列之間的間隔線的樣式,取值有dashed,double,dotted,hidden,groove,inset,outset,none,ridge,solid。

13.column-width:間隔線的寬度。

14.column-span:獨佔一行,取值爲:1|all。當取值爲all 的時候獨佔一行,如果是1的時候跟別的列在一行。

15.column-width: 列的寬度。

16.columns: 指定列的寬度和數量。columns:column-width column-count,可以快速的創建多寬幾列。說多了沒用 看圖:


17.content:該屬性與 :before 及 :after 僞元素配合使用,來插入生成內容。這個屬性好玩一點,試了幾個不同的組件發現表現不一樣。先來看圖。wxml代碼就這個

<view>
  <text>頭像</text>
  <button size="mini">按鈕</button>
  <input placeholder="我是輸入框"/>我是輸入框
</view>




很明顯可以看出來,在text,button組件中如果是before,那圖片將在前面,而input組件中則是代替placeholder的地方。最好玩的就是:after了,在text組件中表現爲在字後面,而button中則感覺是在字的上一層,而input中則直接消失不見了。所以很明顯這個屬性需要好好熟悉以後才能更好的使用。

18.counter-increment: 遞增一個或多個計數器值。

19. counter-reset: 創建或重置一個或多個計數器。這3個(17,18,19)一般一起用可以自動生成以下格式。就是自動生成1.1,1.2,2.1,2.2等等。


20.cursor: 定義了鼠標指針放在一個元素邊界範圍內時所用的光標形狀。按照css裏面規定鼠標的格式,不過在小程序裏沒發現有什麼用。

21.direction:指定文本方向/書寫方向。取值:默認值:ltr:文本方向從左到右。rtl:文本方向從右到左。說真的沒看出來到底怎麼實現的,跟我想象中的不一樣啊。



22.empty-cells:是否顯示錶格中的空單元格(僅用於"分離邊框"模式)。取值:hidden  show

23.enable-background:廢棄。

到此c,d,e開頭的屬性都過了一遍。




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