Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to understand the high min-width in CSS attributes". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to understand the high min-width in CSS attributes".

I. basic meaning

The min-width attribute sets the minimum width for a given element. It prevents the application value of the width property from being less than the value of min-width. The value of min-width overrides both max-width and width.

2. Available value

Common percentage, fixed px | em | ex, etc. Other attribute values such as max-content,min-content are not compatible.

Div {min-width:100em;}

Div {min-width:800px;}

……

III. Compatibility

IE7+, is commonly used in modern browsers. With regard to the compatibility of IE6, it is recommended to use js control. IE6 will gradually withdraw from the front stage.

IV. Application

It is commonly used in percentage width layouts to zoom the browser window so as not to affect the layout of the page when the window is very small.

Related attribute: max-width,min-height,max-height

When we do layout design, we often have such a layout, with navigation toolbars on both sides or on one side, and content areas in the middle.

However, we hope that the inner area in the middle can automatically adapt to the height and width with different resolutions and the size of the browser, so as to achieve a better display effect.

We assume that the content area in the middle is a div, and if we don't explicitly set the width property of its style, it can automatically adapt, which is supposed to meet the requirements.

But when the width of the browser is too small to display our content neatly, the display of the page will be chaotic.

At this point, we can set a min-width for the content div, such as in css:

The code is as follows:

# content {

Min-width:600px

}

The function of this property is as simple as its name: minimum width. The div still automatically adapts to the width, but it has an extra condition that when its adaptive width is less than the set minimum width, the width of the div will be set to the minimum width and will no longer automatically adapt.

This property can be used in firefox and ie7, but is not supported in ie6. We can use the following code instead:

The code is as follows:

# content {

_ width: _ expression (document.compatMode & & document.compatMode=='CSS1Compat')? Document.documentElement.clientWidth: document.body.clientWidth) < 700? '600px':' auto')

}

The previous paragraph:

The code is as follows:

(document.compatMode & & document.compatMode=='CSS1Compat')? Document.documentElement.clientWidth: document.body.clientWidth) < 700

Just a decision condition to determine the width of the page body, here is, if the width of the page body is less than 700 (this should be specified according to the specific page), specify the width of the content to 600, otherwise let it adapt to the width.

In fact, the same goes for min-height!

Thank you for your reading, the above is the content of "how to understand the high min-width in CSS attributes". After the study of this article, I believe you have a deeper understanding of how to understand the high min-width in CSS attributes, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.