This section focuses on abstractions and generalizations from Chapter 3 of CSS World, Flows, Elements, and Base Sizes. CSS World is undeniably a very good book, but ZXX is not a very good author in terms of how I feel after reading this chapter (purely personal opinion). The author wants to take the reader into the world of CSS by constantly asking questions and offering solutions. However, the strong correlation between each “individual” in the CSS world makes it difficult to talk about a single feature, so there will be a lot of confusion on the first look, but I don’t worry, I also found it difficult to learn 1+1, and later I learned 1*1, 1+1 and it seemed easy.
1. Inside and outside boxes of elements
There are only two types of elements in HTML, block-level elements and inline elements. Block-level elements have the property of “line breaks”, typically for structures (skeletons), while inline elements can be displayed in parallel, typically for content. Note that block-level elements do not refer to “display:block” elements, and inline elements are not just “display:inline” elements. However, the reverse of these two statements is ok. Block level elements contain elements such as display:block/table/list-item. Also not!
Here we need to use the common setting display:inline-block to introduce the concept that each HTML tag, or element, contains an inner layer and an outer layer. The inline-block feature is that the “outer box” uses the properties of the inline element, which can be displayed inline with other inline elements, while the “inner box” takes advantage of the block-level element’s adaptive width and can set the height of the container.
Using the concept of an inner and outer box of an inline-block element, we can see that display:block=> display:block-block consists of an outer block-level box and an inner block-level box. The same is true for display:inline elements.
2. Special “additional boxes” in list-item
Display: List-item is the default property of the li tag. It is usually shown as a little dot that F12 cannot select. In fact, if you look at the list-style property, you will find many not just dots, but tags such as 1234 sort. Normally we would set list-style to none. As we all know, list-style elements belong to “block-level elements”. However, besides the block-level elements, list-item also has an “additional box” (scientific name “marker box”), which is specially used to put marker boxes such as dot and number. So all block-level elements have a “primary block-level box,” and a list-item has its own special additional box. As for this feature, I think it is good to have some impression. In actual projects, list-item is almost obsolete.
3. Width: auto
If width is not set manually, which means that width is set to the default value auto, it will behave differently depending on the element.
- First, the most common block-level elements, such as div and P tags, have a default width that is 100% greater than the parent container. Instead of talking about height, we can call this feature fully available space.
- The second feature is shrinkage of child elements and wrapping of parent elements. Typical examples are floating, absolute positioning, inline-block elements, and table elements.
- If you shrink the table to a minimum, it is most likely to appear in the table with the table-layout as Auto. If you are interested, you can go to this link and try it out.
- Container limit exceeded. When the parent element is of a fixed width, the child element is generally no wider than the parent, except for special cases such as exceptionally long successive English words or inline elements that are set to white-space:nowrap. If you are interested, you can go to this link and try it out.
4. Analyze the wrapping property of elements
The wrapping property of elements is mentioned in the second part of the previous point. Why do we say brief analysis here? Because the wrapping property of elements will be involved in the floating and positioning in the follow-up, so this paper only provides some understanding of concepts and simple application. The first is “wrapping”, as the name implies, both wrapping and adaptability, which means that the size of the child inside the parent container is determined by itself. In other words, the inner child element seems to have a max-width. Of course, this rule does not apply if the min-width of the child element is greater than father.width. Wrapping a line when the content width of the child element is about to exceed the width of the parent element sounds normal, but it’s actually quite useful, and there are a lot of weird things that this rule can do with floats and absolute positioning, which we’ll describe later.
5. Use element wrapping to realize center alignment when there are few words and left alignment when there are many words
To take advantage of the wrapping nature of the element, we can make a simple requirement, such as: we want the text to be centered when the text content in a certain width element is low, and left aligned when the text content is high. When text is small, the outer box of an inline-block element is inline, and inline elements can be aligned with text-align: center in the block element. When the width of an inline-block element is equal to the width of the parent element, the line is automatically wrapped. We use the block-level element property of inline-block to add text-align:left to the inner box, so that the element is always centered relative to the outside element. Its own representation is text to the left, resulting in the following code.
<! -- Text less center display, text more left display -->
<div class="box">
<div class="content">A few words</div>
</div>
<div class="box">
<div class="content">Many words many words many words many words many words</div>
</div>
<style>
.box{
width: 200px;
text-align: center;
background: #1A95FF;
}
.box>.content{
margin:20px 0;
display: inline-block;
text-align: left;
background: #E6A23C;
}
</style>
Copy the codeSince the Markdown editor supports markup language, we can preview the final look directly as follows (hint: you can check the following elements directly in your browser to see the CSS style)
6. The action object of the width value
Here is a brief retelling of the four layers of box model. From inside to outside, they are content-box,padding-box,border-box and transparent margin-box respectively. In general, width is directly applied to the Content-box, which often results in a larger element width and height when we add padding and border to the layout. If we get a width:100px, padding:10px,border:1px element from the design, Finally we need to calculate the content-width with width-paddingLeft-paddingright-boderlft-borderRight. It would be too much trouble. So CSS provides a border-box model for development. Box-sizing :border-box; width; Width = padding + border + content if boder-box is used.
7. How wide is 100% — what about the dynamic calculation of percentages
In fact, there is no such chapter in the original text, only similar content. For example, if you have an inline-block feature whose parent element has A width of auto, and it contains two children A and B, whose width is 50%, and whose width is 50%, but whose contents are not equal, what happens if you have an inline-block feature whose parent element has A width of auto? Seeing is believing.
<! -- Percentage calculation problem -->
<div class="f_box">
<span class="box_a">I'm an A element</span>
<span class="box_b">I'm a B element. I'm a B element</span>
</div>
<style>
.f_box{
display: inline-block;
height: 100px;
background: #F56C6C;
white-space: nowrap;
}
.box_a{
width:50%;
background: #E6A23C;
display: inline-block;
}
.box_b{
width:50%;
background: #67c23a;
display: inline-block;
}
</style>
Copy the codeSince the Markdown editor supports markup language, we can preview the final look directly as follows (hint: you can check the following elements directly in your browser to see the CSS style)
I’m a B element. I’m a B element
The reason for the above result is that the parent element contains two child elements whose widths are percentage widths, so their widths depend on the parent element’s width multiplied by percentage, and the parent element’s width is auto, auto multiplied by percentage =NaN. Of course, this is not the case in the actual calculation, and the width of the parent element is already calculated by auto. This actually depends on the order in which the browser renders. As for the rendering mechanism, I wrote a previous article about the browser rendering process, which is not as detailed as it is today. In this case, all you need to know is that the DOM content is rendered from the top down and from the outside in. As you can see, when rendering to the parent element, the width of the child element is equal to auto (actually A percentage of the parent element’s width), so the parent element follows the rule of graphic supreme and gets the width of the content area of elements A and B plus one plus as its final width. In this case, A has less content, so the width is redundant, while B has more content, so the width area is out.
Why doesn’t it work sometimes?
Height: auto height: auto height: auto Auto is much more complicated than height, and some people might think that a line break is part of a height assignment, but in fact the line break is caused by a lack of width, and the height change is just a manifestation of that. For height: auto, just record the height of each element and overlay. Of course, some special attributes such as float and margin overlap will be explained separately later.
Height and width are supported in percentage units. For the width attribute, the percentage value is supported even if the parent element is width: auto (of course, this style does not require a display declaration). But for the percentage property of height, if the parent element is height auto, the percentage value is completely useless as long as the child element is in the document flow (such as float, absolute positioning can keep the element out of the document flow).
Why is that? Because the answer is given in the specification. If the height of the containing block is not specified and the element is not absolutely positioned, the value is evaluated as auto. Which is 100%*auto=NaN of the child element, so the calculation is invalid. Therefore, non-absolute positioning elements need to use height: 100%. This will only work if you constantly add height: to the parent and the parent’s parent, which is not often the case.
So why is width supported? Since the width of the contained block depends on the width of the element, its behavior is “undefined”, meaning that different browsers can have different features. Fortunately, the resulting layout is consistent across browsers. The base for percentage calculation is the actual computed value of the containing block.
9. Height :100% Difference between absolute positioning elements and non-absolute positioning elements
I’ve just shown you how to make the height percentage of a non-absolute positioned element work by showing the height of the declared parent element. How high is height? Height: 100% = content_height *100% = content_height *100% = content_height *100% The answer is, in non-absolutely positioned child elements, but in absolutely positioned elements, percentages are calculated using the content-height + padding-height of the parent element as the base. It’s just a point of view, seeing is believing.
<div class="box">
<div class="child">Height of 100 px</div>
</div>
<div class="box rel">
<div class="child">Height of 160 px</div>
</div>
<style>
.box {
height: 160px;
padding: 30px;
box-sizing: border-box;
background-color: #F56C6C;
}
.child {
height: 100%;
background: #E6A23C;
}
.rel {
position: relative;
}
.rel > .child {
width: 100%;
position: absolute;
}
</style>
Copy the codeSince the Markdown editor supports markup language, we can preview the final look directly as follows (hint: you can check the following elements directly in your browser to see the CSS style)
10. Initialize min/max-width/height
Min /max-width/height specifies the maximum and minimum basic dimensions of an element. Usually used for adaptive layout schemes. Unlike the base dimensions (width, height), the initial min/max-width/height values are more complex. The initial value of min-width/height is auto, and the initial value of max-width/height is None. Let’s write two examples to show why min- starts with auto instead of 0, and Max – starts with None instead of auto.
The first is min-, and this example should be easy to understand, just use the following CSS to prove it
<style>
.box{
transtion:min-height .3s;
}
.box:hover{
min-height:300px;
}
</style>
Copy the codeIf the default min-height is 0, we should have a continuous 0-300px animation when we mouse over the box, but the fact is that the height increases suddenly and there is no transition, so the default min-height should be auto, you can also write to prove this.
<style>
.box{
min-height:0px;
transtion:min-height .3s;
}
.box:hover{
min-height:300px;
}
</style>
Copy the codeThe transition effect occurs when min-height is declared to be 0. So why isn’t max-default auto? Given that the parent element is 400px and the child element is 800px, if you do not declare the max-width and its default value matches the guess auto, If the value of width is 400px, then the default value of max-width overwrites the value of width. If width: 800px does not apply, then we can conclude that max-width: None.
11.min > max > ! important
Original title, beyond! Important, beyond the maximum — title dog!
In fact, it is a coverage problem, CSS world weight “the largest” is! Important to you? Min -, Max -, if you set width: 100px, and buy insurance for it! important ===> width:100px! important; Max-width :50px; Important effect. Min-width >max-width Listen to min-width, so remember min> Max >! Can be important.
12. Use the principle of max-height to achieve the expansion effect of elements
“Expand and collapse” is a common operation on web pages. I used to change height to do this, but it still works, although it requires dynamic calculation of height. Now there is a better way to change height from a smaller value to” auto”. I’ve done this before and found no animation because auto-0 =NaN, so no animation. It would be nice if you could make auto a specific value, like I mentioned earlier when you dynamically calculate height. Now we can solve this problem with max-height adaptability. We only need a value that is guaranteed to be greater than the height of the expansion, because when max-height is greater than the calculated height, the height of the element is the calculated height. Seeing is believing
<! -- Expand Effects -->
<div class="father">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">4</div>
<div class="son">5</div>
</div>
<style>
.father{
max-height: 20px;
overflow: hidden;
transition: 0.5 s linear;
/*background: green; * /
}
.father:hover{
max-height: 200px;
/*background: red; * /
}
.son{
height: 20px
}
</style>
Copy the codeThe effect link is here
Never forget why you started, and your mission can be accomplished.
This is the end of this article. If you like a blogger, you can scan the QR code to add a friend of the blogger. You can also scan the qr code to enter the blogger’s fan group (708637831).
