Px, em, csspxem in CSS
What is elastic layout?
User text size and elastic Layout
The default rendering text size of your browser is "16px". In other words, the text size of the "body" in the Web page is "16px" by default in your browser ". Of course, if you want to change the font size, you can use the UI control to change the default font size of the browser.
Elastic design has a key point where all elements on the Web page use the "em" unit value. "Em" is a relative size. We can set 1em, 0.5em, 1.5em, and so on, and "em" can also specify three digits after the decimal point, such as "1.365em ". The "relative" means:
1. Relative computation is bound to be a reference object. Here, relative computation is relative to the font-size of the element parent element. For example, if you set the font size to "16 PX" in a <div>, the descendant element of <div> inherits the font size, unless it is set again in its descendant element. At this time, if you set the font size of its child elements to "0.75em", the font size is calculated as "0.75 X 16px = 12px ";
2. if the user changes the text size through the UI control of the browser, the entire page will also be enlarged (or reduced ), it will not cause the whole page to crash after the user changes the font of the browser (I think this is something that everyone has met. If you don't believe it, try your own project, ).
You can view the elastic layout example. In this case, you can use the UI control of the browser to change the text size or press ctrl + or ctrl-. You will find this flexible layout instance, if you change the font size in the browser, the browser will zoom in and out, without affecting the layout of the entire page. Note: All HTML and CSS of this instance will be used in this tutorial.
For other flexible la S, you can browse the Simplebites of Dan cederholly and change the text size.
After the experience, do you think that the page with the flexible layout is flexible, and it is as accurate as "px. Therefore, as long as we have mastered the basic relationships between "font-size", "px", and "em", we can quickly use CSS to create a precise layout.
Introducing EM to Elastigirl of CSS
Elastigirl's "em" is extremely powerful and flexible. Regardless of the font size, it can be calculated from 12px, 16, or 60.
Em is actually a test unit of typographical layout. There is still a little story about its origins. I will not tell you this story, because everyone is not here to listen to my stories, I like to know things about CSS.
In CSS, "em" is actually a vertical measurement. An em is equal to the vertical space required by letters in any font, and has nothing to do with the horizontal space occupied by it. Therefore:
If the font size is 16 PX, 1em = 16 PX.
Getting started
Before learning about the "em" in CSS, we need to know its default font size in the browser. As we did before, in all modern browsers, the default font size is "16 PX ". Therefore, the default settings in the browser are as follows:
1em = 16px
Therefore, when a CSS selector is written, the browser has a default font of "16 PX. In this case, the <body> in the Web page inherits the "font-size: 16px ;", unless you explicitly set the <body> "font-size" value in the CSS style to change its inherited value. In this way, "1em = 16px", "0.5em = 8px", and "10em = 160px" can also be used to specify the size of any element.
Set the font-size of the Body
Many predecessors have come up with an experience in years of practice. They suggest you set the font size required for a text in <body>, or set it to "10px ", equivalent to ("0.625em or 62.5%"), so as to facilitate the calculation of its child elements. Both of them are desirable. However, we all know that the default font of <body> is "16px", and we know that we have changed its default value so that the elastic layout cannot be broken, you need to re-calculate and re-adjust. Therefore, the perfect setting is:
Body {font-size: 1em ;}
But under IE, which nobody loves, "em" has a problem. When we adjust the font size, it will also break our flexible layout, but fortunately, there is a solution:
Html {font-size: 100% ;}
Formula conversion-PXtoEM
If you are the first to create an elastic layout, it is best to prepare a calculator around you, because we have a lot of computing at first, so we can rest assured with him.
Pixels are too close for us, so we will start from here. First, calculate the ratio between 1px and em, and then know the required px value. According to the previous introduction, we all know that 1em is always equal to the font size of the parent element, so we can use the following formula to calculate it:
1 bytes font-size of the parent element × pixel value to be converted = em Value
You can refer to the conversion table (the value when the body font is 16px)
Next, let's take a look at a simple example: "using css em to create an elastic layout with 960px width"
HTML Markup
|
<body><div id="container">…</div></body> |
Convert 960px to em
1 percentile 16px × 960px = 60em
The prerequisite for calculating this value is <body> "font-size: 16px ".
CSS Code
|
html {font-size: 100%;}body {font-size: 1em;}#container {width: 60em;} |
Through the above examples, I think you can better understand the image, because there are examples for inquiry, in fact, we can convert the above calculation formula to make it easier for you to calculate:
The pixel value to be converted refers to the font-size of the parent element = em Value
The above instance "960px" can be converted to the "em" value.
960px pixel 16px = 60em
We have witnessed the transformation of "px" to "em" computing method. Next we will take a look at the elastic layout sample shown above. Next we will implement it step by step.
Build an elastic container
To create a center effect like an elastic layout example, we first need to create an HTML structure. Here we will create a <div> named "wrap"
|
<body><div id="wrap"> content here</div></body> |
We hope this container is a "740px" width, suitable for a "800px × 600px" Display Screen instance. So how many "em" will "740px" be equal? This is what we need to care about. Let's take a look:
1. Convert "740px" to "em" and set it to our container "div # wrap ": we all know that when the font of the parent element <body> of "div # wrap" is set to "16px, the sub-element <div id = "wrap"> inherits the "font-size" value, so that we can obtain the relationship between 1px and 1em"
1em = 16px, that is, 1px = 1 pixel 16 = 0.0625em
In this way, our "740px" can be easily converted to "em" 0.0625em x 740 = 46.25em
Of course, you can also convert them according to the calculation formula we listed earlier. In this way, your mind is more conceptual and cannot be mistaken:
1 pixel 16 × 740 = 46.25em (1 pixel font-size of the parent element × pixel value to be converted = em value)
In this way, you can use the formula above to calculate the "em" value of any width or height you need. You only need to know the "em" value equal to 1 px ", in addition, you need to convert the "px" value. With these parameters, you can get the "em" value you want.
2. Create a CSS style: now we can write a style for "div # wrap". The elastic layout example clearly tells us that, set "div # wrap" to "740px" in the center width, with the upper and lower "margin" as "24px" and a "1px" border effect, then we first calculate the corresponding "em value" based on the formula above, and then write it to the CSS style:
|
html {font-size: 100%;}body {font-size: 1em;}#wrap {width: 46.25em;/*740px ÷ 16 = 46.25em */margin: 1.5em auto;/*24px ÷ 16 = 1.5em*/border: 0.0625em solid #ccc;/*1px ÷ 16 = 0.0625em*/} |
Now we can easily create an elastic container with content: elastic layout example.
Text style and em
First, insert a
<div id="wrap">
In the elastic layout example, we use the title "18px", while the Section is set to the "12px" font, and its Row Height is "18px ". 18 PX is an important value for us to achieve elastic layout. They can be used to change proportionally. (For more information about titles and paragraphs, click basic leading and vertical rhythm of Richard Rutter and the introduction of chapter on vertical motion ).
According to CSS inheritance, we did not explicitly set the font size in the content container of "div # wrap, in this way, the entire "div # wrap" inherits the font of its parent "body"-"16px ".
1. Set a style for a paragraph: the font of "12px", the Row Height of "18px", and the margin value.
From the CSS inheritance, we can know that all our paragraphs inherit the "font-size: 16px" of its parent element "div # wrap ". At the same time, we learned from the previous introduction that 1px = 1 pixel 16 = 0.0625em, so that we can easily know the number of "em" equal to "12px"
0.0625em × 12 = 0.750em
In this way, we can set the style for Section p:
P {font-size: 0.75em;/* 0.0625em × 12 = 0.750em */}
To calculate the required line height and "margin" as "18px" to meet the basic leading described by Richard Rutter, We need to calculate the line height and "margin" as follows:
18 bytes 12 = 1.5em
Use the required line High Value "18px" and divide it directly by "font size 12px". In this way, the "line-height" value of the section "p" is obtained. In this example, the height of the row is equal to 1.5 times that of the font. Then we add the line-height and margin styles to the Section p.
|
p{font-size: 0.75em;/*0.625em × 12 = 0.750em */line-height: 1.5em;/*18px(line-height) ÷ 12(font-size) = 1.5em */margin: 1.5em;/*18px(margin) ÷ 12(font-size) = 1.5em */} |
2. Set an 18 PX font size for the title
The title "h1" is the same as the paragraph "p". It is also the "font-size" of "16px" inherited from its parent element "div # wrap ", so we can calculate his "em" in the same way"
0.0625em × 18 = 1.125em
We can write the obtained values to the CSS style sheet.
|
h1 {font-size: 1.125em;/*0.625em × 18 = 1.125em*/} |
Similarly, to retain the vertical rhythm mentioned by Richard Rutter, we also set line-height and margin for the title "h1" to "18px ", the method described earlier. It is easy to get their "em" value as "1em ":
|
h1 {font-size: 1.125em; /*0.625em × 18 = 1.125em*/line-height: 1em; /*18px(line-height) ÷ 18px(font-size) = 1em */margin: 1em; /*18px(margin) ÷ 18px(font-size) = 1em */} |
Set image size -- use em
To make an elastic layout example, we also need to insert an image in html:
This image has a width and height of "90px", a right margin and a base margin of "18px", and a left floating. Next let's take a look at how it achieves the effects of these image styles:
From the HTML structure, we clearly know that the image is a sub-element of the paragraph "p, you know that the "font-size" value of "p" in this section is defined as "12px". Therefore, when we calculate the image attribute value, it cannot be calculated by "1px = 0.0625em" or "1em = 16px". We need to use the oldest formula for calculation:
1 bytes font-size of the parent element × pixel value to be converted = em Value
In this way, based on the formula shown above, we can calculate the image size:
1 Jun 12 × 90 = 7.5em
Now you can write the calculated value to the style:
|
P img {width: 7.5em;/* 1 limit 12 (font-size of the parent element) x 90px (image width) = 7.5em */height: 7.5em; /* 1 Jun 12 (font-size of the parent element) × 90px (Image Height) = 7.5em */} |
We know in the section that "18px" is just "1em". Now we also use it in the image style:
|
P img {width: 7.5em;/* 1 limit 12 (font-size of the parent element) x 90px (image width) = 7.5em */height: 7.5em; /* 1 Jun 12 (font-size of the parent element) × 90px (Image Height) = 7.5em */margin: 0 1.5em 1.5em 0; float: left ;} |
In this way, we will create an example with the same effect as the elastic layout. We hope that such an instance will help you understand how to use "em" to create an elastic layout. Of course, you may still be worried about using "em" to create an elastic layout. It cannot be as accurate as "px". If you really understand this tutorial, I don't think you will have such an idea.
Elastic layout formula Summary
Finally, I am sure you will have the same idea as I would, that is, how the "px" value of the relevant parameter is successfully converted to the "em" value, and after the above learning, the formula is summarized as follows:
If the font size of an element is not set to an hour, the width, height, line-height, margin, padding, and border values of the element are converted according to the following formula:
1 bytes font-size of the parent element × pixel value to be converted = em Value
Let's look at an example:
|
<body><div id="wrapper">test</div></body> |
The default font size of the body is "16 PX". The related parameter values of "div # wrapper" are:
|
#wrapper {width: 200px;height: 100px;border: 5px solid red;margin: 15px;padding: 10px;line-height: 18px;} |
Then, convert the parameters according to the formula above:
|
# Wrapper {width: 12.5em;/* 1 × 16 × 200 = 12.5em value */height: 6.25em;/* 1 × 16 × 100 = 6.25em value */border: 0.3125em solid red;/* 1 limit 16 × 5 = 0.3125em value */margin: 0.9375em;/* 1 limit 16 × 15 = 0.9375em value */padding: 0.625em; /* 1 × 16 × 10 = 0.625em value */line-height: 1.125em;/* 1 × 16 × 18 = 1.125em value */} |
Let's take a look at the calculated value:
Next, I need you to look at the effect. This is very important. I am optimistic about it. On the basis of the same parameter, set the font size of an element to 14px ;, you can say that it is very simple. Just add it based on the previous formula, so now I will add it based on what everyone says:
|
# Wrapper {font-size: 0.875em;/* 1 × 16 × 14 = 0.875em value */width: 12.5em;/* 1 × 16 × 200 = 12.5em value */height: 6.25em;/* 1 limit 16 × 100 = 6.25em value */border: 0.3125em solid red;/* 1 limit 16 × 5 = 0.3125em value */margin: 0.9375em; /* 1 limit 16 × 15 = 0.9375em value */padding: 0.625em;/* 1 limit 16 × 10 = 0.625em value */line-height: 1.125em; /* 1 × 16 × 18 = 1.125em value */} |
Here, we can see the calculated layout value in firebug.
To better illustrate the problem, I have not set the font size for the element itself and set the font size for the element itself. The two values are calculated in firebug:
The main purpose of capturing this graph is to explain that if the font size of an element is set, the formula is not described above. We need to modify the formula as follows:
1. Font calculation formula is still
1 bytes font-size of the parent element × pixel value to be converted = em Value
2. The formula for calculating other attributes must be replaced
1. The font-size of the pixel element × the pixel value to be converted = em Value
Now, let's calculate the following:
|
# Wrapper {font-size: 0.875em;/* 1 × 16 × 14 = 0.875em value */width: 14.2857em;/* 1 × 14 × 200 = 14.2857em value */height: 7.1429em;/* 1 Jun 14 × 100 = 7.1429em value */border: 0.357em solid red;/* 1 Jun 14 × 5 = 0.357em value */margin: 1.071em; /* 1 Jun 14 × 15 = 1.071em value */padding: 0.714em;/* 1 Jun 14 × 10 = 0.714em value */line-height: 1.2857em; /* 1 hour 14x18 = 1.2857em value */} |
Let's take a look at the calculated value:
Summary
I have introduced a lot in length. The only thing I want to tell you is the following:
1. The default font size of the browser is 16 PX.
2. If the element itself does not set the font size, all attribute values of the element itself, such as boder, width, height, padding, margin, and line-height, are equivalent, we can all use the formula below to calculate
1 bytes font-size of the parent element × pixel value to be converted = em Value
3. This type must be understood slowly, or it will be easy to mix with the second point. If the font size is set for the element, the font size conversion still follows the second formula, that is, the following:
1 bytes font-size of the parent element × pixel value to be converted = em Value
The font size is set for the element. Other attributes of this element, such as "border, width, height, padding, margin, and line-height", must be calculated according to the following formula:
1. The font-size of the element itself × the pixel value to be converted = em Value
In this case, I don't know if you understand it. If you don't understand it, you can look back at the above instance.
