一.字體 font
- font-style ： 文字樣式 normal正常的字體， italic斜體字 oblique 傾斜的字體
- font-variant : 設(shè)置對象中的文本是否為小型的大寫字母
- font-weight : 設(shè)置文本字體的粗細。取值范圍為100-900.取值：normal：正常大小(400)。bold :粗體(700)。bolder， lighter。
- font-size : 設(shè)置字體尺寸大小. 取值：normal 正常的字體。small-caps 小型的大寫字母字體。設(shè)置了以后會不論原來是否為大小字母 全部改為大寫。
- line-height
- font-family : 設(shè)置字體名稱。
- font-stretch:
normal：正常文字寬度。
ultra-condensed：比正常文字寬度窄4個基數(shù)。
extra-condensed：比正常文字寬度窄3個基數(shù)。
condensed：比正常文字寬度窄2個基數(shù)。
semi-condensed：比正常文字寬度窄1個基數(shù)。
semi-expanded：比正常文字寬度寬1個基數(shù)。
expanded:比正常文字寬度寬2個基數(shù).
extra-expanded：比正常文字寬度寬3個基數(shù)。
ultra-expanded：比正常文字寬度寬4個基數(shù)。
font-size和font-family的值是必需的。如果缺少了其他值，默認值將被插入，如果有默認值的話.
二. 邊框 border
border-color : 邊框的顏色
border-style : 邊框的樣式
none ：無樣式
hidden ： 隱藏樣式
dotted ： 點狀排布
dashed ： 虛線
solid ： 實線border-width ： 設(shè)置邊框?qū)挾龋撼Ｓ萌≈担簃edium：默認值，相當于3px。thin：1px。thick：5px。不可以為負值。
border-top:設(shè)置頂部邊框。border-top-width,border-top-style,border-top-color 分別設(shè)置 寬度，樣式以及顏色
border-right：設(shè)置右邊框。
border-bottom：設(shè)置底邊框。
border-left：設(shè)置左邊框。
border-radius : 設(shè)置圓角邊框。左上角：border-top-left-radius，右上角：border-top-right-radius，左下角：border-bottom-left-radius，右下角：border-bottom-right-radius
box-shadow
10.border-image：對象的邊框樣式使用圖片來填充。
1>border-image-source:設(shè)置圖片的來源。使用絕對或者相對地址或者漸變色來確定圖片。
2>border-image-slice :設(shè)置邊框背景圖的分隔方式。取值：數(shù)值／百分比 fill.該屬性指定從上右下左來分割圖片，將圖像分成4個角，4條邊以及中間區(qū)域。中間區(qū)域始終是透明的，除非使用關(guān)鍵字fill。
3>border-image-width:設(shè)置邊框背景的寬度。用于指定使用多厚的邊框來承載唄裁剪后的圖像。
4>border-image-outset：設(shè)置對象的邊框背景圖的擴展，意思就是說假如設(shè)置了10rpx，那么圖像就會在原來基礎(chǔ)上外延10rpx在顯示。
5>border-image-repeat：設(shè)置對象的邊框圖片的平鋪方式。
stretch:拉伸。
repeat：平鋪，碰到邊界的時候截斷。
round：根據(jù)邊框的尺寸動態(tài)調(diào)整圖片的大小，使得剛好可以鋪滿整個邊框。
space：根據(jù)邊框的尺寸動態(tài)調(diào)整圖片的之間的間距，使得剛好鋪滿整個邊框。100
三.外邊距（margin）和內(nèi)邊距（padding）
- margin：外邊距；設(shè)置對象四邊的外延邊距。
- margin: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四個參數(shù)值，將按上、右、下、左的順序作用于四邊。
- margin：20rpx：如果只提供一個，將用于全部的四邊。
- margin：20rpx 20rpx：如果提供兩個，第一個用于上、下，第二個用于左、右。
- margin：20rpx 20rpx 10rpx：如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
- padding：內(nèi)邊距：設(shè)置對象四邊的內(nèi)部邊距。
- padding: 20rpx 10rpx 25rpx 10rpx ：如果提供全部四個參數(shù)值，將按上、右、下、左的順序作用于四邊。
- padding：20rpx：如果只提供一個，將用于全部的四邊。
- padding：20rpx 20rpx：如果提供兩個，第一個用于上、下，第二個用于左、右。
- padding：20rpx 20rpx 10rpx：如果提供三個，第一個用于上，第二個用于左、右，第三個用于下。
- margin-top，margin-right，margin-bottom，margin-left對應(yīng)的分別是上右下左外邊的距離，可取值：auto／數(shù)值／百分比。
- padding-top，padding-right，padding-bottom，padding-left對應(yīng)的分別是上右下左內(nèi)邊的距離，可取值：auto／數(shù)值／百分比。
四. display
示例Demo：
<!-- wxml -->
<view class="demo-view">
<view class="bc_green"></view>
<view class="bc_red"></view>
<view class="bc_yellow"></view>
<view class="bc_black"></view>
</view>
<!-- wxss -->
.demo-view {
margin-top: 200rpx;
display: flex;
flex-direction: row;
background-color: #fff;
height: 100%;
}
.bc_green {
background-color: #0f0;
width: 100rpx;
height: 100rpx;
}
.bc_red {
background-color: #f00;
width: 200rpx;
height: 100rpx;
}
.bc_yellow {
background-color: #00f;
width: 300rpx;
height: 100rpx;
}
.bc_black {
background-color: #000;
width: 400rpx;
height: 100rpx;
}
1. block （塊布局）
block表示[塊內(nèi)]容器模式，總是使用新行開始顯示，小程序的3個視圖容器（view，srcoll-view，swiper）默認值均為display:block ;
2. flex （彈性布局）
- flex-direction
-
flex-wrap
wxml中總共4個view，它們的寬的和為1000rpx，而屏幕寬度最大為750rpx，而view沒有自動換行，說明一定是壓縮了，這正是flex屬性值的好處，自動調(diào)整各個子組件的寬度.
flex-wrap:nowarp; 自動調(diào)整各個子組件的寬度
-
align-item
align-item:center.縱向居中顯示
二.
二.
二.
注意點
- 在wxss里面 對標簽設(shè)置樣式. 對該頁面內(nèi)所有的swiper和swiper-item樣式設(shè)置。 不用加
.
swiper {
width: 100%;
height: 375rpx;
background-color: white;
}
swiper-item {
width: 100%;
height: 375rpx;
background-color: yellow;
}
待整理
如何居中 x和y軸的居中
padding-bottom
如何設(shè)置 view的高度是寬度的0.5倍
float: right;
position: relative;
z-index: -99;
