What does font-size:100% do?

H1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}

Input,select,textarea,samp {font-size:100%;}

See some CSS reset, what is the purpose and function of setting font-size:100%?

---------------------------------------------------------------------------------------

If you set body{font-size:12px;}

But H1 will not inherit this 12px, it will increase the font size by a certain percentage, but if the H1 is specified font-

size:100%, it inherits the font size set by the body.

1. It changes the default size.

2. The elements themselves do not inherit the font size of the parent, and are automatically inherited after the font-size:100% is set.

When the browser sets the default style for the HX header element, it uses h1 {font-size:200%;} h2 {font-size:150%;} and so on to set the font size. These styles are used by browsers to ensure that the title text at each level can have a fixed proportional relationship to the normal text rendering font size.

So why does the browser use a percentage to fix this ratio instead of using a fixed PX value to determine the relative proportional relationship (for example: h1 {font-size:32px;} h2 {font-size:24px;} p {font-size:16px;} etc.)?

On the one hand, percentages are clearly more appropriate to set the scale , on the other hand, because almost all browsers usually provide text scaling (note: Non-full-page scaling), which is the most basic support the browser provides for web accessibility. The text scaling function of the browser (IE, in particular) is typically achieved by resetting the font size of the BODY element-when the body's font size changes, its descendant elements render a proportional relationship of font size through the CSS's layer inheritance and percent conversion.

Therefore, absolute units such as PX are not used in the default style of the browser itself, otherwise the text scaling feature cannot be implemented. (We've all had the experience that once an element's font size uses a fixed PX value, it's no longer affected by the IE zoom setting.) ）

Over and over, back to the question itself:

The purpose of writing the CSS Reset is to overwrite the browser's default style. I first saw the CSS Reset, which is exactly what it says:

H1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}

Maybe even the first person to write a CSS Reset (Eric Meyer?). That's how it's written. The "benefit" of this writing is that it is very intuitive to clear the default style of the browser (H1 {font-size:200%;}, etc.) and kill the percentage in percent, which is appropriate. And Yimeimei has been used, may be too lazy to make changes, may be to pay tribute to the seniors.

Reset browser Default font size

H1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}

If you set body{font-size:12px;}

But H1 will not inherit this 12px, it will increase the font size by a certain percentage, but if the H1 display specifies font-size:100%;

1. It changes the default size.

Of course, there are other ways to achieve the goal of the HX font size zeroing:

• {Font-size:inherit;} But IE 6,7 does not support.
• {font-size:1em;} This looks perfect, and the number of bytes is even less.

　　Line-height:normal | Length

Parameters:

Normal: Default row height

Length: Percent number | A length value consisting of a floating-point number and a unit identifier that is allowed to be negative. The percentage value is based on the height size of the font. See Length Units

Description

Retrieves or sets the row height of the object. That is, the distance between the bottom of the font and the top of the font.

If the row contains more than one object, the maximum row height is applied. The row height cannot be negative at this time.

The corresponding script attribute is lineheight. Please refer to the other bibliography I have written.

Example

div {line-height:6px;}

div {line-height:10.5;}

Note

1. Use line-height only to work on the text is invalid for the picture

2. Use Dreamweaver to see the effects of instant line-height

3. Negative values can be used when using line-height

Note that in the browser for the line-height of the resolution is also a slight difference, there will be 1px difference, if the row height is even, most of the browser interpretation is relatively normal, if it is odd, some browsers will be more than 1px, Other browsers will be more than 1px, for some of the stricter requirements of the site, it is recommended to use an even height design

What does font-size:100% do?