前端補充之浮動與定位 透明度

2022-09-21 03:12:11 字數 1382 閱讀 7515

定位脫離文件流

溢位屬性

z-index屬性

透明度瀏覽器頁面實際上是乙個三維空間

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

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

定義:

div
浮動帶來的負面影響

會造成父標籤塌陷!!!

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

解決:哪個標籤塌陷,就新增下面的類

.clearfix:after
注意: 瀏覽器預設都是文字優先展示

1.靜態定位	static

所有的標籤預設都是靜態定位即不能改變位置

2.相對定位 relative

相對標籤原來的位置做定位

3.絕對定位 absolute

相對已經定位過的父標籤做定位(沒有則參考body標籤)

eg:小公尺官網導航條內購物車

4.固定定位 fixed

相對瀏覽器視窗做定位

eg:小公尺官網右邊回到頂部

如何使用css完成定位

定位關鍵字position

位置關鍵字left、right、top、bottom

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

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

不脫離文件流: 相對定位

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

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

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

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

(2) 可以有負值

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

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

rgba(124,124,124,0.5)

只影響顏色

opacity:0.5

影響顏色和字型

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

解決:設定溢位屬性

# 圓形頭像

#d1

#d1 img

應用: 頭像過大

隱藏頭像溢位內容

前端 浮動 定位 溢位 透明度

ps html 時沒有縮排一說的 全部寫在一行也可以 浮動主要就是用於頁面布局的 浮動帶來的負面影響 會造成父標籤塌陷 解決浮動的負面影響 1.再寫乙個div撐場面 不可取 2.關鍵字clear 可以使用 3.通用解決策略 推薦使用 只要父標籤塌陷就使用 clearfix after 誰塌陷就給誰加...

浮動 定位 溢位 z index 透明度了解

浮動之頁面布局 行內行外一行顯示 display inline block 不推薦使用 左右浮動 實際應用 浮動的負面影響 浮動帶來的負面影響 會造成父標籤塌陷 解決浮動的負面影響 1.再寫乙個div撐場面 不可取 3.通過解決策略 推薦使用 只要父標籤塌陷了就使用 通過解決策略 clearfix ...

CSS 定位,z index和透明度

css 定位 position 屬性允許你對元素進行定位。static 預設。位置設定為 static 的元素,它始終會處於頁面流給予的位置 static 元素會忽略任何 top bottom left 或 right 宣告 relative位置被設定為 relative 的元素,可將其移至相對於其...