內容概要

• 浮動
  • 浮動帶來的負面影響
• 定位
• 脫離文件流
• 溢位屬性
• z-index屬性
• 透明度

內容詳細

一、浮動

瀏覽器頁面實際上是一個三維空間

一般標籤都是設定在最底層的平面上

浮動就是使得平面上的標籤漂浮到上層，不佔用底層平面的空間

定義:

div {
    float: left;  /*向左漂浮*/
    float: right; /*向右飄浮*/
}

浮動帶來的負面影響

會造成父標籤塌陷!!!

也就是位於底層平面上沒有設定長寬大小的父標籤不再被內部的浮動標籤撐起

解決：哪個標籤塌陷，就新增下面的類

.clearfix:after {
    content: '';
    clear: both;
    display: block;
}
 

注意： 瀏覽器預設都是文字優先展示

二、定位

1.靜態定位	static
	所有的標籤預設都是靜態定位即不能改變位置
2.相對定位	relative
	相對標籤原來的位置做定位
3.絕對定位  absolute  
	相對已經定位過的父標籤做定位(沒有則參考body標籤)
    	eg:小米官網導航條內購物車
4.固定定位  fixed
	相對瀏覽器視窗做定位
    	eg:小米官網右邊回到頂部
如何使用css完成定位  
	定位關鍵字position
    位置關鍵字left、right、top、bottom

三、脫離文件流

也就是將元素從普通的佈局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位。

脫離文件流： 浮動、絕對定位、固定定位

不脫離文件流： 相對定位

是否為脫離文件流的判斷標準是，標籤位置改變之後 原來的位置是否會空出來，如果空出來了被其他標籤自動佔有 那麼表示脫離否則不脫離

四、z-index屬性

• 1、z-index定義

z-index 屬性指定一個元素的堆疊順序。

擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

• 2、使用

（1）必須在定位元素（position:relative/absolute/fixed/sticky）上才有效

（2） 可以有負值

（3）不同父元素的子元素之間進行顯示時，會根據父級元素的z-index進行渲染.

eg:百度登入或者退出介面>>>:三明治結構(模態框)

五、透明度（opacity）

指定透明度的屬性是opacity,屬性值從 0.0 到 1.0。值越小，越透明。

rgba(124,124,124,0.5)
	隻影響顏色
opacity:0.5
    影響顏色和字型

六、溢位屬性

在給div標籤設定了長寬大小之後，標籤裡面的文字內容或者圖片標籤的大小可能會因為體量太大而溢位到了div標籤之外

解決：設定溢位屬性

# 圓形頭像
#d1 {
            width: 200px;
            height: 200px;
            border: 3px solid darkgray;
            border-radius: 50%;
            overflow: hidden;
        }
#d1 img {
            /*max-width: 100%;*/
            width: 100%;
        }

應用：
	頭像圖片過大
    隱藏頭像溢位內容