間隔模組的底部

2021-10-07 13:55:33 字數 1826 閱讀 1427

這是乙個簡單的示例,其中通過色差將模組與背景分開設定:

沒什麼

均勻填充。

但是只要該模組包含其他元素,填充就可以「關閉」。

pellentesque habitant morbi tristique senectus...

該段落很可能會應用一些全域性排版規則,而該規則很可能會有一些下邊距。 即使您採用了選擇加入排版 ,您也可能會在這裡選擇加入,因為存在型別。

看到沉重的底部填充? 也許對您來說還可以,但我懷疑那不是。 繁重的操作來自於您在模組本身上設定的一致填充以及該段落底部的邊距。

那麼我們在這裡做什麼? 臨時創可貼將消除這些段落的空白。

.module p
但是,我敢肯定,我們同意這是很粗略的。 如果模組包含兩個段落怎麼辦? 現在他們笨拙地對接。

也許只是最後乙個?

.module p:last-child
那可能行得通。 但是此修復程式仍然有些破綻。 如果問題元素整天不是乙個段落怎麼辦? 它可以是。 或。 或任何其他html元素……我們要列出每個html元素嗎?

.module p:last-child,

.module ul:last-child,

.module ol:last-child,

.module dl:last-child

那肯定是一場失敗的戰鬥。

但是我們可以匹配任何元素……

.module *:last-child
您甚至可以在此處省略「 *」,因為它是隱含的,沒有特定性,但我認為它更加清楚。 我認為這更接近乙個好的解決方法,但是有點沉重。 列表始終具有會影響的子元素。 任何有後裔的人都會有問題。 為了解決這個問題,我們只需要確保子模組中只有頂層元素才能通過子選擇器進行處理 。

.module > *:last-child
不錯 我仍然不能稱其為完美,因為後代實際上可能是最終額外增加底部填充的原因。 就像列表項中有段落一樣。 您可能希望將它們鏈結幾次,以達到合理的dom深度級別。

.module > *:last-child,

.module > *:last-child > *:last-child,

.module > *:last-child > *:last-child > *:last-child

那樣就可以了。

這是乙個視覺演示:

在codepen上檢視chris coyier ( @chriscoyier )的pen jfynd

完全不同的方法可能是將底部填充物留在模組之外,讓子元素提供它,但這對我來說有點危險,因為不能保證子元素會自己提供(例如,一些通用的)。

你碰到這個了嗎? 您有自己喜歡的解決方案嗎?

翻譯自:

京東首頁專案 3 底部模組實現

有關京東首頁專案之前已經寫了兩篇部落格 1 京東首頁專案 1 總述 2 京東首頁專案 2 頂部模組實現 這篇就開始寫京東首頁頁面底部分。這篇所需完成的工作如下 這裡一共完成3個部分,1 多快好省模組 2 幫助模組 3 版權模組。這個模組主要是2部分 文字部分 浮動實現 部分 絕對定位實現 如圖 ht...

svm 函式間隔與幾何間隔的認識

在超平面w x b 0 w x b 0 確定的情況下,w x b w x b 可以相對地表示點x距離超平面的遠 近。對於兩類分類問題,如果w x b 0 w x b 0,則 x x 的類別被判定為1 否則判定為 1。所以如果y w x b 0 role presentation style posi...

css模組始終位於瀏覽器底部效果

題目描述 當內容不滿一屏時,底部內容始終位於顯示屏的底部 當內容超過一屏時,則位於內容底部。示例 doctype html html head meta charset utf 8 title footer始終居於底部 title style type text css body html,body...