This is the 30th day of my participation in the August Challenge

Creation is not easy, click a “like” and then watch!

Pay attention to column – learn CSS thoroughly, let you into the CSS world

preface

In daily development, do you encounter the following situation: Set up a box, but we do not know to have the content, and how much content we are not sure, but don’t want to appear the scroll bar, this time we will not be able to set the specific height, but we can set the min – with a minimum height to the height of the open box, and the content of how many, can dynamically adjust the height of the box, If that’s what we’re looking for. Min/Max width and height, an attribute we don’t use very often, can work wonders in some cases.

With Max min – width – the width

min-width

Set the minimum width of the element. If width is less than min-width, min-width overwrites width.

The default min-width value is auto.

Of course, there are other attribute values, which we won’t go into here because we are focusing on applications.

  1. Max-content Indicates the inherent preferred width.
  2. Min-content The inherent minimum width
  3. Fill-available contains the width of the block minus the horizontal margin, border, and padding. Some browsers implemented the keyword with an earlier name: available.
  4. Fit-content is equal to min(max-content, Max (min-content, fill-available).
div{
    min-width: 100px;
    height: 100px;
    width:20px;
    border: 1px solid #000;
}
Copy the code

For this div we set width to 20px and min-widthn to 1000px. The width is less than the minimum width, causing the minimum width to take effect and the final div width to be 100px.

max-width

Set the maximum width of the element. When width is greater than max-width, max-width overwrites width.

Max-width The default value is none.

Of course, there are other attribute values, which we won’t go into here because we are focusing on applications.

  1. Max-content: Inherent preferred width.
  2. Min-content: indicates the inherent minimum width.
  3. Fill-available: contains the width of the block minus the horizontal margin, border, and fill. Some browsers implement an old name, Available, for this keyword.
  4. Fit-content is equivalent to max-content.

Min-width specifies the priority of min-width and max-width

When both min-width and max-width are used for one element, which of them overwrites the other? In other words, which has a higher priority?

If the value of min-width is greater than max-width, the min-width value is treated as the width of the element

.parent { width: 500px; } .child { min-width:100%; (500px) max-width: 50%; (250px) }Copy the code

As you can see from the rendering, the width of child is 100%

Pay attention toWhen width is set and min-width is greater than width and min-width is less than max-width,min-width takes effect.

.child { min-width: 50%; (250px) max-width: 100%; (500px) width: 200px; }Copy the code

The width of the child is 250px.

The min-height and max-height attributes

min-height

Set the minimum height for the element. When height is less than min-height, min-height overrides the value of height.

The default value of min-height is auto.

Of course, there are other attribute values, which we won’t go into here because we are focusing on applications.

  1. None: Does not limit the size of the container.
  2. Max-content Indicates the default min-height.
  3. Min-content is at the minimum min-height.
  4. Fit-content Replaces the formula for the specified parameter with the available space of fit-content, that is. min(max-content, max(min-content, argument))
.parent {
  height: 200px;
}
.child {
  min-height: 50%;
  height: 50px;
}
Copy the code

For this div we set height to 50px and min-height:50%(100px). At this point, the height is less than min-height, causing min-height to take effect and the final div height to be 100px.

max-height

Set the maximum height for the element, and max-heighth overrides the height value when height is greater than max-height.

Max-height The default value is none.

Of course, there are other attribute values, which we won’t go into here because we are focusing on applications.

  1. Auto: The browser calculates and selects max-height to specify the height of the element.
  2. Max-content: indicates the maximum value of the content.
  3. Min-content: indicates the minimum value of the content.
  4. Fit-content: Replaces the formula for the specified parameter with the available space of fit-content, that is. min(max-content, max(min-content, argument))

Application scenarios

Flex layout inner element Overflow: Hidden; Failure.

.parent { width: 250px; display: flex; background: rgb(182, 67, 67); } .child { border: 1px solid #000; } p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <div class="parent"> <div class="child"> <p> I said, "Dad, you can go." He looked out of the window and said, "I'm going to buy some oranges. You stay here. Don't move." I saw several vendors waiting for customers outside the railings of the platform. </p> </div> </div>Copy the code

As shown, the final result: the text does not hide the ellipsis, why??

When div. Parent is set to Flex, the min-width of its child div. Child is set to auto, causing the browser to set the width of the p tag automatically. That is:

.child {
  border: 1px solid #000;
  min-width:auto;
}
Copy the code

So we just set min-width:0; Override auto. The effect is shown below, as expected.

Maximum page width

Use max-width to specify the maximum width of the display.

Let’s use the familiar Nuggets as an example. Max-width :960px;

Animation of highly unknown elements

In fact, this problem, WHEN I began to learn CSS, I believe that many students who have done drop-down menus are likely to encounter this problem.

Scene: a drop down menu, menu item unknown, cannot set height, when the mouse over the top can slowly (animation) expand menu.

Of course you can also use JS to get the height directly and set the animation, which is ok, but max-height also works.

#menu #list { max-height: 0; The transition: Max - height 0.15 s ease - out; overflow: hidden; background: #d5d5d5; } #menu:hover #list { max-height: 500px; transition: max-height 5s ease-in; } < div id = "menu" > < b > menu < / a > < ul id = "list" > < li > item < / li > < li > item < / li > < / ul > < / div >Copy the code

Here you can copy it and see for yourself.

Modality component for mobile devices

The company has a product that is compatible with PC and Mobile, in which modal is used. Because the screen size is different, modal needs to be configured with different devices, the media query is used at the beginning. Later, it was found that the smaller the device size, the critical range is difficult to find, finally, no media query, use max-width;

modal{
  width: 80%;
  max-width: 450px;
}
Copy the code

HTML/Body at 100% height

This scenario is really common, such as the height of the sidebar to be paved over.

html {
  height: 100%;
}

body {
  min-height: 100%;
}
Copy the code

Minimum width button

Since the company has its own component library, when designing a Button, the leadership required that the buttonBun should not be too small. For example, there are two buttons below, when there is only one text, it will appear very small, so at this time the leader set the minimum width in order to unify the style.

It’s also a good idea to set a minimum width for your blog tags.

Multi-column layouts

For the common three-column layout, we can set the maximum and minimum widths of the left and right layouts to ensure the width of the main column on different devices, and to ensure that the left and right columns are not too small. The most common application should be the three-column layout type of the website home page. Generally, the sidebar on both sides will set a maximum and minimum width, and the main column in the middle, so that no matter how to zoom in and out, the main column can be highlighted, and the sidebar will not shrink too small to affect the look and feel

Afterword.

In fact, there are many application scenarios, this article just lists a few more common scenarios, you can use these attributes in daily development!