d,e,開(kāi)頭的css屬性在小程序里比較少,就放在一起了,先看圖:
那先說(shuō)c開(kāi)頭的屬性:
1.caption-side:這個(gè)是表格的標題所處的位置屬性。取值:bottom ,top。
小程序里沒(méi)有table的標簽支持,不清楚怎么設置。小程序里設置表格其實(shí)很簡(jiǎn)單,只需要用列表渲染就可以。如下圖:
- <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
- }
3.clip:裁剪。見(jiàn)position。
4.clip-path,取代clip。
5.color:顏色,見(jiàn)這里.
(這里插一句,本來(lái)這一篇都快寫(xiě)完了,誰(shuí)知道一不小心點(diǎn)錯了,沒(méi)保存,又得重新來(lái)搞,崩潰??!怎么就不帶自動(dòng)保存的。差評!)
6.color-interpolation-filters:指定哪個(gè)彩色空間補白的使用影響。具體有啥用沒(méi)搞明白。
取值:auto:在指定的彩色空間不發(fā)生.linearRGB:顏色運算在線(xiàn)性化的RGB彩色空間應該發(fā)生。sRGB:顏色運算在sRGB彩色空間應該發(fā)生。
7.column-count: 指定某個(gè)元素應分為的列數。假如要分成3列:column-count:3.
8.column-fill:指定如何填充列。取值:默認值:balance,列長(cháng)短平衡。瀏覽器應盡量減少改變列的長(cháng)度。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:這是顏色。沒(méi)啥可說(shuō)的。
12.column-rule-style :列之間的間隔線(xiàn)的樣式,取值有dashed,double,dotted,hidden,groove,inset,outset,none,ridge,solid。
13.column-width:間隔線(xiàn)的寬度。
14.column-span:獨占一行,取值為:1|all。當取值為all 的時(shí)候獨占一行,如果是1的時(shí)候跟別的列在一行。
15.column-width: 列的寬度。
16.columns: 指定列的寬度和數量。columns:column-width column-count,可以快速的創(chuàng )建多寬幾列。說(shuō)多了沒(méi)用 看圖:
17.content:該屬性與 :before 及 :after 偽元素配合使用,來(lái)插入生成內容。這個(gè)屬性好玩一點(diǎn),試了幾個(gè)不同的組件發(fā)現表現不一樣。先來(lái)看圖。wxml代碼就這個(gè)
- <view>
- <text>頭像</text>
- <button size="mini">按鈕</button>
- <input placeholder="我是輸入框"/>我是輸入框
- </view>

很明顯可以看出來(lái),在text,button組件中如果是before,那圖片將在前面,而input組件中則是代替placeholder的地方。最好玩的就是:after了,在text組件中表現為在字后面,而button中則感覺(jué)是在字的上一層,而input中則直接消失不見(jiàn)了。所以很明顯這個(gè)屬性需要好好熟悉以后才能更好的使用。
18.counter-increment: 遞增一個(gè)或多個(gè)計數器值。
19. counter-reset: 創(chuàng )建或重置一個(gè)或多個(gè)計數器。這3個(gè)(17,18,19)一般一起用可以自動(dòng)生成以下格式。就是自動(dòng)生成1.1,1.2,2.1,2.2等等。

20.cursor: 定義了鼠標指針?lè )旁谝粋€(gè)元素邊界范圍內時(shí)所用的光標形狀。按照css里面規定鼠標的格式,不過(guò)在小程序里沒(méi)發(fā)現有什么用。
21.direction:指定文本方向/書(shū)寫(xiě)方向。取值:默認值:ltr:文本方向從左到右。rtl:文本方向從右到左。說(shuō)真的沒(méi)看出來(lái)到底怎么實(shí)現的,跟我想象中的不一樣啊。

22.empty-cells:是否顯示表格中的空單元格(僅用于"分離邊框"模式)。取值:hidden show
23.enable-background:廢棄。
到此c,d,e開(kāi)頭的屬性都過(guò)了一遍。
聯(lián)系客服