1循榆、flex布局
2、box-shadow陰影
box-shadow: h-shadow(必選) v-shadow(必選) blur spread color inset;
Example：
box-shadow:0 0 20rpx #aaaaaa;
3畅厢、line-gradient漸變
background: linear-gradient(to right, blue, white);
4冯痢、絕對(duì)定位使元素居中
可以用left:50%加上margin-left:-(寬度/2)，來(lái)實(shí)現(xiàn)絕對(duì)定位的水平居中框杜，這里的寬度指的是設(shè)置為絕對(duì)定位的元素的寬度
/* 可以用left:50%加上margin-left:-(寬度/2)浦楣，來(lái)實(shí)現(xiàn)絕對(duì)定位的水平居中，這里的寬度指的是設(shè)置為絕對(duì)定位的元素的寬度 */
.popup {
width:100px;
height: 100px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
5咪辱、vertical-align屬性圖片與文字對(duì)齊
<view class="title_right">
<text>全部訂單</text>
<image src="/images/left_icon.png" style="vertical-align:middle"></image>
</view>
6振劳、關(guān)于圖片、文字的居中
（1）圖片居中要在圖片本身上設(shè)置margin: 0 auto;
（2）文字居中要在其父元素上設(shè)置text-align: center;
<!-- html -->
<view class="father">
<image src="/images/fc.png"></image>
<text>113131313</text>
</view>
// css
.father {
text-align: center;
image {
width: 90rpx;
height: 90rpx;
display: block;
margin: 0 auto;
}
text {
font-size: 20rpx;
color: #929292;
}
}
7油狂、單行居中历恐，多行居左
8专筷、css選擇器-獲取最后一個(gè)元素
:last-child 選擇屬于其父元素最后一個(gè)子元素每個(gè) <p> 元素弱贼。
p:last-child {
background: red;
}
<body>
<h1>這是標(biāo)題</h1>
<p>第一個(gè)段落。</p>
<p>第二個(gè)段落磷蛹。</p>
<p>第三個(gè)段落吮旅。</p>
<p>第四個(gè)段落。</p>
<p>第五個(gè)段落味咳。</p>
</body>
9庇勃、文字溢出并顯示省略號(hào)檬嘀？
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
10、文字超過(guò)兩行才溢出并顯示省略號(hào)责嚷？
{
width: 561rpx;
overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
11鸳兽、box-sizing
（1）問(wèn)題場(chǎng)景
在CSS中，設(shè)置的width和height只會(huì)應(yīng)用到這個(gè)元素的內(nèi)容區(qū)罕拂；如果這個(gè)元素有border或padding揍异，那么繪制到屏幕上時(shí)的盒子寬度和高度會(huì)加上設(shè)置的borde和padding。
這意味著當(dāng)你調(diào)整一個(gè)元素的寬度和高度時(shí)需要時(shí)刻注意到這個(gè)元素的邊框和內(nèi)邊距爆班，在響應(yīng)式布局時(shí)蒿秦，這個(gè)特點(diǎn)很煩人。
（2）解決
// 默認(rèn)值
box-sizing: content-box;
box-sizing: border-box;
border-box告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的蛋济。也就是說(shuō)，如果你將一個(gè)元素的width設(shè)為100px炮叶，那么這100px會(huì)包含其它的border和padding碗旅，內(nèi)容區(qū)的實(shí)際寬度會(huì)是width減去border + padding的計(jì)算值。大多數(shù)情況下這使得我們更容易的去設(shè)定一個(gè)元素的寬高镜悉。
12祟辟、設(shè)置input中placeholder的文字樣式
// .inputClassName是標(biāo)簽的類名，包括（input,textArea）;
.inputClassName::-webkit-input-placeholder {
color: #b6b6b6;
}
.inputClassName:-moz-placeholder {
color: #b6b6b6;
}
.inputClassName::-moz-placeholder {
color: #b6b6b6;
}
.inputClassName:-ms-input-placeholder {
color: #b6b6b6;
}
