內(nèi)容概述

一. CSS屬性 - position

• CSS屬性 - position
  • static：靜態(tài)定位
  • relative：相對(duì)定位
    • 圖片居中
  • absolute：絕對(duì)定位
    • 圖片案例
    • 二維碼案例
  • fixed：固定定位

標(biāo)準(zhǔn)流 normal flow

• 默認(rèn)情況下摔癣，元素都是按照normal flow（標(biāo)準(zhǔn)流贾虽、常規(guī)流潘酗、正常流陆蟆、文檔流document flow）進(jìn)行排布
  • 從左到右江锨、從上到下按順序擺放好
  • 默認(rèn)情況下送爸，互相之間不存在層疊現(xiàn)象
• margin灌闺、padding定位
  • 在標(biāo)準(zhǔn)流中骤公，可以使用margin像捶、padding對(duì)元素進(jìn)行定位
    • 其中margin還可以設(shè)置負(fù)數(shù)
  • 比較明顯的缺點(diǎn)是
    • 設(shè)置一個(gè)元素的margin或者padding上陕，通常會(huì)影響到標(biāo)準(zhǔn)流中其他元素的定位效果
    • 不便于實(shí)現(xiàn)元素層疊的效果

position: static 靜態(tài)定位（position屬性的默認(rèn)值）

• 按照normal flow布局
• left 、right拓春、top释簿、bottom沒有任何作用

position: relative 相對(duì)定位

• 元素按照normal flow布局
• 可以通過left、right硼莽、top庶溶、bottom進(jìn)行定位
  • 定位參照對(duì)象是元素自己原來的位置
• 相對(duì)定位的應(yīng)用場(chǎng)景
  • 在不影響其他元素位置的前提下，對(duì)當(dāng)前元素位置進(jìn)行微調(diào)
• 圖片居中

position: absolute 絕對(duì)定位（脫標(biāo)）

• 元素脫離normal flow（脫離標(biāo)準(zhǔn)流沉删、脫標(biāo)）

  可以通過left渐尿、right、top矾瑰、bottom進(jìn)行定位
  定位參照對(duì)象是最鄰近的定位祖先元素
  如果找不到這樣的祖先元素砖茸，參照對(duì)象是視口

  定位元素（positioned element）
  position值不為static的元素
  也就是position值為relative、absolute殴穴、fixed的元素

絕對(duì)定位技巧【疑難】

• 絕對(duì)定位元素（absolutely positioned element）
  • position值為absolute或者fixed的元素
• 對(duì)于絕對(duì)定位元素來說
  • 定位參照對(duì)象的寬度 = left + right + margin-left + margin-right + 絕對(duì)定位元素的實(shí)際占用寬度
  • 定位參照對(duì)象的高度 = top + bottom + margin-top + margin-bottom + 絕對(duì)定位元素的實(shí)際占用高度
• 如果希望絕對(duì)定位元素的寬高和定位參照對(duì)象一樣凉夯，可以給絕對(duì)定位元素設(shè)置以下屬性
  • left: 0、right: 0采幌、top: 0劲够、bottom: 0、margin:0
• 如果希望絕對(duì)定位元素在定位參照對(duì)象中居中顯示休傍，可以給絕對(duì)定位元素設(shè)置以下屬性
  • left: 0征绎、right: 0、top: 0磨取、bottom: 0人柿、margin: auto
  • 另外，還得設(shè)置具體的寬高值（寬高小于定位參照對(duì)象的寬高）

• 絕對(duì)定位就像貼紙忙厌，需要就往上貼：
  • 圖片案例
  • 二維碼案例

position: fixed 固定定位（脫標(biāo)）

• 元素脫離normal flow（脫離標(biāo)準(zhǔn)流凫岖、脫標(biāo)）
• 可以通過left、right逢净、top哥放、bottom進(jìn)行定位
  • 定位參照對(duì)象是視口（viewport）
  • 視口（Viewport）
    • 文檔的可視區(qū)域
    • 如右圖紅框所示
• 當(dāng)畫布滾動(dòng)時(shí)歼指，固定不動(dòng)
• 側(cè)邊欄

脫離標(biāo)準(zhǔn)流（脫標(biāo)）

• 可以隨意設(shè)置寬高（都變成塊級(jí)元素）
• 寬高默認(rèn)由內(nèi)容決定（包裹內(nèi)容）
• 不再受標(biāo)準(zhǔn)流的約束
• 不再給父元素匯報(bào)寬高數(shù)據(jù)

二. CSS屬性 - z-index

• 不設(shè)置的話，初始值為auto

• z-index屬性用來設(shè)置定位元素的層疊順序（僅對(duì)定位元素有效）

  • 取值可以是正整數(shù)甥雕、負(fù)整數(shù)踩身、0

• 比較原則

  • 如果是兄弟關(guān)系
    • z-index越大，層疊在越上面
    • z-index相等犀农，寫在后面的那個(gè)元素層疊在上面
  • 如果不是兄弟關(guān)系
    • 各自從元素自己以及祖先元素中惰赋，找出最鄰近的2個(gè)定位元素進(jìn)行比較
    • 而且這2個(gè)定位元素必須有設(shè)置z-index的具體數(shù)值

作業(yè)

1.四個(gè)案例

• 圖片居中
• 側(cè)邊欄
• 商品大圖, 有6個(gè)a的案例
• 二維碼案例

2.考拉導(dǎo)航的個(gè)人中心的下拉

3.預(yù)習(xí)浮動(dòng)

絕對(duì)路徑

相對(duì)路徑:

脫離標(biāo)準(zhǔn)流的元素: position: fixed/absolute, float

和display有什么關(guān)系?

display: block/inline/inline-block

img/iframe

提問

box-sizing的兩個(gè)值:

• content-box
  • width: 只是設(shè)置content的大小
• border-box
  • width: 設(shè)置border+padding+content

background的相關(guān)屬性:

• background-color
• image
• size
• position
• attachment
• repeat
• background