W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
通用樣式,即所有組件都可以支持的樣式
它們均與 css 的屬性樣式用法保持一致,開發(fā)者可寫在?內(nèi)聯(lián)樣式
?或?<style>
?標簽里,實現(xiàn)組件樣式的定制化
關(guān)于組件樣式的設(shè)置,可以參考此 文檔 入門
<template>
<div>
<div class="box-normal" style="background-color:red"></div>
<div class="box-normal"></div>
</div>
</template>
<style>
.box-normal{
background-color: green;
width: 100px;
height: 100px;
}
</style>
注:通用樣式均為非必填項。
名稱 | 類型 | 默認值 | 描述 | ||
---|---|---|---|---|---|
width | <length> | <percentage>
|
- | 未設(shè)置時使用組件自身內(nèi)容需要的寬度 | ||
height | <length> | <percentage>
|
- | 未設(shè)置時使用組件自身內(nèi)容需要的高度 | ||
padding | <length>
|
0 | 簡寫屬性,在一個聲明中設(shè)置所有的內(nèi)邊距屬性,該屬性可以有 1 到 4 個值 | ||
padding-[left|top|right|bottom] | <length>
|
0 | 設(shè)置一個元素的某個方向的內(nèi)邊距,padding 區(qū)域指一個元素的內(nèi)容和其邊界之間的空間,該屬性不能為負值。 | ||
margin | <length>
|
0 | 簡寫屬性,在一個聲明中設(shè)置所有的外邊距屬性,該屬性可以有 1 到 4 個值 | ||
margin-[left|top|right|bottom] | <length>
|
0 | 設(shè)置一個元素的某個方向的外邊距,該屬性不能為負值。 | ||
border | - | 0 | 簡寫屬性,在一個聲明中設(shè)置所有的邊框?qū)傩?,可以按順序設(shè)置屬性 width style color,不設(shè)置的值為默認值 | ||
border-[left|top|right|bottom] 1050+
|
- | 0 | 簡寫屬性,在一個聲明中設(shè)置對應(yīng)位置的所有邊框?qū)傩?,可以按順序設(shè)置屬性 width style color,不設(shè)置的值為默認值 | ||
border-style | dotted | dashed | solid | solid | 暫時僅支持 1 個值,為元素的所有邊框設(shè)置樣式 | ||
border-width | <length>
|
0 | 簡寫屬性,在一個聲明中設(shè)置元素的所有邊框?qū)挾?,或者單獨為各邊邊框設(shè)置寬度 | ||
border-[left|top|right|bottom]-width | <length>
|
0 | 為元素的某個方向的邊框設(shè)置邊框?qū)挾?/td> | ||
border-color | <color>
|
black | 簡寫屬性,在一個聲明中設(shè)置元素的所有邊框顏色,或者單獨為各邊邊框設(shè)置顏色 | ||
border-[left|top|right|bottom]-color | <color>
|
black | 顏色值的填入 | ||
border-radius | <length> | <percentage> 1070+
|
0 | border-radius 屬性允許你設(shè)置元素的外邊框圓角。設(shè)置時需要同時設(shè)置 border-width、border-color,單獨設(shè)置 border-[left|top|right|bottom]-width,border-[left|top|right|bottom]-color 時 border-radius 無效 | ||
border-[top|bottom]-[left|right]-radius | <length> | <percentage> 1070+
|
0 | 設(shè)置四個角的圓角弧度 | ||
background | <linear-gradient>
|
- | 支持 漸變樣式,暫時不能與 background-color、background-image 同時使用 | ||
background-color | <color>
|
- | 顏色值的填入請參考 顏色配置 | ||
color | <color>
|
- | 顏色值的填入請參考 顏色配置 | ||
background-image | <uri>
|
- | 暫時不支持與 background-color,border-color 同時使用;支持本地圖片資源;1030+支持網(wǎng)絡(luò)圖片資源;1010+版本支持 9-patch 圖 | ||
background-size 1000+
|
contain | cover | auto | <length> | <percentage>
|
100% 100% | 設(shè)置背景圖片大小,詳情見背景圖樣式 | ||
background-repeat 1000+
|
repeat | repeat-x | repeat-y | no-repeat | repeat | 設(shè)置是否及如何重復(fù)繪制背景圖像 | ||
background-position 1010+
|
<length> |<percentage> | left | right | top | bottom | center |
0px 0px | 描述了背景圖片在容器中繪制的位置,支持 1-4 個參數(shù) | ||
opacity | <number>
|
1 | opacity 屬性指定了一個元素的透明度。 | ||
display | flex | none | flex | 快應(yīng)用只支持 flex 布局;將當前元素的 display 設(shè)置為 none 快應(yīng)用頁面將不渲染此元素 | ||
visibility | visible | hidden | visible | visibility 屬性控制顯示或隱藏元素而不更改文檔的布局 | ||
flex | <number>
|
- | 父容器為<div>、<list-item>、<tabs> 時生效 |
||
flex-grow | <number>
|
0 | 父容器為<div>、<list-item> 時生效 |
||
flex-shrink | <number>
|
1 | 父容器為<div>、<list-item> 時生效 |
||
flex-basis | <number>
|
-1 | 父容器為<div>、<list-item> 時生效 |
||
flex-direction | <string>
|
'row' | 默認為橫向’row', 父容器為<div>、<list-item> 時生效 |
||
align-items | <string>
|
'flex-start' | align-items 定義了伸縮項目可以在伸縮容器的當前行的側(cè)軸上對齊方式。flex-start(默認值):伸縮項目在側(cè)軸起點邊的外邊距緊靠住該行在側(cè)軸起始的邊。flex-end:伸縮項目在側(cè)軸終點邊的外邊距靠住該行在側(cè)軸終點的邊 。center:伸縮項目的外邊距盒在該行的側(cè)軸上居中放置。baseline:伸縮項目根據(jù)他們的基線對齊。stretch:伸縮項目拉伸填充整個伸縮容器。此值會使項目的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下盡可能接近所在行的尺寸。 | ||
justify-content | <string>
|
'flex-start' | justify-content 定義了伸縮項目沿著主軸線的對齊方式。flex-start(默認值):伸縮項目向一行的起始位置靠齊。flex-end:伸縮項目向一行的結(jié)束位置靠齊。center:伸縮項目向一行的中間位置靠齊。space-between:伸縮項目會平均地分布在行里。第一個伸縮項目一行中的最開始位置,最后一個伸縮項目在一行中最終點位置。space-around:伸縮項目會平均地分布在行里,兩端保留一半的空間。 | ||
position | fixed | absolute1060+ | relative1060+
|
relative | 1060+版本將新增支持 relative 和 absolute 屬性值,且默認值為 relative;父容器為<list>、<swiper> 時不生效。 |
||
[left|top|right|bottom] | <number>
|
- | 一般配合fixed 或absolute (1060+)布局使用 |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: