浮動、定位

weixin_33958585發表於2018-04-02

盒模型

盒模型預設指塊級元素；行內元素預設不能設定width、height、margin
行內元素==>塊級元素: display:block
塊級元素==>行內元素: display:inline
注意：
1. disply:inline-block 行內塊元素
2. position:absolute|fixed 會將元素變為行內塊

使用盒模型

建立浮動盒

能夠使用float屬性建立浮動盒（脫離文字流），浮動盒將元素的左邊界或右邊界移動到包括塊或者還有一個浮動盒的邊界。

值 說明
left 移動元素。使其左邊界挨著包括塊的左邊界，或者還有一個浮動元素的右邊界
right 移動元素。使其右邊界挨著包括塊的右邊界，或者還有一個浮動元素的右邊界
none 元素位置固定

注意事項：

  • 同級的一個元素浮動其它的元素也要浮動
  • 浮動脫離文字流，父元素的寬、高不會被撐開
  • 子元素浮動父元素一定要清除浮動
  • 浮動的行內元素能夠設定寬、高

演示樣例：父元素不設定高、寬

<div class="content">
    <div style="float: left;"></div>
    <div style="float: right;"></div>
</div>

這裡寫圖片描寫敘述

浮動產生負作用

  • 邊框不能撐開
  • 背景不能顯示：假設父級設定了背景，而父級不能被撐開，所以導致不能顯示。

  • margin padding不能按設定值正常展示：

清除浮動方法

  • 浮動元素的同級元素加入一個空標籤

    .clear{clear: both}
<div class="clear"></div>

  • 浮動元素的父級的元素中加入下述樣式

    overflow:hidden 或者 display:table

  • 浮動元素的父級的元素中使用偽類屬性（經常使用）

    .clearfix:after{content:""; display:block; clear:both;}
.clearfix{zoom: 1;}

通過上述三種方法的隨意一種。可展示正常

這裡寫圖片描寫敘述

建立佈局

定位屬性

屬性 說明
position 設定定位
left|right|top|bottom 為定位元素設定偏移量
z-index 設定定位元素的層疊順序

注意：“left”、”top”、”right”、”bottom”以及”z-index”屬性僅僅有設定了定位（除static）才生效。

定位型別

值 說明
static 預設值，元素為普通佈局
relative 相對定位。元素位置相對於普通位置定位
absolute 絕對定位。元素相對於position值不為static的第一位祖先元素來定位（脫離文字流）
fixed 固定定位，元素相對於瀏覽器窗體來定位（脫離文字流） 
<!-- 頁面通用樣式 -->
<style type="text/css">
  .content {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    color: #fff;
  }
  .content div{
    width: 100px;
    height: 100px;
    border: 1px solid;
    text-align: center;
    line-height: 100px;
  }
</style>
<!-- 定位樣式 -->
<style>
  .static {
    position: static;
    background: red;
  }
  .relative {
    position: relative;
    top: 50px;
    left: 50px;
    background: black;
  }
  .absolute {
    position: absolute;
    top: 50px;
    left: 50px;
    background: blue;
  }
  .fixed {
    position: fixed;
    top: 50px;
    left: 50px;
    background: blue;
  }
</style>

<!-- 頁面結構 -->
<div id="content"></div>
<div id="content">
    <div class="static">static-1</div>
    <div class="static">static-2</div>
    <div class="relative">relative</div>
    <div class="absolute">absolute</div>
    <div class="fixed">fixed</div>
</div>

相對定位（relative）：相對於自己原位置進行偏移，在文字流中的位置依舊存在，不脫離文件流；
這裡寫圖片描寫敘述

絕對定位（absolute）：對於position值不為static的第一位祖先元素來定位（未找到。則相對body元素），在正常流中的位置不在存在。脫離文件流；
這裡寫圖片描寫敘述

固定定位（fixed）：一直位於可視窗體的指定位置，不受滾動欄影響，脫離文件流。
這裡寫圖片描寫敘述

相關文章