等高布局 padding補償法

2021-08-31 21:39:49 字數 393 閱讀 4478

在聖杯布局中有使用到padding補償法

這個方法的步驟:是首先把列的padding設為乙個足夠大的值,再把列的margin設乙個與前面的padding的正值相抵消的負值,在父容器中要記得設定超出隱藏 >>> overflow:hidden,這樣就可以在元素高度不變時,保持現有高度不變。

我的理解:當父容器被裡面最高的那個元素撐到一定高度時,其他高度不夠的元素就可以使用padding方法來將自身的容器撐高,使得父元素內各個容器的高度是一樣的,而背景是可以顯示在padding中的,邊框也是可以隨著padding而運動的,這樣就可以讓父元素中的每個元素的高度保持一致。

padding一般來說是根據實際情況來設定的,但是設定的大一些也沒有關係。

**最好使用padding-bottom和margin-bottom

等高布局 詳解

3 等高布局 height auto時的現象 height auto 全部都是內容撐開 每一列盒子高度同時變化,以最高的那列為基準 整個盒子的高度應該取決於最高的那列 3 真等高 背景盒子法 原理 父盒子取決於內容盒子裡最高的盒子的高度 1.多列浮動併排 清除浮動影響 2.給最外側的盒子再套幾個盒子...

偽等高布局

偽等高布局title charset utf 8 name viewport content width device width initial scale 1.0 type text css container box1 box2 box1 box2 clearfix after box3 bo...

CSS等高布局

做一些後台專案,和一下帶側邊欄專案的時候登高布局很常用,總結了下有幾種 1.margin bottom方法 這裡直接介紹我認為的最佳的側邊欄 分欄高度自動相等方法。核心的css 如下 數值不固定 margin bottom 3000px padding bottom 3000px 再配合父標籤的ov...