等高布局——padding补偿法

最新推荐文章于 2021-08-18 17:01:06 发布
最新推荐文章于 2021-08-18 17:01:06 发布
阅读量534 收藏
点赞数
分类专栏： HTML+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W_mizi/article/details/84074831
版权

在圣杯布局中有使用到padding补偿法

这个方法的步骤：是首先把列的padding设为一个足够大的值，再把列的margin设一个与前面的padding的正值相抵消的负值，在父容器中要记得设置超出隐藏 >>> overflow:hidden，这样就可以在元素高度不变时，保持现有高度不变。

我的理解：当父容器被里面最高的那个元素撑到一定高度时，其他高度不够的元素就可以使用padding方法来将自身的容器撑高，使得父元素内各个容器的高度是一样的，而背景是可以显示在padding中的，边框也是可以随着padding而运动的，这样就可以让父元素中的每个元素的高度保持一致。

padding一般来说是根据实际情况来设置的，但是设置的大一些也没有关系。
**最好使用padding-bottom和margin-bottom

W_mizi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
等高布局的三种方法
weixin_43700362的博客
12-11 759
等高布局一： 以三栏登高布局为例，第一栏宽30%，第二栏宽40%，第三栏宽30%。 1 几栏就写几个容器，分别为爷爷，爸爸，儿子的关系（暂时宽度都设置为100%）。 2 使用相对定位，把爸爸向左侧移动30%，漏出爷爷的30%。 3 使用相对定位，把儿子向左侧移动40%，漏出爸爸的40%。 4 在儿子里面写左中右三栏，给此三栏设置浮动，让他们在同一行显示。 5 使用相对定位，把第三栏定位到和爷爷漏出...
布局技巧（等高、圣杯）
x0572_的博客
07-29 182
布局
pytorch——图像深度/padding（学习笔记）
seven_zhouyan的博客
04-17 890
1、图像深度 素深度和图像深度是两个相互关联但又有所不同的两个概念。像素深度是指存储每个像素所需要的比特数。假定存储每个像素需要8bit，则图像的像素深度为8。图像深度是指像素深度中实际用于存储图像的灰度或色彩所需要的比特位数。假定图像的像素深度为16bit，但用于表示图像的灰度或色彩的位数只有15位，则图像的图像深度为15。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图...
八种创建等高列布局
AllinShang的专栏
02-20 1192
转自：http://www.w3cplus.com/css/creaet-equal-height-columns 高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道
CSS等高布局的7种方式
weixin_34015336的博客
05-04 374
前面的话 　　等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高，伪等高只是看上去等高而已，真等高是实实在在的等高。本文将介绍边框模拟、负margin这两种伪等高以及table实现、absolute实现、flex实现、grid实现和js判断这五种真等高布局   伪等高 边框模拟 　　因为元素边框和元素高度始终是相同高度，用元素的边框颜色来伪装左右两个兄弟元素...
css——之三行三列等高布局图文教程
10-30
CSS三行三列等高布局图文教程 本文将详细介绍如何使用CSS实现三行三列等高布局，并提供了详细的图文教程。 一、创建结构 首先，我们需要创建一个基本的HTML结构，包括header、container和footer三个部分。 ```...
利用margin实现等高布局
09-25
主要介绍了利用margin实现等高布局，实际上高度不相等的。只是隐藏了超出的部分，需要的朋友可以参考下
CSS 三栏等高布局实现方法
09-25
CSS 三栏等高布局实现方法 ...我们可以使用 float 属性来让三个栏目浮动在一起，并且使用 padding-bottom 和 margin-bottom 属性来实现等高布局。最后，我们可以使用 position: relative; 属性来调整栏目的位置。
等高布局
03-17
等高布局是网页设计中的一种常见布局方式，其主要目的是使网页中的多个元素或模块在垂直方向上保持相同的高度，即使内容量不同，也能保证视觉的一致性。这种布局方式通常用于创建网格系统、侧边栏与主要内容区域的...
css设置多列等高布局的方法示例
09-22
本文将详细讲解三种使用CSS实现多列等高布局的方法：弹性盒子布局（Flexbox）、表格单元格布局（Table-Cell）以及假等高列布局（Padding-Margin负值）。 1. **弹性盒子布局（Flexbox）** Flexbox是CSS3引入的一种...
等高布局实现的两种方式
yangyanqin2545的博客
04-22 675
等高布局实现的两种方式： 第一种方式： （1）利用padding-bottom和margin-bottom相抵消 （2）利用paddig-bottom 撑开显示更多的背景； margin-bottom的负值抵消padding的占位； 代码的实现如下： <style> .box{ width: 600px; min-height: 400px; overflow: hidden; }
CSS等高布局的6种方式
uffgfbft的博客
11-02 250
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img
AES算法ECB模式PKCS7Padding补码方式解密
qq_36395578的博客
08-18 864
找资料很久，记录一下，只做参考 //maven配置 <dependency> <groupId>org.bouncycastle</groupId> <artifactId>bcprov-jdk15on</artifactId> <version>1.47</version> </dependency> //加载解密类 static { try {
关于TensorFlow的padding操作是如何补充0 的
热门推荐
accumulate_zhang的博客
10-26 1万+
1.podding='SAME'时，全0填充。 2.padding=“VALID”,不使用全0填充 原本书上的内容，一开始看的时候没注意，没仔细看，只是单纯的理解为padding为SAME就补0；为VALID就不补0； 后来看代码的时候感觉不对劲，后来找了一些资料，才醒悟过来 参考链接：http://blog.csdn.net
CSS利用padding和margin正负相消实现多列等高
snowstorm的博客
04-06 4996
原文链接：http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html CSS布局奇淫技巧之-多列等高 什么是等高布局? 先来看一个案例：   上图中的页面的主体内容是两列结构，左列是用来导航的，右列是用来显示内容的。我们看到它们有一个共同的边框，中间还有一条分隔线，左右两列的高度都是不固定的。这种情况下就需要两列的高
Html+CSS 多列等高布局 padding补偿法 《精通CSS高级WEB标准解决方案》读书笔记
迎难而上
03-31 2611
今天博主看了一种多列等高布局的方法，分享给大家。 主要思想： 原理： 这种技术的关键是给每个框设置大的底内边距，然后用数值相似的负外边距消除这个高度。这会导致每个列溢出容器元素。如果把容器的overflow属性设置为hidden,列就在最高点被裁切。 知识背景: 1.background 会填充内边距 padding，而不会填充外边距 margin 。 2.通过 overflow:hi
padding补偿法实现两列等高
weixin_33709590的博客
06-29 139
前言： 1.布局类问题文字太多会搞得很懵逼，通过代码更好理解(见下述代码) &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;padding补偿法实现两列等高&lt;/title&gt; &lt;sty
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值