设置padding最大高度的方法

最新推荐文章于 2024-03-28 17:22:16 发布

莱夹威

最新推荐文章于 2024-03-28 17:22:16 发布

阅读量761

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_42395136/article/details/123047440

版权

有这样一个场景：元素A的width和height是不断变化的，元素B是A的子元素，现在要限制B的最大宽度与padding。

但在设置B的max-width后发现，随着A的扩大，元素B到最大宽度后，宽度不变，padding却仍然不断变大，不受max-width的限制。

这是因为在常规盒模型内，padding不包括在width里。而且padding是根据父元素的width来计算百分比的。

在这里插入图片描述

解决方法
第一种：用怪异盒模型
第二种：设置父元素的max-width
第三种：在A和B之间插入一层C，设置C的max-width

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

莱夹威

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

鸿蒙界面开发——通用属性（1）width&height&margin&padding等尺寸设置

littleyy666的博客

09-03

966

设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。在TextInput组件中，width设置auto表示自适应文本宽度。在AlphabetIndexer组件中，width设置auto表示自适应宽度最大索引项的宽度。在Row、Column、RelativeContainer组件中，width、height设置auto表示自适应子组件。

-百分比设置margin和padding,line-height,height

rocktanga的博客

02-14

1068

用百分数设置margin和padding 用百分数设置margin和paddding的时候，其top right bottom left的值是参照父元素盒子的宽度进行计算,如 .demo1{ width:980px;height:500px; } .demo1 div{margin:10% 5%; } // 相当于margin:98 49; 为什么都是以宽度为标准 1、高度持续增加第一种说法是，padding-top如果以容器高度为参照，那么子元素应用padding值将会继续加高容器的高度，容器.

参与评论您还未登录，请先登录后发表或查看评论

使用padding计算高度实现页面的高度自适应

huangguangyourena的博客

11-24

1127

为什么说要使用padding来计算高度而不是margin呢，这是因为对于每一个dom元素来讲,padding的高度是包含在dom元素内的，而margin是在dom元素之外的。我举个例子，看如下图如果我想计算这个表格的高度，并且让这个表格处于蓝色的方框内，如果表格的高度超过了计算的高度，那么表格内部就会产生滚动条。并且不论怎么缩放浏览器窗口，浏览器都不会有滚动条，这就是我想要实现的自适应。 ...

css之padding

Jancy的博客

03-13

992

1.padding影响元素尺寸：对于block元素： - box-sizing:border-box;padding值大于宽度值，会影响元素宽度 - width非auto，padding值会影响元素宽度 - box-sizing:border-box;同时padding值没有大于宽度值或者width:auto,padding值不会影响元素宽度对于inline元素：水平padding

Tensorflow中padding, max pooling

LWQ0809的博客

01-25

1099

padding在tensorflow中有两种: SAME和VALID VALID: 当剩余的列达不到步长的大小时, 剩余的会被舍弃. SAME: 当剩余的列达不到步长的大小时, 会自动扩充零进行补充. max pooling是CNN当中的最大值池化操作，其实用法和卷积很类似有些地方可以从卷积去参考【TensorFlow】tf.nn.conv2d是怎样实现卷积的？ tf.nn.max_

使用padding代替高度实现背景图片高度按比例自适应

weixin_30684743的博客

03-23

329

本篇文章由：http://xinpure.com/use-padding-instead-of-highly-adaptive-background-image-height-proportionately/ 高度百分比将高度设置成百分比时，其高度是基于父元素来定的，设置成50%，就是将该元素高度设置成父元素的高度值 x 50%。但是将高度设置成百分比时，往往是不生效的！高度依然为0，这是为...

css容器长宽比（用padding-top来控制高度）

weixin_45695200的博客

09-08

968

