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開頭的屬性都過了一遍。