Deep Learning of line-height lines in css, and css line-height lines

Deep Learning of line-height lines in css, and css line-height lines

The previous understanding of the High line-height in css is still somewhat superficial. It is only after deep understanding that it is all-encompassing. Learn the line height, starting from the basic principle

(Mark this article reprinted http://www.cnblogs.com/dolphinX/p/3236686.html this article slightly supplements four kinds of boxes)

Top Line/middle line/basic/bottom line

<! DOCTYPE html> Line Height overview refers to the height of a line of text. Specifically, it refers to the distance between the baselines of two texts.
As shown in the following order:Baseline/midline/baselineThis is similar to the four-line, three-cell book for beginners in English, where vertical-align has attributesTop, middle, baseline, bottomRelated to four lines.
Especially rememberBaselineIt is not the bottom line, but the bottom line isBottom Line.
Row Height/line spacing/semi-row spacing
Row HeightYesContext bankOfVertical Distance between baselines, That is, the vertical distance between the two red lines.
Line spacingYesVertical distance from the bottom line of a line to the top line of the next lineThat is, the vertical distance between the first line and the second line of the Green Line.
Semi-row spacingThat is, the vertical distance of Area 3/2, the distance between area 1, 2, 3, and 4 is the same as the Row Height, while the distance between area 1, 2, and 4 is the same as the font size.Half-line spacingIt can also be calculated as follows:(Row Height-font size)/2
Four box content areas/line boxes/contained boxes
(Note: the latter determines the height of the line is the content area and the line spacing.
1. The content area height is only related to the font-size and font-size.
2. font-size + line spacing = line-height only in simsun font (I .e.)
Content Area(Content area)Bottom line and top line package AreaThat is, the dark gray background area.
Line box(Inline box)EachLine ElementALine box,Line boxIs a concept in a browser rendering model and cannot be displayed,When there are no other factors (such as padding), the line content is equal to the content area,
When the row is set to high, the height of the line inside the box remains unchanged. The half-line spacing [(line height-font size)/2] increases/decreases to the upper and lower sides of the content area (dark blue area)
Line boxLine box ),Line boxIsVirtual Rectangle frameIs a concept in the browser rendering mode and is not actually displayed. The height of the row box is equal to the maximum value of the row box for all elements in the row.
(The line content is aligned to the line content with the highest row value as the benchmark, and the other line content uses its own alignment to align to the benchmark.) when there are multiple lines of content, each row has its own row box.
Contain box ining boxContaining contains the preceding three boxes (as shown in Figure)
<Div>Row Height Unit
Definition: The line-height attribute sets the distance between rows (Row height). Negative values cannot be used. This attribute affects the layout of the row box. When a block-level element is applied, it defines the minimum distance between the basic line of the element, rather than the maximum distance. The difference between the calculated line-height and font-size values (line spacing) is divided into two halves, respectively added to the top and bottom of a text line content. The smallest box that can contain the content is the row box.
  
  

   
   
 
    
 
     
Value
 
     
Description
 
    
 
    
 
     
Normal
 
     
By default, reasonable row spacing is set.
 
    
 
    
 
     
Number
 
     
Set a number, which corresponds to the current font sizeMultiplyTo set the line spacing. Equal to multiple
 
    
 
    
 
     
Length
 
     
Set a fixed line spacing.
 
    
 
    
 
     
%
 
     
The row spacing is based on the percentage of the current font size.
 
    
 
    
 
     
Inherit
 
     
Specifies that the value of the line-height attribute should be inherited from the parent element.
 
    
 
   
  
  
Row Height properties brief overview for now more details http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html
Vertical center of Single Line Text
<Div>Vertical center of multi-line text
<Div>Influence of the inside-row box on the Row Height
The row height is the highest row height. The line height is adjusted by line-height. The Row height of the content area is related to the font size. padding does not affect the Row height.
<Div>Inheritance percentage of high rows
The row height can be inherited, but it is not a simple copy of the parent element. The Row Height inherits the calculated value.
<! DOCTYPE html> 
[Reference]
Source http://www.cnblogs.com/dolphinX/p/3236686.html
Http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html
Http://www.zhangxinxu.com/wordpress/2009/11/csshigh line-heightsome in-depth application/
Http://www.imooc.com/learn/403