16css排版 正常流

2021-10-21 13:47:53 字數 434 閱讀 1190

1.正常流的行為

2.正常流的原理

一句話描述正常流的排版行為:依次排列,排不了換行。

2-1 格式化上下文

在css標準中,規定了如何排布每乙個文字或者盒的演算法,這個演算法依賴乙個排版的」當前狀態「,css把這個當前狀態稱為」格式化上下文「。

我們需要排版的盒,分為塊級盒和行內級盒,所以排版需要分別為它們規定了塊級格式化上下文行內級格式化上下文

一些元素會在其內部建立新的塊級格式化上下文:

浮動元素

絕對定位元素

非塊級但仍任能包含塊級元素的容器(如inline-blocks、table-cells、table-captions)

塊級的能包含塊級元素的容器,且屬性overflow不為visible。

16 css實現模糊背景

使用屬性 filter 2px 普通背景模糊 為了美觀不能使背景前的文字模糊,而filter屬性會使這整個div的後代並且還會出現白邊。也就是說無法達到這個效果。怎麼辦呢?我們可以使用偽元素,這樣我們也順便解決了白邊的問題。實現思路 在父容器中設定背景,並且使用相對定位,方便偽元素重疊。而在 aft...

16 css實現模糊背景

使用屬性 filter 2px 普通背景模糊 為了美觀不能使背景前的文字模糊,而filter屬性會使這整個div的後代並且還會出現白邊。也就是說無法達到這個效果。怎麼辦呢?我們可以使用偽元素,這樣我們也順便解決了白邊的問題。實現思路 在父容器中設定背景,並且使用相對定位,方便偽元素重疊。而在 aft...

16 CSS的優先順序特性Specificity

如果同個元素有兩個或以上衝突的css規則,瀏覽器有一些基本的規則來決定哪乙個非常特殊而勝出。它可能不像其它那麼重要,大部分案例你不需要擔心衝突,但大型而且複雜的css檔案,或有很多css檔案組成的,可能產生衝突。選擇器一樣的情況下後面的會覆蓋前面的屬性。比如 p p p元素的元素將是藍色,因為遵循後...