零基礎學習前端容易理解錯的地方

2021-10-06 10:32:29 字數 1071 閱讀 6425

在我目前所學知識中,flex彈性布局是我目前使用的最多的布局方式

在前期寫靜態頁面的時候,使用display:flex將盒子設定成彈性盒子進行布局是相對使用的比較多的一種布局方式

今天主要記錄下flex:1flex-grow: 1的區別

我一開始學習的時候,因為flexflex-growflex-shrinkflex-basis三個的簡寫,所以我一直以為flex:1flex-grow: 1是沒有任何區別的,直到寫出來,頁面的內容還是會發生變化。

1.當flex-grow: 1的時候,另外兩個屬性的預設值,flex-shrink=1,flex-basis=auto,

2.當flex: 1的時候,它的三個屬性的值為

flex-grow: 1,flex-shrink=1,flex-basis=0%,(當flex-basis=0%時,即專案的基礎尺寸為0,專案自身的尺寸會計算進剩餘空間,再進行剩餘空間的分配)

section 

section:nth-child(2)

section:nth-child(3)

頁面中展示的結果

那麼這三個有什麼區別呢

opacity:0在頁面中會占用尺寸,且可以被選中,滑鼠懸停的時候能實現hover的效果

display:none在頁面中不會占用尺寸,不會被選中,且不能加入過渡效果

visibility:hidden在頁面中會占用尺寸,不會被選中,滑鼠懸停的時候不能實現hover的效果

零基礎學習前端

最近也是找了個學校學習前端,將這幾天學到的東西做個小結 下面就是html的基礎筆記了!1.html 全名叫 超文字標記語言 hyper text markup languge html標籤的基本結構 雙標籤 有開始和結束的標籤叫雙標籤,例如 單標籤 只有開始沒有結束的標籤叫單標籤 根節點頭部標籤 標...

零基礎學習C C 需要注意的地方

談及c c 功能強大 應用廣泛,一旦掌握了後,若是再自學其他語言就顯得輕而易舉了。那為什麼學c c 的人少呢?很多人認為c c 雖然博大精深,但也難學。其實就本人認為c c 並程式設計客棧非是 difficult 困難 的,只要你能理清思路,掌握它的精髓,配合一套教材。那麼學c c 是一件非常容易且...

前端小白的高階歷程 HTML零基礎學習第一課

web前端基礎 html html 超文字標記語言 標記語言是一套標記標籤 html使用標記標籤來描述網頁 html文件是解釋執行的 也有單獨出現的,例如 等。html分為頭部與主體兩部分,這是最基本的必備結構 頭部標記 不顯示在網頁上 包括頁面標題標記 元資訊標記 樣式標記 指令碼標記 鏈結標記 ...