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

This article mainly introduces what is the use of the min-width attribute in CSS, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

In a web page, if the minimum width (min-width) of an element is not set, the layout of the element may change when the browser shrinks to a certain extent. If you want to keep the layout unchanged, you can set the minimum width attribute for the element (such as div), such as:

Min-width attribute

# footer {

The minimum width of the min-width:960px;/* is set to 960 pixels, and when the browser width is less than this value, the element is no longer adaptive, but some elements are obscured. , /

}

The min-width property sets the minimum width of the element.

Description

This property value sets a minimum limit on the width of the element. Therefore, the element can be wider than the specified value, but not narrower than it. Negative values are not allowed to be specified.

Default value: none

Inheritance: no

Version: CSS2

JavaScript syntax: object.style.minWidth= "50px"

Possible value

Value description

Length defines the minimum width value of the element. Default value: depends on the browser.

The% definition is based on the percentage minimum width of the block-level object that contains it.

Inherit states that the value of the min-width attribute should be inherited from the parent element.

The function and effect of min-width

When the browser shrinks to a certain extent, the layout in the element may change. If you want to keep the layout unchanged, you can set the minimum width attribute for the element, such as div.

When the browser width is reduced to less than the pixels of the min-width, the div will no longer shrink, and the browser will generate a scroll bar.

Then I use min-height 's mind to understand min-width, and then find that the bromine is too large. .

I'm a little frog.

.test {

Min-width:100px

Height:60px

Background-color:#E5B783

}

The result is shown in the figure:

In fact, people just want to know why that happened, so they did this kind of test.

I'm a little frog.

.parent {

Width:200px

Height:auto

}

.test {

Min-width:100px

Height:60px

Background-color:#E5B783

}

Thank you for reading this article carefully. I hope the article "what is the use of min-width attributes in CSS" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.