引言
CSS 為定位和浮動(dòng)提供了一些屬性统诺，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊版述，還可以完成多年來通常需要使用多個(gè)表格才能完成的任務(wù)。
定位的基本思想很簡單寞冯，它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置渴析，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置吮龄。
浮動(dòng)不完全是定位俭茧，不過，它當(dāng)然也不是正常流布局漓帚。
position詳解
一母债、定位
position屬性允許你對(duì)元素進(jìn)行定位。
二尝抖、定位機(jī)制
有三種：普通流毡们，浮動(dòng)，絕對(duì)定位
三昧辽、定位屬性值
static衙熔，relative，absolute搅荞，fixed红氯，-ms-page框咙，initial，unset（后面3個(gè)屬性是小程序中有的）
static：元素框正常生成脖隶，塊級(jí)元素生成一個(gè)矩形框扁耐，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或者多個(gè)行框产阱，置于其父元素中婉称。relative：元素框偏移某個(gè)距離。元素扔保持其未定位前的形狀构蹬，它原來所占的空間扔保留王暗。
相對(duì)定位是一個(gè)非常容易掌握的概念。如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位庄敛，它將出現(xiàn)在它所在的位置上俗壹。然后，可以通過設(shè)置垂直或水平位置藻烤，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)绷雏。
如果將 top 設(shè)置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方怖亭。如果 left設(shè)置為30像素涎显，那么會(huì)在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動(dòng)兴猩。
-
absolute：元素框從文檔流中刪除期吓，并相對(duì)于其包含塊定位，包含塊可能是文檔中的另一個(gè)元素或者初始包含塊倾芝。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉讨勤，就好像元素原來不存在一樣。元素定位后生成一個(gè)塊級(jí)框晨另，而不論原來它在正常流中生成何種類型的框潭千。
普通流中其它元素的布局就像絕對(duì)定位的元素不存在一樣：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒有已定位的祖先元素借尿，那么它的位置相對(duì)于最初的包含塊脊岳。
fixed：元素框的表現(xiàn)類似于將position設(shè)置為absolute，不過其包含塊是視窗本身垛玻。-ms-page:位置取決于absolute的模式。initial：將指定的值表示為屬性的初始值奶躯。unset：設(shè)置了“inherit”和“initial”，根據(jù)屬性是否被繼承嘹黔。
提示：
相對(duì)定位relative實(shí)際上被看作普通流定位模型的一部分账嚎，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置莫瞬。
重要：
absolute和fixed的明顯區(qū)別在于：absolute屬性設(shè)置的值是相對(duì)于其文檔的絕對(duì)位置，而fixed屬性設(shè)置的值是相對(duì)于屏幕視窗的絕對(duì)位置郭蕉。
四疼邀、top，right召锈，bottom旁振，left
定位元素，定義position不為static的元素涨岁。
取值：auto／直接數(shù)值／百分比
五拐袜、z-index
定義position不為static的元素。設(shè)置元素在當(dāng)前上下文中的層疊級(jí)別梢薪。數(shù)值越大顯示在上面蹬铺，數(shù)值越小，則顯示在下面秉撇。
六甜攀、clip
剪裁絕對(duì)元素定位。
定義一個(gè)剪裁矩形琐馆，內(nèi)容多出來的東西將根據(jù)overflow的值來處理规阀。
注意點(diǎn)：必須將
position設(shè)置為absolute或者fixed的時(shí)候此屬性才會(huì)生效
1.取值：shape／auto／inherit。
shape：設(shè)置元素的形狀啡捶。唯一合法的形狀值是：rect (top, right, bottom, left)
2.clip這個(gè)屬性即將廢棄姥敛，推薦使用 clip-path
示例：
index.wxml
<view>Relative:</view>
<view>我是正常位置的標(biāo)題</view>
<view class='left'>我是偏移-20rpx的標(biāo)題</view>
<view class='right'>我是偏移-20rpx的標(biāo)題</view>
<view>absolute:通過絕對(duì)定位可以放置在頁面上任何位置，下面的是距離頂部300rpx,距左邊50rpx</view>
<view class='absolute'>這是有絕對(duì)定位的標(biāo)題</view>
<view class='fixed'>fixed:固定位置</view>
<view class='clip'>我被裁剪了</view>
index.wxss
.left {
position: relative;
left: -20rpx;
}
.right {
position: relative;
left: 20rpx;
padding-bottom: 20rpx;
}
.absolute {
position: absolute;
top: 600rpx;
left: 50rpx;
}
.fixed {
position: fixed;
right: 10rpx;
top: 10rpx;
}
.clip{
position: absolute;
clip: rect(0px,50px,200px,0px);
top: 450rpx;
width: 400rpx;
height: 400rpx;
}
效果：
修改下絕對(duì)定位的樣式：
.absolute {
position: absolute;
top: 400rpx;
left: 50rpx;
}
看效果：
這就是absolute的定位效果瞎暑。
float詳解
浮動(dòng)的框可以向左或向右移動(dòng)彤敛，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>
由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣了赌。
CSS 浮動(dòng)
wxml:
<view class='container1'>
<image class= 'image1' src='../../images/home.png'></image>
<image class= 'image2' src='../../images/category.png'></image>
<image class= 'image3' src='../../images/cart.png'></image>
</view>
wxss:
.image1 {
display: block;
width: 80rpx;
height: 80rpx;
float: right;
}
.image2 {
display: block;
width: 80rpx;
height: 80rpx;
}
.image3 {
display: block;
width: 80rpx;
height: 80rpx;
}
請(qǐng)看下圖墨榄，當(dāng)把框 1 向右浮動(dòng)時(shí)，它脫離文檔流并且向右移動(dòng)勿她，直到它的右邊緣碰到包含框的右邊緣：
wxss:
.image1 {
display: block;
width: 80rpx;
height: 80rpx;
float: left;
}
.image2 {
display: block;
width: 80rpx;
height: 80rpx;
float: left;
}
.image3 {
display: block;
width: 80rpx;
height: 80rpx;
float: left;
}
如果把所有三個(gè)框都向左移動(dòng)袄秩，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框逢并。
如下圖所示之剧，如果包含框太窄，無法容納水平排列的三個(gè)浮動(dòng)元素砍聊，那么其它浮動(dòng)塊向下移動(dòng)背稼，直到有足夠的空間。如果浮動(dòng)元素的高度不同玻蝌，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”：
wxss:
.image1 {
display: block;
width: 360rpx;
height: 80rpx;
float: left;
}
.image2 {
display: block;
width: 360rpx;
height: 80rpx;
float: left;
}
.image3 {
display: block;
width: 360rpx;
height: 80rpx;
float: left;
}
卡住的wxss:
.image1 {
display: block;
width: 360rpx;
height: 160rpx;
float: left;
}
.image2 {
display: block;
width: 360rpx;
height: 80rpx;
float: left;
}
.image3 {
display: block;
width: 360rpx;
height: 80rpx;
float: left;
}
CSS float 屬性
把圖像向右浮動(dòng)：
img
{
float:right;
}
