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

2022-09-20 18:15:11 字數 2113 閱讀 4542

浮動之頁面布局

行內行外一行顯示

/*display: inline-block; */ 不推薦使用

左右浮動

實際應用

浮動的負面影響

# 浮動帶來的負面影響

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

""" 解決浮動的負面影響

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

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

通過解決策略

.clearfix:after 

# 實操

""" 自定義浮動邊距為0,所以d1,d2中間沒有空隙

"""

靜態定位 static

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

相對定位 relative

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

絕對定位 absolute

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

固定定位 fixed

相對瀏覽器視窗做定位

如何使用css完成定位

定位關鍵字position

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

例項
啥也沒有

回到頂部

是否脫離文件流

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

如果空出來被其他標籤自動占有

浮動、定位

脫離文件流

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

不脫離文件流

相對定位

實操

# 需要要匯入檔案

# 瀏覽器平面不是乙個二維座標系而是乙個三維座標系
實操
我是最底層的文字內容

只影響顏色

opacity:0.5

影響顏色和字型

實操
快要吃飯了 好激動

人生的意義和價值在**

# j**ascript簡稱js 與j**a沒有關係!

# js是一門程式語言

# js是一門程式語言但是邏輯非常的不嚴謹

# js很容易...

j**ascript補充
類中引入方式

1.script標籤內直接編寫(學習時使用)

2.script標籤src屬性匯入外部js檔案(最正規)

注釋語法

html:

css:/**/

js://單行 /*多行*/

# 模板注釋語法

前端 浮動 定位 溢位 透明度

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

CSS 定位,z index和透明度

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

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

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