css line-box line box and replacement elements

I learned the line-boxconcept of line boxes when I was learning to replace elements. It was a long time to understand what is line-boxand how to form it. Then I recorded my line-boxunderstanding in this article . However vertical-align, when I was studying today, I encountered it again line-box, which means I want to cry. Because I found that I only knew a little bit, and had a deeper understanding after grinding for a long time, I revised this article again. Learning is a process of continuous improvement~ I hope I can have a deeper understanding in the near future, and then modify it?

inline-box

Inline-box, also known as inline box, is usually formed by some label packages. The most commonly used one is that label package text will form an inline box. Those text without label package will form a box by default, called anonymous inline box.

font-size

font-sizeSame, font-familydifferent, to give the spanheight of the different elements => font metrics are based on this em-squarerelative units disposed
The calculated height determines the height of htmlthe content-areacontent area of the element

For font-sizeme, I didn't go to study in depth. I just got a general understanding. I know why the font-sizefont is the same but the spanheight is different when the font is different. Interested students can click on the reference link of this article to view.

line-box

line-box Line frame concept

line-boxCalled line box line-boxheight is basically line-boxthe line-heightbiggest inline-boxdecision. (Is it very convoluted, is it crazy~) See the explanation below for details

When pthe element appears on the screen, it may contain multiple lines, each line of a plurality of inline-box inline element composition (containing inline text labels or anonymous inline elements), each row is called a line-box.
line-boxThe height of is calculated from the height of all its child elements

=> The height from the highest point to the lowest point of the child element
=> By default, a line-boxalways have enough height to accommodate its children.
=> The difference line-heightbetween font-sizethe calculated value and (line spacing) is divided into two halves, which are added to the top and bottom of a text line. The smallest box that can contain this content isLine-box
- Line spacing: CSS does not directly set the line spacing, and indirectly sets the line spacing by setting the line height

An inline element has two heights: content-areacontent height and line-heightline height [the line-heightheight used for calculation line-box]

content-areaThe height line-heightdifference between the height and the height is the line spacing, [or the difference line-heightbetween font-sizethe calculated value and the height of the value, in my opinion, content-areathe height = font-sizethe height]
line-heightCan be equal to, greater than, or less than content-areathe height (if line-height< content-area的height, line-boxit looks shorter than the content-areacontent)
For inline elements, padding and border will increase the background area, but will not increase the content-area (not the height of the line-box).Why is it not line-boxthe height? I still don't understand this. I don't understand it. My understanding is line-boxthat the height is line-heightrelated, but line-heightit is vertical-alignrelated. Different settings vertical-alignwill produce different line-height. I hope some classmates can help me explain and let me initiate ~
- Special inline elements
  - Alternatively for inline elements (replaced inline elements), inline- block elements, and formatting of a particular context (flex box) inline element padding, marginand borderincreases height(noted margin), thus affecting content-areaand line-boxheight
  - If you set it to auto height, then its value is the height of line-heightits content-areavalues also line-height.

Replacement element

Elements whose content is not controlled by the css visual formatting model. By modifying a certain attribute value, the displayed content can be changed.

For example img（src属性）、嵌入的文档（iframe）、applet、input（type属性）、textarea、select、object、audio. These elements have no actual content and are empty elements
The browser will display these elements according to their tag types and attributes. The replacement element generates a box in its display, which is why the inline element can set the width and height
Are all inline elements => special inline elements

<img>The baseline of this type of replacement element is located at the bottom edge of the element, and vertical-alignthe default value is baseline alignment, (there will be a few pixels below the picture)
<input>The baseline of this type of replacement element that can enter text is the baseline of the text

The size is divided into three categories: inherent size, HTML size, CSS size

Inherent size: replace the original size of the content => an inherent width, height, ratio
- If only the width or height is set, the element will be displayed according to the aspect ratio of the inherent size
- Even if the replacement element is set to display:block; its width will not fill the parent container (because it is proportional)
HTML size: The size set on the HTML attribute will override the inherent size
CSS size: The size set in the CSS style sheet will override the inherent size and HTML size

Replacing elements can increase the line-box height, but does not affect the line-height.content height = padding-top + padding-bottom + margin-top + margin-bottom + height

The height of the inline element is only determined by the height of the line line-height, the vertical direction margin、padding、borderdoes not affect the height of the line box, but the replacement element can open the line box.

To center the replacement element, you can setline-height = height

example

which performed Insert picture description here

// html
<body>
  <div class ="div1">
    <input type="text" value="input里的值">
  </div>
</body>

//css
*{
    
    
  margin:0;
  padding:0;
}
input{
    
    
  height:90px;
  line-height:50px;
  padding:10px;
  margin:20px;
  background-color:#9deaf1;
  text-align:center;
}

.div1{
    
    
  background:red
}

Note:
1. After only inputthe height is set , its width is displayed according to a certain ratio. When set to display:block, inputthe width will not change in any way, and it does not fully support the parent container;
2. inputThe line-boxrow frame height is height+padding+marginAnd because the parent container is div1not set line-height, the row frame height of the parent container is the row frame height of the child element input, and the parent container is stretched;

Insert picture description here

The height of div.wrapper = the line height of the child element line-height

// html
<div class='wrapper'>
   <strong>hello world</strong>
 </div>

// css
 *{
    
    
  margin:0;
  padding:0;
}
div.wrapper{
    
    
  margin:0 auto;
  background-color:#9deaf1;
  margin-top:100px;
 /*  line-height:200px;  */
}
strong{
    
    
  padding:40px;
  margin:50px;
  line-height:50px;
  /* height:100px; */
  background-color:#5dc2f6;
}

important point:

The strongheight of the line frame of the inline element is only determined by the line height line-height, paddingand marginits line height has not been changed line-height. If it is set, it heightwill be found that the line frame height has not been changed;
The height of the line box of the parent element is affected by line-heightits child elements,

If the line-heightset height is smaller than the line box formed by the child element, the child element forms the height of the line box of the element;
If it is line-heightgreater than the height of the line box formed by the child element, the line box of the parent element is the height of the line box line-heightformed by its own settings.

Because div.wrapperthere is no set line-heightheight, so at this height = sub-element inline box height; if you set line-height:200px;'ll find the parent element div.wrapperheight becomes his inline boxheight of;

Insert picture description here

// html
 <div class='wrapper'>
    <strong>hello world</strong>
  </div>

// css 
*{
    
    
  margin:0;
  padding:0;
}
div.wrapper{
    
    
  margin:0 auto;
  background-color:#9deaf1;
}
strong{
    
    
  background-color:#5dc2f6;
}

When the inline element is not set line-heightand paddingequal, the inline-boxheight of the inline frame = the height of the content-areacontent area = the height of the inline frame of the outer container of the element;
When increasing line-height:50px;the inline element line-heightwill change position, but without changing the size of the box (as shown below: When the background is provided inline elements, where only the height of the default background);
the setting position change is because line-heightwhen the content-areaheight No change, the half-line spacing [( line-height- font-size)/2] is increased/decreased to content-areathe upper and lower sides respectively, so it moves down, (as the difference line-heightbetween font-sizethe calculated value (line spacing) mentioned at the beginning of the replacement element is divided into two halves, added to The top and bottom of a line of text)

strong{
    
    
	line-height:50px;
	background-color:#5dc2f6;
}

Insert picture description here

Reference link: In-depth understanding of CSS: font metrics, line-height and vertical-align