A summary of the use methods of Min-height and Min-width in CSS

To the big beauty to explain Min-width, found that the property is not like, loaded forced failure (ಥ_ಥ) has been crying blind,

Max-height,max-height Here I do not do the discussion, believe that if you understand the smart min-height,min-width, other people will understand ....

First, the Min (max), (width) height is declared, and these attribute class classes have a trial range
Applies to: all elements except non-substituted inline elements and table elements

1.min-heigh

To use: Set the minimum height of an area, well, it sounds a little dizzy, for example,

    <p class= "Test" > I'm a little frog I'm a little frog I'm a little frog I'm a little frog I'm a little frog I'm a little frog I'm a small frog I'm a        little frog    </p >

    . test{            width:200px;            height:60px;            Background-color: #E5B783;        }

Results

How you just want to let the excess content not show, Overflow:hidden; can help you.

And there are times when we don't know how high the middle content area is, but want the height of the area to just drop the middle content area, which we can use Min-height

    . test{            width:200px;            min-height:60px;            Background-color: #E5B783;        }

Results

If you're still not comfortable with the min-height attribute, there is also a way to achieve this effect,

    . test{            width:200px;            Height:auto;            Background-color: #E5B783;            Overflow:hidden;        }

2.min-width

Then I use min-height thinking to understand min-width, and then found bromine big ....

    <p class= "Test" > I'm a little frog I'm a little frog I'm a little frog </p>

    . test{            min-width:100px;            height:60px;            Background-color: #E5B783;        }

Results

In fact, everyone just wants to know why it happened, so the test was done.

    <p class= "Parent" >        <p class= "Test" > I'm a little frog I'm a little frog I'm a little frog </p>    </p>

    . parent{            width:200px;            Height:auto;        }    . test{            min-width:100px;            height:60px;            Background-color: #E5B783;        }

The results are as follows:

It finds the same width as the parent, meaning that Min-width inherits the widths of the parents, and Min-height does not.
If there is no parent element, which is the outermost body, the default is 100%,

Knowing the reason, the next step is to solve the matter .....

Baidu, blog review, summarized the following methods

method One : Display:inline;

    <p class= "Test" > I'm a little frog I'm a little frog I'm a little frog </p>

    . test{            min-width:100px;            /*height:60px;*/        background-color: #E5B783;                Display:inline;            }

：

Inexplicable reached the effect of wide and high adaptive, but the elements into an inline element, it seems a little bad ...

method Two : Inline-block

    . test{            min-width:100px;            height:60px;            Background-color: #E5B783;            Display:inline-block;        }

：

has reached the effect, but because of the use of display:inline-block; There's a problem with this property. "3px" question (^o^)/~ simple answer.
Set the property of the two adjacent blocks, the middle is not snug, there is a 3px (general 3px-4px, browser differences sometimes change) the spacing.

method Three : Position:absolute;

    . test{        min-width:100px;        height:60px;        Background-color: #E5B783;        Position:absolute;        top:0;        left:0;    }

method four : position:fixed;

    . test{        min-width:100px;        height:60px;        Background-color: #E5B783;        position:fixed;        top:0;        left:0;    }

method Five : float the element float

    . test{        min-width:100px;        height:60px;        Background-color: #E5B783;        Float:left;    }

Method Three, four, five also achieved the effect,

According to the online statement, IE6 the following compatibility, my IE browser is broken, can not be measured, embarrassed ....

Let the Min-width method take effect Summary:

• Set as inline property

• Floating, positioning, is out of the document flow