css使用：https://www.jianshu.com/p/6dd021960783
**********button：
***button去邊框的方法：
三種方法：
1.button::after{display:none}
2.button::after{border-color:transparent}
3.button::after{border-width:0}
****button設置背景：
3種方法：
1.網絡url，不能用本地的；background-image: url(https://www.ccc.jpg);
2.本地的圖片經過base64編碼
3.使用img標籤層疊覆蓋。
*****image的相關設置：https://www.jianshu.com/p/ae335d50b67d
*****input值的獲取：
方法一：<input class="newname" bindinput="getinputnewnickname"> </input>
getinputnewnickname:function(e){
//監聽文本框
console.log("獲取input框的內容"+e.detail.value)
}
方法二：input放在form標籤中，
- 攜帶 form 中的數據觸發 submit 事件
- bindsubmit 事件需要配合按鈕的
formType="submit"操作 - 設置input的name值來獲取對應的數據
*****水平垂直居中：
style="height: 44px; width: {{width}}px; background: red;text-align:center;margin: auto;display: flex;align-items: center;"
如果子容器中的view需要居中的話，那需要在父容器中設置居中
水平居中：text-align:center;margin: auto;
垂直居中：display: flex;align-items: center;
同時平和垂直居中：justify-content: center;display: flex;align-items: center;
******定位：
CSS 有三種基本的定位機制：普通流、浮動和絕對定位。
******margin:塊級元素的垂直相鄰外邊距會合並，而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合並。同樣地，浮動元素的外邊距也不會合並。允許指定負的外邊距值，不過使用時要小心。
元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作方式，這取決於定位方法。
靜態定位的元素不會受到 top, bottom, left, right影響。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱爲行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。
position: relative;相對定位，相對於自身移動，會佔用原來的位置。相對定位實際上被看作普通流定位模型的一部分，因爲元素的位置相對於它在普通流中的位置。
position: absolute;絕對定位，絕對定位使元素的位置與文檔流無關，因此不佔據空間。普通流中其它元素的佈局就像絕對定位的元素不存在一樣。絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。根據用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。因爲絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置 z-index 屬性來控制這些框的堆放次序。
position:fixed;直接以瀏覽器窗口作爲參考進行定位，它是浮動在頁面中，元素位置不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響。比如我們準備一長串的文字，讓文字超出一屏的寬度，設置浮動元素div1的left和top爲100px，拖動瀏覽器的滾動條，浮動元素div1的位置不會發生變化。Fixed定位的元素可以和其他元素重疊。
浮動：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。由於浮動框不在文檔的普通流中，所以不佔用空間，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間爲止，有的也會卡住。clear:both;清除浮動。
*******塊元素、行內元素、行內塊元素；
(1)display:inline;轉換爲行內元素
(2)display:block;轉換爲塊狀元素
(3)display:inline-block;轉換爲行內塊狀元素
（4display:none;讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不佔用文檔中的空間。
- display:flex:指定爲行內容器模式，在一行內顯示子元素，可以使用flex-wrap屬性指定其是否換行，flex-wrap有三個值:nowrap(不換行),wrap(換行),wrap-reverse(換行第一行在下面)
塊狀元素特徵：(1)能夠識別寬高。(2)margin和padding的上下左右均對其有效。(3)可以自動換行。(4)多個塊狀元素標籤寫在一起，默認排列方式爲從上至下。
1、總是在新行上開始
2、寬度的默認爲width+margin-left+margin-right+padding-left+padding-right剛好等於父級元素的內容區域寬度，即父元素的width。當設定新的寬度，如果寬度是100%，並且padding、margin不爲零，導致塊級元素寬度溢出父元素
3、盒子模型的高度默認由內容決定
4、盒子模型中高度、寬度和內外邊距都是可控制
5、可以容納行內元素和其他塊級元素。
行內塊狀元素綜合了行內元素和塊狀元素的特性，但是各有取捨。因此行內塊狀元素在日常的使用中，由於其特性，使用的次數也比較多。
行內元素特徵：(1)設置寬高無效。(2)對margin僅設置左右方向有效，上下無效；padding設置上下左右都有效，即會撐大空間(3)不會自動進行換行。
1、和其他非塊級元素在同一行
2、盒子模型中高度、寬度、上下margin、上下padding設置無效，只能設置左右的margin和左右的padding
3、寬度就是文字或圖片的寬度，不可改變
4、行內元素的寬度和高度都不能直接設置
5、行內元素只能容納文本或其他行內元素，在行內元素中放置其他的塊級元素會引起不必要的混亂
行內塊狀元素特徵：(1)不自動換行。(2)能夠識別寬高。(3)默認排列方式爲從左到右
**小程序佈局：https://blog.csdn.net/lwzhang1101/article/details/86540832
flex佈局：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html、http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html、https://www.cnblogs.com/milo-wjh/p/6758198.html?utm_source=itdadao&utm_medium=referral、https://blog.csdn.net/LzzMandy/article/details/91380510
微信小程序頁面佈局方式採用的是Flex佈局。Flex佈局的主要特徵是能夠調整其子元素在不同的屏幕大小中能夠用最適合的方法填充合適的空間。設爲Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。它可以應用於容器中，也可以應用於行內元素。
容器中的屬性：
order 項目的排列順序。數值越小，排列越靠前，默認爲0。
flex-grow 項目的放大比例，默認爲0，即如果存在剩餘空間，也不放大。
flex-shrink 項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小。
flex-basis 在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小。
flex 是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。
align-self 允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
order
.item {
order: <integer>;
}
flex-grow
.item {
flex-grow: <number>; /* default 0 */
}
flex-shrink
.item {
flex-shrink: <number>; /* default 1 */
}
flex-basis
.item {
flex-basis: <length> | auto; /* default auto */
}
flex
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
align-self
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
定位position和佈局display不一樣，可以同時使用，display：flex（默認在同一行顯示，可以設置換行）和display：block（默認，會自動換行）。一般絕對定位、相對定位、flex佈局一起使用。absolute定位是針對自身，display是針對子元素；
******flex佈局注意問題：
1.align-items：center對<text>標籤不起作用；解決方法：在text中添加 line-height:text的自身高度;
2.有的absolute定位的元素不參與flex的佈局；
轉自https://www.jianshu.com/p/8f8842c29f51
一、首先介紹一下HTML中幾種類型標籤。
（1）行內標籤：能夠設置多個標籤在一行內，不能設置寬高，寬高是內容的大小。
（2）塊級標籤：一個標籤獨佔一行，能設置寬高。
（3）行內塊級標籤：可以多個標籤共佔一行，又能設置寬高。
同理，微信小程序中也存在這種劃分情況，微信小程序中，大部分控件是塊級標籤，行內標籤較少，比如form。那麼既然塊級標籤不能多標籤共用一行，我們佈局的時候不是就很被動嗎？？請看第二條。
二、塊級標籤通過屬性設置轉爲行內塊級標籤，滿足需求。
（一）display屬性
display屬性可設置值有：block,inline,inline-block,none.
block:讓行內標籤變成塊級標籤。塊級標籤默認值。
inline:讓塊級標籤變成行內標籤。
inline-block:可以將任意標籤變爲行內塊級標籤。
none:不設置。
（二）position屬性
position屬性：可設置爲：absolute,fixed,relative,static,inherit。默認值——static,假如設置爲fixed,absolute，就會脫離標準流（標準流：佈局從上到下，從左到右依次排布），能夠達到行內塊級標籤的效果。 從而達到既能設置寬高，又能多個控件。但是這個屬性的設置一般是用於絕對佈局。
absolut——生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative ——生成相對定位的元素，相對於其正常位置進行定位。
因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
fixed——生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
static——默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
inherit——規定應該從父元素繼承 position 屬性的值。
這兒要重點解釋一下absolute，有一個詞是形容絕對佈局的，子絕父相——意思是，假如你要在某個父控件中絕對佈局一個子控件，那麼子控件的position設置爲absolute，父控件position屬性設置爲relative。
假如只是給子控件設置position屬性，子控件就會自主從內往外找父控件的position屬性，直到發現誰的position屬性值爲relative，就相對於誰進行絕對佈局，假設沒找到（即所有子控件的position值都爲默認的static）就相對於外層父控件中，最外層的static控件進行絕對佈局。
position的六個屬性值：static、relative、absolute、fixed、sticky和inherit。1、static(默認)：元素框正常生成。塊級元素生成一個矩形框，作爲文檔流的一部分；行內元素則會創建一個或多個行框，置於其父元素中。
2、relative：元素框相對於之前正常文檔流中的位置發生偏移，並且原先的位置仍然被佔據。發生偏移的時候，可能會覆蓋其他元素。
3、absolute：元素框不再佔有文檔流位置，並且相對於包含塊進行偏移(所謂的包含塊就是最近一級外層元素position不爲static的元素)
4、fixed：元素框不再佔有文檔流位置，並且相對於視窗進行定位
5、sticky：(這是css3新增的屬性值)粘性定位，官方的介紹比較簡單，或許你不能理解。其實，它就相當於relative和fixed混合。最初會被當作是relative，相對於原來的位置進行偏移；一旦超過一定閾值之後，會被當成fixed定位，相對於視口進行定位。demo地址（https://jsbin.com/moxetad/edit?html,css,output）
偏移量top、right、bottom、left四個屬性。偏移量不會對static的元素起到作用。而margin，相對應的是盒子模型的外邊距，它會對每個元素框起到作用，使得元素框與其他元素之間產生空白。
（三）float屬性
用於設置控件浮動於界面，也是脫離標準流。將塊級標籤變爲行內塊級標籤。
left 元素向左浮動。
right 元素向右浮動。
none 默認值。元素不浮動，並會顯示在其在文本中出現的位置。
inherit 規定應該從父元素繼承 float 屬性的值。
（四）Overflow的用法
Overflow：visible 默認值超出部分可見
Overflow：hidden 將超出部分隱藏
Overflow：scroll 將控件設置爲滾動
Overflow：auto 自動設置滾動
（五）設置控件水平居中和垂直居中
水平居中：
行內標籤和行內塊級標籤：在父控件中設置text-align:center.
塊級標籤需要多設置一步，在子控件自身設置margin：0 auto。
垂直居中：
行內標籤和行內塊級標籤：只需將line-height 的值設置爲父控件的高度。
塊級標籤：第一種，可將塊級標籤轉爲行內塊級，然後同上，第二種，用position，然後left=50%，top=50%，然後設置平移屬性transform（-50%，-50%）；
尺寸：
1、百分比：百分比的參照物是父元素，50%相當於父元素width的50%
2、rem：這個對於複雜的設計圖相當有用，它是html的font-size的大小
3、em：它雖然也是一個相對的單位，相對於父元素的font-size，但是，並不常用，主要是計算太麻煩了。
em的尺寸單位由W3C建議。
1em和當前字體大小相等。在瀏覽器中默認的文字大小是16px。
因此，1em的默認大小是16px。可以通過下面這個公式將像素轉換爲em：px/16=em
4:px
盒子模型：每個元素，都會形成一個矩形塊，主要包括四部分：margin(外邊距)+border(邊框)+padding(內邊距)+content(內容)。
css中存在兩種不同的盒子模型，可以通過box-sizing設置不同的模型。兩種盒子模型，主要是width的寬度不同。
標準盒子模型width的長度等於content的寬度；而當將box-sizing的屬性值設置成border-box時，盒子模型的width=border+padding+content的總和。
寬度默認的屬性值是auto，這個屬性值會使得內部元素的長度自動填充滿父元素的width。
****text-align的用法：對標籤內的所有東西基本都有作用。前提是，標籤內的東西，屬於標準輸出流，不能是浮動或者定位的標籤。如果標籤內是其他的標籤，而不是具體的文本。你需要給裏邊的標籤增加margin-left:auto;margin-right:auto屬性，這樣，裏邊的標籤就居中了。如果沒有設置 width 屬性(或者設置 100%)，居中對齊將不起作用。一般情況下使用margin：auto；來設置元素居中，使用text-align設置文本居中。
margin:auto只適用於水平邊距，它不適用於浮動和內聯元素，並且它本身也不能用於絕對和固定定位元素。
*******顏色：
**漸變色：https://blog.csdn.net/huangxiaoguo1/article/details/80013943
****邊框：
圓角：
/* border-top-left-radius:34rpx;
border-top-right-radius:34rpx;
border-bottom-right-radius:34rpx;
border-bottom-left-radius:34rpx; */
border-radius: 34rpx;
background:rgba(255, 255,255, 1);
border:1px solid #FC732F;//必須要設置成這樣顏色纔有效
border-width: 2rpx;