Min-width /height and max-width/height have the following differences:

1, min-width/max-width is an adaptive layout for a fluid. 2, Min-width /max-width is an adaptive layout for a fluid. 2, Min-width /max-width is an adaptive layout for a fluid. These pictures are uploaded by users and have different sizes. In order to avoid too much impact on the experience of images displayed on the mobile terminal, the following max-width limit is often used

<img src="1.jpg" style="width:480px! important;" > img {max-width: 256px; }Copy the code

Height :auto is required, * otherwise, if the original image has height, the image will be compressed horizontally when max-width takes effect. Forcing height to auto ensures that the width does not exceed the original proportions of the image. The problem with this setup is that the image height will change from 0 to calculated height when loading, and the image will fall in a waterfall.

2. Unusual initial values

Max-width /height The initial value is none

The initial value of min-width/height is auto

Beyond! Important, beyond the maximum

Beyond! Important: max-width overwrites width even if width is used! important

<img src="1.jpg" style="width:480px! important;" > img {max-width: 256px; }Copy the code

Overmax: When min-width is larger than max-width, min-width weight is significant

4. Animation techniques for expanding and folding elements of any height

Implement expand and collapse effect: height + overflow: hidden

element {height: 0; overflow: hidden; The transition: height 0.25 s; } element.active {height:auto; }Copy the code

There’s no transition, it’s just a stiff expansion

Optimization:

element {height: 0; overflow: hidden; The transition: Max - height 0.25 s; } element.active {max-height: 800px; }Copy the code

As long as the max-height of the expansion is greater than the height of the expansion, the animation effect of an arbitrary element with variable height is achieved.