前端 浮動 定位 溢位 透明度

2022-09-21 07:21:09 字數 982 閱讀 3902

# ps:html**時沒有縮排一說的 全部寫在一行也可以

"""浮動主要就是用於頁面布局的!!!"""

# 浮動帶來的負面影響

"""會造成父標籤塌陷!!!"""

解決浮動的負面影響

1.再寫乙個div撐場面(不可取)

2.關鍵字clear(可以使用)

3.通用解決策略(推薦使用):只要父標籤塌陷就使用

.clearfix:after

# 誰塌陷就給誰加class屬性

# 瀏覽器預設都是文字優先展示

1.靜態定位	static

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

2.相對定位 relative

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

3.絕對定位 absolute

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

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

4.固定定位 fixed

相對瀏覽器視窗做定位

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

如何使用css完成定位

定位關鍵字position

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

# 標籤位置改變之後 原來的位置是否會空出來

如果空出來了被其他標籤自動占有 那麼表示脫離否則不脫離

浮動、定位

脫離文件流

浮動、絕對定位、固定定位

不脫離文件流

相對定位

# 圓形頭像

#d1

#d1 img

# 瀏覽器平面不是乙個二維座標系而是乙個三維座標系
rgba(124,124,124,0.5)

只影響顏色

opacity:0.5

影響顏色和字型

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

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

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

定位脫離文件流 溢位屬性 z index屬性 透明度瀏覽器頁面實際上是乙個三維空間 一般標籤都是設定在最底層的平面上 浮動就是使得平面上的標籤漂浮到上層,不占用底層平面的空間 定義 div浮動帶來的負面影響 會造成父標籤塌陷 也就是位於底層平面上沒有設定長寬大小的父標籤不再被內部的浮動標籤撐起 解決...

CSS 定位,z index和透明度

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