引言

CSS 為定位和浮動(dòng)提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來(lái)通常需要使用多個(gè)表格才能完成的任務(wù)。

定位的基本思想很簡(jiǎn)單，它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。

浮動(dòng)不完全是定位，不過(guò)，它當(dāng)然也不是正常流布局。

position詳解

一、定位

position屬性允許你對(duì)元素進(jìn)行定位。

二、定位機(jī)制

有三種：普通流，浮動(dòng)，絕對(duì)定位

三、定位屬性值

static，relative，absolute，fixed，-ms-page，initial，unset（后面3個(gè)屬性是小程序中有的）

1. static：元素框正常生成，塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或者多個(gè)行框，置于其父元素中。

2. relative：元素框偏移某個(gè)距離。元素扔保持其未定位前的形狀，它原來(lái)所占的空間扔保留。

相對(duì)定位是一個(gè)非常容易掌握的概念。如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。然后，可以通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。

如果將 top 設(shè)置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果 left設(shè)置為30像素，那么會(huì)在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動(dòng)。

3. absolute：元素框從文檔流中刪除，并相對(duì)于其包含塊定位，包含塊可能是文檔中的另一個(gè)元素或者初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類型的框。

普通流中其它元素的布局就像絕對(duì)定位的元素不存在一樣：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素，如果元素沒(méi)有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊。

4. fixed：元素框的表現(xiàn)類似于將position 設(shè)置為absolute，不過(guò)其包含塊是視窗本身。

5. -ms-page:位置取決于absolute的模式。

6. initial：將指定的值表示為屬性的初始值。

7. 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)容多出來(lái)的東西將根據(jù)overflow的值來(lái)處理。

注意點(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:通過(guò)絕對(duì)定位可以放置在頁(yè)面上任何位置，下面的是距離頂部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)框。

如下圖所示，如果包含框太窄，無(wú)法容納水平排列的三個(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;
  }