我们可以在css中定义min-margin和max-margin max-padding和min-padding吗

我们可以在 CSS 中定义min-margin和max-margin,max-padding和min-padding吗?

我们可以在 CSS 中定义min-marginmax-marginmax-paddingmin-padding吗?

134

是的,你可以!

或者,如果不是这些术语,那么至少是下一个最好的事情。在 2020 年,使用 CSS 数学函数现在非常简单:min()max()clamp()

min计算从逗号分隔的值列表(任意长度)中选择最小的值。这可用于定义 max-padding 或 max-margin 规则:

padding-right: min(50px, 5%);

max计算类似地从逗号分隔的值列表(任何长度)中选择最大值。这可用于定义最小填充或最小边距规则:

padding-right: max(15px, 5%);

clamp取三个值:最小值首选值最大值

padding-right: clamp(15px, 5%, 50px);

MDN 指定钳位实际上只是简写:

max(MINIMUM, min(PREFERRED, MAXIMUM))

这里有一个clamp用于在值100px200px之间包含25vw边距:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.container {
  width: 100vw;
  border: 2px dashed red;
}
.margin {
  width: auto;
  min-width: min-content;
  background-color: lightblue;
  padding: 10px;
  margin-right: clamp(100px, 25vw, 200px);
}
<div class="container">
  <div class="margin">
    The margin-right on this div uses 25vw as its preferred value,
    100px as its minimum, and 200px as its maximum.
  </div>
</div>

数学函数可以在各种不同的场景中使用,甚至可能是模糊的场景,如缩放font-size-它们不仅仅用于控制边距和填充。

Here is the caniuse list of browser support。覆盖范围通常非常好,包括几乎所有现代浏览器-除了一些辅助移动浏览器,尽管我自己没有测试过。

51

更新 2020

使用新的(编辑草稿中的)CSS 4 属性,您可以通过使用min()max()来实现此目的(也可以使用clamp()作为min()max()的简写

clamp(MIN,VAL,MAX)is resolved asmax(MIN,min(VAL,MAX)) min()syntax:
min( <calc-sum># )
where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
where 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
max()syntax:
max( <calc-sum># )
    
where
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
    
where  
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
clamp()syntax:
clamp( <calc-sum>#{3} )
where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
where 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

片段

.min {
  /* demo */
  border: green dashed 5px;
  /*this your min padding-left*/
  padding-left: min(50vw, 50px);
}
.max {
  /* demo */
  border: blue solid 5px;
  /*this your max padding-left*/
  padding-left: max(50vw, 500px);
}
.clamp {
  /* demo */
  border: red dotted 5px;
  /*this your clamp padding-left*/
  padding-left: clamp(50vw, 70vw, 1000px);
}
/* demo */
* {
  box-sizing: border-box
}
section {
  width: 50vw;
}
div {
  height: 100px
}
/* end of demo */
<section>
  <div class="min"></div>
  <div class="max"></div>
  <div class="clamp"></div>
</section>

旧答案

不,你不能。

marginpadding属性没有min/max前缀

一个近似的方法是使用相对单位(vh/vw),但仍然不是min/max

正如 @ vigilante_stark 在the answer中指出的那样,CSS calc()函数可能是另一种解决方法,如下所示:

/* demo */
* {
  box-sizing: border-box
}
section {
  background-color: red;
  width: 50vw;
  height: 50px;
  position: relative;
}
div {
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0
}
/* end of demo */
.min {
  /* demo */
  border: green dashed 4px;
  /*this your min padding-left*/
  padding-left: calc(50vw + 50px);
}
.max {
  /* demo */
  border: blue solid 3px;
  /*this your max padding-left*/
  padding-left: calc(50vw + 200px);
}
<section>
  <div class="min"></div>
  <div class="max"></div>
</section>
13

我今天面临同样的问题。显然,解决方案很简单:

padding: calc(*put fixed pixels here*px + *put your required %age here*%) 

请注意,您必须将所需的 % 年龄减少一点以考虑固定像素。

7


我尝试在padding中使用 CSSmax函数来尝试此功能,但我的 css 中出现了解析错误。下面是我尝试的:

padding: 5px max(50vw - 350px, 10vw);

然后我试图将操作分成变量,这也不起作用

  --padding: calc(50vw - 350px); 
  --max-padding: max(1vw, var(--padding));
  padding: 5px var(--max-padding);

最终的工作只是嵌套我想要填充在类“居中”的 div 中,并使用最大宽度和宽度像这样

 .centered {
   width: 98vw;
   max-width: 700px;
   height: 100%;
   margin: 0 auto;
}

不幸的是,这似乎是模仿“max-padding”和“min-padding”的最佳方式。我想该技术对于“min-margin”和“max-margin”是相似的。希望这在某些时候被添加!

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(470)
无法在 CI/CDgitlab上运行testcafe测试 但在运行器上本地运行良好
上一篇
我的设备支持ARCoreDepthAPI 但HelloAR示例应用程序显示错误
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(78条)