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

Today, the editor will share with you the relevant knowledge points about how to set the maximum width of css. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

1. Maximum width syntax

Max-width syntax:

Max-width: 200px

Configure object maximum width 200px

Max-width:60%

Sets the maximum width of the object commensurate to the parent width to 60% of the parent width. If the parent width is 200px, then the maximum width of the max-width configured for this object is 60%, then the practical maximum width is equal to 200 × 60%=120px

Special preference: usually set the width of the equipment variable, rest width (width) can not be set at the same time.

The maximum width css max-width value indicates that the value is roughly a specific numerical example (100px, 500px); it may be a percentage value, such as (70,90%), but the value cannot be a positive number (only a positive value).

II. Analysis of maximum width grammatical structure

Maximum width max-width attribute syntax analysis structure diagram

3. DIV CSS instance of maximum width of max-width

1. Div css depicts examples of maximum width

Here the equipment is equipped with a 300px wide box with a red 1px border, and then a percentage div box. The equipment css frame is also set here to make it easy to view the object width environment.

2. Maximum width using instance css code

.warp {max-width:300px; border:1px solid # F00} .bfb {max-width:30%; border:1px solid # 00F}

3. The html mode code corresponding to the instance

Just put it in form, take a look at my DIV width, and then enlarge the browser width to be smaller than 300px to see if the width will become smaller.

Set the equipment 30% for the maximum width, also observe the width, and enlarge the width of the reader to see the changing environment

4. Broken CSS+HTML code

Online demonstration of CSS maximum width example Thinkcss

.warp {max-width:300px; border:1px solid # F00} .bfb {max-width:30%; border:1px solid # 00F} put the content directly, take a look at my DIV width, then reduce the browser width to less than 300px, and see if the width can become smaller.

Set 30% for the maximum width, also look at the width, and enlarge the browser width to see the transition environment.

These are all the contents of the article "how to set the maximum width of css". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.