width和min-width、max-width的关系

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了width和min-width、max-width的关系相关的知识,希望对你有一定的参考价值。

参考技术A

若同时设置了width和max-width两个属性,则以下面 规则 显示宽度:
(1)当width< max-width时,元素宽度以width为准
(2)若width>=max-width则以max-width为准。
默认图片1000*780

若同时设置了width和max-width两个属性,则以下面 规则 显示宽度:
(1)当width< min-width时,元素宽度以min-width为准
(2)若width>=min-width则以width为准。

通过同时使用 min-width 和 max-width 来应用过渡

【中文标题】通过同时使用 min-width 和 max-width 来应用过渡【英文标题】:Apply transition by using min-width and max-width together 【发布时间】:2016-09-23 10:51:35 【问题描述】:

我有一个导航栏,我正在尝试使切换按钮工作,我的切换按钮是一个复选框,因此以下是当您单击复选框时使导航栏 (#navbar-left) 出现的 css

#navbar-left
 max-width: 0;
 min-width: 0;
 width: 0;
 transition: max-width 0.2s ease;
 transition: min-width 0.2s ease;


.nav-trigger:checked ~ #navbar-left 
  max-width: 200%;
  min-width: 20%;
  width: auto;
  float: left;

.nav-trigger 是复选按钮,我可以通过一次应用 min-width 或 max-width 使用过渡平滑关闭导航栏或使用过渡平滑打开导航栏,但我该如何使用它们使用转换平滑地打开和关闭导航栏。

我不能简单地使用width 属性应用过渡,因为我必须始终将width 属性设置为自动。

什么是最好的解决方案或任何替代方法来实现这一目标?

【问题讨论】:

【参考方案1】:

应该写在一个规则中:

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

transition CSS 属性是transition-property、transition-duration、transition-timing-function 和transition-delay 的简写属性。它使您能够定义元素的两种状态之间的转换。可以使用 :hover 或 :active 等伪类定义不同的状态,也可以使用 JavaScript 动态设置。

语法

/* 应用于 1 个属性 */

/* 属性名 |持续时间 */

过渡:margin-left 4s;

/* 属性名 |持续时间 |延迟 */

过渡:margin-left 4s 1s;

/* 属性名 |持续时间 |定时功能 |延迟 */

transition: margin-left 4s ease-in-out 1s;

/* 应用于 2 个属性 */

过渡:margin-left 4s,color 1s;

/* 应用于所有更改的属性 */

过渡:所有 0.5 秒缓出;

/* 全局值 */

过渡:继承;

过渡:初始;

过渡:未设置;

#navbar-left
 max-width: 0;
 min-width: 0;
 width: 0;
 transition: max-width 0.2s ease,min-width 0.2s ease;


.nav-trigger:checked ~ #navbar-left 
  max-width: 200%;
  min-width: 20%;
  width: auto;
  float: left;

【讨论】:

以上是关于width和min-width、max-width的关系的主要内容,如果未能解决你的问题,请参考以下文章

@media only screen and (max-width: 800px) 和@media (min-width: 800px) 有啥区别[重复]

css中min-width和max-width的使用

让IE6支持min-width和max-width的方法

如果我指定了@media(min-width: 768) 和 (max-width: 991px) ...,为啥我的媒体查询会在断点宽度:991 px 处恢复为基本样式?

css的min-width,max-width,max-height,min-height在啥情况下有效

媒体查询节点(海外节点)