This is the first day of my participation in the More text Challenge. For details, see more text Challenge

Summarize the basic dimensions of TANGJIE stream elements HTML5 CSS3

Relearn the CSS series, the basic building blocks of CSS

1. Box composition

1.1 Understand the basic structure of HTML elements

Let’s start with the idea that the elements of HTML can be thought of as boxes

As shown in figure:

Display :block = display:block-block = display:block = display:block Display :table is actually display:block-table; display:inline-block; So when we say display:inline-table we actually get a one-line table that can be embedded with text

To sum up:

  1. Each element has two boxes, an outer box and an inner box
  2. The outer box is responsible for typographical things, such as whether it can be displayed on one line or whether it must be displayed on a newline
  3. The inner box is responsible for content things, such as controlling width and height, and content presentation
  4. Some elements also have tag boxes, so to speak, add-on boxes

2. Block level/inline elements

2.1 Block-level elements

A block element is not just a block element, such as a table or a li, but also a block element. It can only display one element in a horizontal stream. Multiple block-level elements are displayed on newlines.

Development practical points: because the block-level elements with newline characteristics, usually with clear:both to clear floating, float code as follows:

.clear::after{
	content:' ';
	display:block;
	clear:both;
}
Copy the code

2.2 Inline elements

Once you understand the box construction of an element, it’s easy to understand what an inline element is — that is, an element whose box is inline, such as inline-block, inline-table,inline-inline, and can be displayed on the same line as the text.

2.3 Html5’s blank nodes

In HTML5, code like this:

div{
	background-color:pink;
}
span{
	display:inline-block;
}
Copy the code
<div><span></span></div>
Copy the code

The reason for this effect is that the CSS specification mentions an inlined box before an inlined element with a width of 0 that has both the element’s font and the row height attributes.

2.4 Resolve img tag gaps: ghost blank nodes

  1. Only elements are inline elements or inline block elements,vertical-alignThis attribute takes effect. So we want to makevertical-alignInvalid, then let img become a block-level element-setdisplayAttribute values forblock
  2. Set up thevertical-alignIs not usedbaseline, use other such asbottom top middleWhatever it is
  3. The gap is changed by the size of the text, so we can set the text-size to 0 as long as the line box does not contain text
  4. Changing the height of the text can also solve the gap problem. Set the height to 0, but the height of the text can also be changed byline-heightDecided, so setline-heightZero will also work

3. width/heightDetails of the role of

So let’s start with a point where width and height are applied to the box

3.1 Neglectedwidth:auto

Why is it ignored?

  1. The default value of width is auto
  2. Make full use of the available space (div, p tags are 100% wide by default)
  3. Shrink and wrap (width determined by content when elements are floating and absolutely positioned)
  4. Shrink to the minimum (in the table of table-Layout :auto, shown as shrinking to the minimum width of the content to display)

Few people pay attention to these features, because when implementing a project, many developers are used to setting the parent width to death, or simply add width: 100% without considering the situation

3.2 External dimensions and fluid characteristics

  1. Normal width flow, that is, the outer box isblockIn normal document flow, the size of the element will be like water will fill the entire parent container, so many elements are setwidth:100%As I said before, the width is applied to the inner box, so I’m setting the width to 100% to set the inner box to the width of the parent container, which is actually the size of the parent container plus the elementmargin/padding/border. Instead of setting, using its liquidity,margin/padding/border/contentWidth is an automatic horizontal space allocation mechanism that ensures that the element width is the parent’s width. (This is where the following CSS width separation comes from)
  2. The width of the enveloping shrinkage exists in the absolute positioning model (position:absolute/fixed) and float models, which simply means that, by default, the width of an absolutely positioned element is determined by its internal size (content)
  3. Format width, which exists in the absolute positioning model (position:absolute/fixed). So in what case is it presented? Is it forNon-substitution elementwhenleft/rightortop/bottomThe opposite orientation attribute exists simultaneously, and its width is calculated according to the most recent ancestor element with the orientation property.

Such as:

// The most recent ancestor location element width is1000px
div{
	position:absolute;
	left:20px;
	right:20px;
}
Copy the code

The width of the div size is 1000-20-20 px = 960 px, then the padding/margin/border/content will be automatically assigned space

Supplement: What are non-substitution elements?

A non-replacement element is one in which the content rendered by modifying an attribute value cannot be replaced, and its counterpart is the replacement element

3.3 Internal dimensions and fluid characteristics

  1. The encapsulation, the encapsulation of inline elements is best represented bydisplay:inline-blockThat is, the internal size is determined by the content, which is equivalent to giving a valuemax-width:100%; In development practice, you may encounter such a requirement: a text in the center, multiple lines of text left, the implementation of the code as follows
.box{
	text-align:center
}
.content{
	text-aligin:left;
	display:inline-block;
}
Copy the code
<div class="box">
	<p class="content">I like the front end. Do you like it?</p>
</div>
Copy the code
  1. display:inline-blockThe minimum width that is most appropriate for the element; The principle is that the image and text have more weight than the layout, so the div with text, even with width:0, will be stretched to the text or image size

Take this code for example:

<div style="display: inline-block; width: 0">I love the front</div>
Copy the code

Its performance becomes a single text line, as for the role of development, it needs your creative ideas

3.4 Details of the effects of width and height

Here comes the basic interview, the cliche, what is a CSS Box Model?

To put it simply, as follows:

As mentioned in section 1, width is applied to the inner box, so the inner box is divided into four boxes — content-box, padding-box, border-box, border-box, margin-box; The CSS specification describes: The content-box is the rectangle that surrounds the given width and height. That is why we add width to an element that has a margin, padding, or border: 100% is generally wider than the parent

In CSS3, there is a property called box-sizing that changes the detail of width and height

Box-sizing: border-box From the perspective of code practice feel there are two points to reference

  1. Again, try not to use it, and try to use the width separation principle (next big point), because it does not change the detail of the width and height of the element to the margin-box
  2. The details of the width and height effects of the elements are messed up and not very good for project maintenance

Max-width /min-width/max-height/min-height

The maximum action details are the same as width/height, but the above attributes are more appropriate for adaptive or fluid layouts

4. CSS width separation principle

CSS width separation principle, is an important principle in style development, summed up is: the parent element width, child elements set margin, padding equivalent, so that the parent element will not break the width.

5. Actual combat: Unfold and collapse animations of elements of any height

Reference code:

.content{
	max-height: 0;
	overflow: hidden;
	transition: max-height 5s;
	background-color: pink;
}
.content.active{
	max-height: 100vh;
}
Copy the code
<div class="content">.</div>
<button id="btn">an</button>
Copy the code
btn.addEventListener('click'.() = >{
	const content = document.querySelector('.content');
	content.classList.add('active');
})
Copy the code