div上设置一个自定义属性，值为长宽比，假设为4:3。容器宽度width设为100%，高度height先设为0；（因为是用padding-top来控制高度的）接着通过属性选择器，当自定义属性值为比如4:3的时候，padding-top就是 100% × 3/4 = 75% <div class="aa" data-ratio="4:3"></div>. .aa { position: relative; /*因为容器所有子元素需要绝对定位*/ height:

CSS如何设置高度为屏幕高度_面试题联盟之CSS篇

weixin_39948111的博客

11-22

1926

关注入坑互联网，回复“加群”加入我们一起学习，天天进步1、CSS3的新特性实现圆角(border-radius)阴影(box-shadow)文字加特效(text-shadow)线性渐变(gradient)旋转(transform)媒体查询，多栏布局2、CSS中 link 和@import 的区别link属于HTML标签，而@import是CSS提供的;页面被加载的时，link会同时被...

最大padding

热门推荐

Poppy_LYT的博客

08-30

1万+

1、components新建CommentField.vue <template> <div class="comment-field-wrap"> <div class="comment-field__input"> <van-field :value="value" placeholder="请输入留言内容" rows="1" // 显示为一行的高度 type="texta.

Android Text View 去掉默认的padding的实现方法

Mr_Liangxiaobai的博客

01-15

2331

Android Text View 去掉默认的padding的实现方法，简单快捷，一看就懂

CSS开发技巧（五）：妙用padding实现元素的高度和宽度保持比例

u012443286的博客

02-29

1547

在前端开发中，我们可能需要实现一定的适配，其中常见的一个需求是：元素保持高宽比，等比例进行缩放。思路分析现在，我们来分析这一需求：由于需要缩放，宽度和高度都不能写成固定值。要保持高宽比，元素的高度和宽度中有一个属性需要根据另一个属性计算得到，那么先确定高度还是宽度呢？显然，应该先确定宽度。我们的前端开发中一般对于页面高度不会有过多的要求，相比而言宽度显得更为“珍贵”，因此应该先确定...

解决padding高度溢出和自适应高度的小方法

sunny的博客

08-08

7042

1.利用css3中的box-sizing: border-box，防止padding-top高度溢出。（相当于IE6的盒模型） 2.解决自适应高度，实现正方形子盒子。 <div class="wrapper"> <div class="img"></div> </div> * { margin: 0; padding...

盒子模型的内边距——padding

weixin_44004120的博客

01-16

3176

文章目录盒子模型的内边距——paddingpadding的基础属性padding复合属性padding会影响盒子实际大小如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入盒子模型的内边距——padding 盒子由border（边框）、content（内容）、padding（

Web 技术：CSS最小和最大(宽度/高度)知识点及优缺点

粉丝们务必加入微信粉丝群

07-15

7964

通常，我们希望限制元素相对于其父元素的宽度，同时使其具有动态性。因此，有一个基础宽度或高度的能力，使其扩展的基础上，可用的空间。比如说，我们有一个按钮，它的宽度应该是最小的，不应该低于它...

padding 后尺寸变化设置_css 你真的了解padding吗?

weixin_29867607的博客

02-02

1049

前言padding 简写属性在一个声明中设置所有内边距属性,实际上在使用过程中它对block元素和内联元素的处理是不一样的。正文对于block元素如果宽度非auto那么容器会变大，如果容器宽度自适应或者设置了box-sizing:border-box,并且值在可控区间内是不会影响内容宽度的，如果值暴走那么容器肯定会变化。对于内联元素内联元素的padding只会影响左右尺寸，上下尺寸不影响但是背景色...

控制margin,padding,使div不变大

兔老大的胡萝卜

03-23

1529

css3特性 box-sizing:border-box

jq css padding top,CSS属性参考 | padding

weixin_39927288的博客

08-03

313

在HTML页面中，每一个元素都是一个规则的矩形。每一个元素都由一个盒模型来表示，盒模型由4个区域组成：content box(内容区域)、padding box(内边距区域)、border box(边框区域)和 margin box(外边距区域)。元素的内容都被放置在content box(内容区域)中，其它几个区域为可选区域，在你设置了padding、margin和border属性时会生成相应的...

利用padding-top/padding-bottom百分比，进行占位和高度自适应

literarygirl的博客

03-28

733

但是有一个问题，假如我们想要设置max-width的话，在上面样式的基础上，为.item添加max-width 是不起作用的，原因max-width只有在内容撑开高度的时候才起作用，而.item并不是被内容撑开的，为了解决这个问题，还可以使用伪类元素:after，:before，修改之后的样式如下。而且，对于图片等资源来说，加载是需要时间的，即便网页加载速度已经很快了，由于高度被图片撑开的过程，不可避免会出现闪烁，这时候我们的padding-top等就发挥大用处啦。这样就实现了我们想要的效果了。