Baidu interview directly by the interviewer asked to live, come back to summarize the CSS line high-related issues!
1. Basic Concepts
1. Baseline, bottom, top line, centerline
Note: The baseline (base line) is not the lower edge of the kanji text, but the lower edge of the English letter "X".
2. Content Area
The content area refers to the area where the bottom and top lines are wrapped (the inline element display:inline can be displayed through the Background-color property), which is not necessarily visible in practice, but does exist. The size of the content area varies based on the value of Font-size and the number of words.
3. Line spacing, Row height
Row height (line-height): Includes a content area and an empty area that is symmetrically expanded based on the content area, which we call the row height. In general, it can also be considered as the distance between the baseline of adjacent lines of text.
line spacing: Refers to the distance between the baseline of a text row and the top of the next line in the adjacent text. Of course, I'd prefer to think that it is (upper line of text line-height of content area)/2+ (line height of text line-content area height)/2.
4. Inline box
The inline box is a concept in a browser rendering model that cannot be displayed, but it does exist, and its height is the height specified by the row height.
5. Line Box
Line box, similar to the concept of a line box, is a virtual rectangular box of the bank, and is also a concept in the browser rendering mode. The height of the row box is equal to the maximum value of the inner box of all elements in the line (the highest row height box is the baseline, the other inline boxes are aligned to the datum in their own alignment, and the height of the row box is finally calculated).
Vertical-align: Vertical Centering
In the previous section we explained the vertical center (line-height) of line height and single-line plain text, and if the line contains pictures and text, after rendering in the browser, the reader can find that the text and pictures are not centered in the vertical direction , but aligned along the baseline . This is because the default vertical alignment of elements is baseline alignment (Vertical-align:baseline).
CSS Syntax: Vertical-align
-
-
-
Grammar:
-
- Baseline | sub | super | top | text-top | middle | bottom | text-bottom | < percent > | < length > | inherit
-
-
Description
-
- sets the vertical alignment of the element content.
-
-
Parameters:
-
-
- Baseline: baseline alignment;
- Sub: subscript display;
- Super: Superscript display;
- Top: Top alignment;
- Text-top: The top of the text is aligned;
- Middle: central alignment;
//No research-penetrating properties
- Bottom: bottom alignment;
- Text-bottom: The bottom of the text is aligned;
- Percent and Length: CSS2, can be negative.
-
-
Initial value:baseline
-
-
inheritance: do not inherit
It is important to note that the vertical alignment property is only valid for text (refers to the element node that contains the #text node to correctly handle the Vertical-align property). At the same time, this property cannot be inherited.
Attribute value Detail
In the previous section, the baseline, top, midline, and bottom lines of the text, as well as the content area, inline box, and Line box, are described, and the vertical alignment of this section is closely related to these concepts.
The vertical alignment of the primary property value is represented as shown.
1. Baseline Alignment (Vertical-align:baseline) baseline Alignment (Vertical-align:baseline) aligns the baseline of
the element to the
baseline of the Datum element (the highest row of rows)
2. Top Alignment (Vertical-align:top)top Align (vertical-align:top) aligns the
top
of the inline box of an element with the top of the row box
3. Text top align (vertical-align:text-top)Text top Alignment (vertical-align:text-top) aligns the top
line of the line of
elements in the row
4. Bottom alignment (vertical-align:bottom)Bottom Alignment (vertical-align:bottom) is opposite to top alignment (Vertical-align:top)
5. Text bottom align (vertical-align:text-bottom)
6. Middle Alignment (Vertical-align:middle)Middle Alignment (Vertical-align:middle) is typically used on the picture to align the
centerline of the vertical direction of the picture with the
midline of the line of text. (For the text processing some deviation, the specific basis has not been studied, the students can contact me Oh ~ ~)
the midline is defined as: The midline is above the baseline,
and the distance from the baseline is half the lowercase x height (i.e. 0.5ex),
Whereas ex is associated with Font-size, most browsers think 1ex = 0.5em (em is also relative units, not absolute units), so the baseline above One-fourth em is aligned as the midline.
7. Superscript and subscriptSuperscript (Vertical-align:super) raises the baseline of
the element relative to the baseline
element, and the subscript (vertical-align:sub) lowers the baseline of the element, The moving amplitude of the CSS specification is not specified by the browser to decide.
the superscript does not change the size of the element text.
8. Length values and percentages similar to the superscript, the length and percent values cause the baseline of
the element to rise (positive
) or decrease (negative value) relative to the baseline element.
The moving dimensions of the index are determined by the browser, and the length value or percentage can be used to precisely control the amplitude of the text moving up and down. The
percentage is related to row height (line-height), such as the following code, which is shown in 7-44.
my test @FireFox.
test code:
<style type="Text/css">P{Vertical-Align:Baseline;Font-size:20px; Line-Height:60px;background-Color:Yellow;}span{background-Color:Red;}u{background-Color:Blue;} del {background-Color:Pink;}</style>
//html code <P><SPAN> ajax test </SPAN><U> ajax test </U><DEL> ajax test </DEL> ajax test test test testing Test test testing Test test testing Test test testing Test testing test tests </P>
Default condition:
Other Notes:
1. Offsetwidth of SPAN, U, del tags
= SUM (character * font-size * correction factor)(here, the correction factor for Chinese is 1, The correction coefficient of the number 0.6, the English characters correction coefficient is very large, such as Ijl is very small, wmk, such as relatively large, capital English same correction coefficient is not uniform).
2,SPAN, U, del tag
offsetheight.
Inference: The background rendering area of the inline element is the size of the content area and is directly affected by font-size.
For <p> block-level elements, the calculated height of block-level elements is accumulated by the height of the included row box, so the height is 60px;
3,
set the Span.style.lineHeight to 15px (from 10px to 60px)----> found no change
Inference: The content area size is not affected by line-height, Line-height is used to process the distance between the baseline of adjacent lines of text.
4.
set Span.style.lineHeight to 70px (from 61px to 80px)----> Line box height start adjusting with settings
Inference: The row box height is the highest inline box height within the row, adjusted by Line-height.
The height of the P element evaluates to the Span.style.lineHeight value and is not controlled by P.style.lineheight.
Inference two: The height of the <p> without setting the Height property is calculated as the value of the row box height increment.
Scene 4:line-height function test
5.Put
span.style.verticalalign= sub;del.style.verticalalign= super;--> look at the picture and talk
Inference: The height of the row box is increased, and the superscript is moved based on the baseline.Research on the vertical center effect of scene 5:sub and Super
6.Confirmation of all alignment:
1, first confirm the datum element in the line, take the element with the Line-height value as the maximum value as the datum;
2, the other text to the Datum element alignment, according to Line-height and vertical-align to achieve the effect;
3, Sub, super is the way to change the baseline, so it will affect the final height of the line box;
4, top, bottom is the inline box alignment, top refers to the element in the row of the top of the box and the base row of the top of the box alignment;
5, Text-top, Text-bottom also affect the height of the final row box, meaning that the top of the element's inline box aligns with the top of the datum element's content area (when the height of the line-height= content area is aligned with the top of the base content area). When the line-height is less than the height of the content area, the text continues to move up, and when Line-height is set to 0px, it is exactly the vertical middle of the content area aligned with the top of the base content area. ）
6, percent and length values: Based on the baseline to move, the percentage of the calculated value is the row high * percentage.7, about the middle, the feeling is based on a baseline for symmetrical expansion, but the rules generated by the baseline is not clear.
In-depth understanding of line heights and baselines in CSS
