盒模型與頁面佈局——Float佈局

實現效果圖

知識要點

• float屬性：浮動的框可以左右·，直到它的邊緣碰到包含框或另一個浮動框的邊框爲止。

• Float屬性的合法值

• left：左浮動

• right：右浮動

• none：默認值元素不浮動，並會顯示其在文本中出現的位置

• inherit：規定應該從父元素繼承float屬性的值

• clear（清除浮動）屬性的合法值

• left：在左側不允許有浮動元素

• right：在右側不允許有浮動元素

• both：在左右兩側不允許有浮動元素

• none：默認值，允許浮動元素出現在左右兩側

• inherit：繼承父元素clear屬性的值

利用margin屬性實現水平居中對齊，如果要實現塊元素的水平居中對齊，可以通過讓margin左右邊距爲auto的方式來實現，這樣塊元素將平均分配左右邊距，從而實現水平居中對齊。

案例代碼

<!--pages/API/API/Layout-II.wxml-->
<view class='box'>
  <view class='title'>Float頁面佈局</view>




  <view class='bg1'>
    <view class='box1'>box1</view>
    <view class='box2'>box2</view>
    <view class='box3'>box3</view>
    <view class='box4'>box4</view>
  </view>




  <view class='bg2'>
    <view class='header'>header</view>
    <view class='leftBar'>leftBar</view>
    <view class='main'>main</view>
    <view class='rightBar'>rightBar</view>
    <view class='footer'>footer</view>
  </view>




</view>

/* pages/API/API/Layout-II.wxss */
.bg1 {
  /* 背景1 */
  height: 240px;
  width: 200px;
  margin: 10px auto; /* 上下邊距爲10px，左右邊距平均分配（實現水平居中對齊） */
}




.box1 {
  /* 背景1中的第1個顏色塊 */
  width: 100px;
  height: 80px;
  background-color: red;
  margin: 0 auto;
}




.box2 {
  /* 背景1中的第2個顏色塊 */
  width: 100px;
  height: 80px;
  background-color: yellow;
  float: left; /* 左浮動 */
}




.box3 {
  /* 背景1中的第3個顏色塊 */
  width: 100px;
  height: 80px;
  background-color: gold;
  float: right; /* 左浮動 */
}




.box4 {
  /* 背景1中的第4個顏色塊 */
  width: 100px;
  height: 80px;
  background-color: greenyellow;
  margin: 0 auto;
  clear: both; /* 清除左右兩邊浮動 */
}




.bg2 {
  /* 背景2 */
  height: 400rpx;
  text-align: center;
  margin: 10px auto;
}




.header {
  /* 頭部標題區 */
  line-height: 100rpx; /* 定義行高，同時實現文字垂直方向居中對齊 */
  background-color: red;
}




.leftBar {
  /* 左邊導航區 */
  width: 20%;
  line-height: 200rpx; /* 定義行高，同時實現文字垂直方向居中對齊 */
  background-color: yellow;
  float: left; /* 左浮動 */
}




.main {
  /* 中間內容區 */
  width: 60%;
  line-height: 200rpx;
  background-color: rgb(157, 255, 0);
  float: left; /* 左浮動 */
}




.rightBar {
  /* 右邊內容區 */
  width: 20%;
  line-height: 200rpx;
  background-color: yellow;
  float: right; /* 右浮動 */
}




.footer {
  /* 底部版權區 */
  line-height: 100rpx;
  background-color: red;
  clear: both;
}