Css has a deep understanding of width:auto usage examples sharing

This article mainly introduces the relevant information on the in-depth understanding of the usage of width:auto in Css. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Preface

People who read my last article may think that I am making a fuss out of a molehill. What’s good about CSS2? Then I will refer to the book "CSS World" to review and understand the specific points with everyone and the impact on our code.

First of all, we need to know that the default value of width is auto, so there is no need to manually write code to control its width automatically.

Four common width manifestations

Make full use of available space

The default block elements are all 100% of the width of the parent element , everyone knows this, but many people will write an extra width of 100% for block elements.

Shrink and wrap

The common ones are floating, inline block elements, and absolute positioning. We call this property encapsulation.

Shrink to minimum

This is most likely to appear in tables with table-layout set to auto. When we do not control the width and height of table cells, when each column is placed When the content is not large enough, the text will be cut off. However, mobile phone numbers, English words, numbers, etc. cannot be cut off. This may result in some columns of text only, and each word will be displayed in a new line, which is called min-content.

Exceeds the width of the container

Generally, elements will not be displayed beyond the container, unless the following two situations occur, especially the first one is a problem often encountered in the development of junior front-ends. .

1. The content appears in English or numbers, and is displayed without line breaks.

2. The style white-space:nowrap is set, without line breaks.

For the above two problems, the following corrections can be made respectively.

1. word-break:break-all

2. white-space:normal

Other properties

External size and fluid properties

Normal flow width

Block elements have fluid properties by default and inherit the width of the parent element. Will not exceed the width of the parent element. However, some people still write code like this:

a{
display:block;
width:100%;
}

Or code like this, you set the spacing width or something for the a label in the navigation, in fact, after the label becomes block level , it will automatically get its own width based on calculation, which is unnecessary.

.nav{
width:240px}
.nav-a{
display:block;
width:200px;
margin:0 10px;
padding:9px 10px ;}

Format width

Format width refers to the absolute positioning model, including absolute positioning and fixed position, but the reference points of the two are different. By default its attribute is inclusive, and the box width is determined by the content width, but when (non-replacement elements) left/right are set at the same time, its width is calculated relative to the nearest ancestor element whose positioning attribute is not static. Its width will be the width of the parent element -left-right, but other properties will remain unchanged. This is of great use in our actual layout, such as the layout that combines variable width and solid width in the practical CSS technology I shared.

.par{
   width:1000px;
   position:relative;
   }
   //子元素宽度为700px
   .son{
   position:absolute;
   left:100px;
   right:200px;}

Internal size and fluid properties

Inclusion

Inclusion means when the element is non-block When it is an element, its width is determined by the content, and it is only responsible for expanding it as needed. Since the outside is definitely a block element, it will not exceed the container characteristics.

The actual effect is that less text can be horizontally centered and more text can be displayed to the left without scripting.

.container{
text-align:center;
}
.content{
display:inline-block;
text-align:left;
}

Preferred minimum width

This simple understanding is that the actual width of the element depends on the smallest unit of content, and this priority is higher than width:0. For example, if you set the width to 0, but the content contains a Chinese character, it will be the size of a Chinese character; if it is a word, the size of a word will be displayed.

This practical use can be used to make various simple graphics, such as concave and convex shapes, and then the content can be set to white.

.ao{
width:0;
display:inline-block;
}
.ao:before{
color:#fff;
content:'love你love';
outline:2px solid #000;
}

Maximum width

The maximum width is the maximum width that an element can have. Generally, we use it to limit text or when there is a lot of content. There are not many actual scenarios like this.

Here we only extend two scrolling effects, one is native page or dom scrolling, and the other is displayed by setting the positional relationship between internal elements and containers like iscroll, which has better effect.

Related recommendations;

How to use margin in HTML 0 auto

#Set or return whether the audio and video starts after loading in html5 Play attribute autoplay

Detailed explanation of the usage of the autoload method in Laravel

The above is the detailed content of Css has a deep understanding of width:auto usage examples sharing. For more information, please follow other related articles on the PHP Chinese website!