2020Web前端知識點總結 CSS篇(四)

2021-10-03 19:08:06 字數 1117 閱讀 3763

隱藏乙個元素可以通過把display屬性設定為"none",或把visibility屬性設定為"hidden"。但是請注意,這兩種方法會產生不同的結果。

visibility:hidden可以隱藏某個元素,但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說,該元素雖然被隱藏了,但仍然會影響布局。

display:none可以隱藏某個元素,且隱藏的元素不會占用任何空間。也就是說,該元素不但被隱藏了,而且該元素原本占用的空間也會從頁面布局中消失。

visibility

:hidden;

display

:none;

visibility

: visible;

display

:block;

display

:inline;

overflow

屬性可以控制內容溢位元素框時在對應的元素區間內新增滾動條。

overflow

:visible;

/* 預設值。內容不會被修剪,會呈現在元素框之外。 */

overflow

:hidden ;

/* 內容會被修剪,並且其餘內容是不可見的。 */

overflow

:scroll ;

/* 內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。 */

overflow

:auto ;

/* 如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。 */

overflow

:inherit;

/* 規定應該從父元素繼承 overflow 屬性的值。 */

position

:staic;

position

:relative;

position

: fixed;

position

: absolute;

position

: sticky;

float

:right;

float

:left;

clear

:both;

web前端知識點小結 (四)

a 寬度為明確值 margin left和marginright同時為auto b 寬度不確定 position absolute left 50 margin top x 其中x 100 元素高度佔據容器的比例 2 或者position absolute top 50 margin top 元素高...

前端知識點總結(四)

css篇 5.visiility中有個collapse屬性的作用?用在 中,隱藏一行或一列,並會釋放空間,chrome除外。6.出現浮動的原因,怎麼清除浮動?乙個盒模型設定類浮動,導致父級物件不能被撐開,這樣就產生類浮動,需要清除浮動。清除浮動方法 計算子容器高度 新增clear both 父級 o...

前端開發知識點總結

很多時候我們會有下面的場景,如下圖中所顯示的那樣。點選1區域 從圖上看1區域包含2區域 和2區域跳轉不同的鏈結。正常的 結構應該是 但是上面的 瀏覽器的編譯結果是下面這樣 很明顯可以發現,瀏覽器的渲染結果並不是我們想要的結果。那麼是為什麼呢?根據 w3c 規範,a 標籤是不是巢狀 a 標籤的。如果出...