May be a bottleneck, for a long time feel that there is nothing on the CSS to see. Never felt that CSS had any difficulty, what box models and various streams also felt effortless to understand, but seemed limited to this. Some properties are limited to common use, sometimes to do experiments to verify some properties, and then forget. Now think about this part because some of the properties are really rare, not much in actual production, and there are some I think are common, but not to understand why this is so. Don't say much nonsense, and don't ask me why I suddenly like to be hit, because it is really hit ... Don't want to say
2. Line-height
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Vertical-align detailed</title>6 <style>7 Body{8 font-size:16px;9 }Ten . P-container{ One Background-color:Greenyellow; A Line-height:1.5remWhen the value is a number followed by a value of 1.5, the value is a percentage after the value is 150% - font-size:20px; - } the - . P-container P{ - font-size:14px; - } + - </style> + </Head> A <Body> at - <Divclass= "P-container"> - <P> - Does that make sense to you? But one thing we need to be aware of is that the baseline for different fonts will be a little bit out of the reach-Microsoft's baseline will sink a little bit relative to the standard baseline, - But the impact is not so much to understand it? But one thing we need to be aware of is that the baseline for different fonts will be a little bit out of the reach-Microsoft's baseline will sink a little bit relative to the standard baseline, - But the impact is not so much to understand it? But one thing we need to be aware of is that the baseline for different fonts will be a little bit out of the reach-Microsoft's baseline will sink a little bit relative to the standard baseline, in - </P> to + <P> - Does that make sense to you? But one thing we need to be aware of is that the baseline for different fonts will be a little bit out of the reach-Microsoft's baseline will sink a little bit relative to the standard baseline, the But the impact is not so much to understand it? But one thing we need to be aware of is that the baseline for different fonts will be a little bit out of the reach-Microsoft's baseline will sink a little bit relative to the standard baseline, * But the impact is not so much to understand it? But one thing we need to be aware of is that the baseline for different fonts will be a little bit out of the reach-Microsoft's baseline will sink a little bit relative to the standard baseline, $ But the impact is not so much to understand it? But one thing we need to be aware of is that the baseline for different fonts will be a little bit out of the reach-Microsoft's baseline will sink a little bit relative to the standard baseline,Panax Notoginseng But the impact is not so much to understand it? But one thing we need to be aware of is that the baseline for different fonts will be a little bit out of the reach-Microsoft's baseline will sink a little bit relative to the standard baseline, - But the impact is not so much to understand it? But one thing we need to be aware of is that the baseline for different fonts will be a little bit out of the reach-Microsoft's baseline will sink a little bit relative to the standard baseline, but not much . the </P> + </Div> A the </Body> + </HTML>And then we'll look at the effect when the value is 1.5rem.
One thing we need to note is that the Body,.p-container,.p-container P's font size is 16px,20px and 14px respectively, when we set the P-conainer line-height to 1.5rem, p
How does the row height of 24px,24px come about? Is the result of the body's 16px*1.5, because the reference objects of REM and EM are generally of body size
And then we look at the effect of a value of 150%.
At this point, the line spacing of P-container P is 30, it is obvious that the line spacing is 20*1.5, first of all, not to mention the conclusion to look at the value of 1.5, that is, the effect of our common usage
At this point the line-height becomes 21px, which is the 14*1.5 of the P element, so what do you know at this point?
When the value of Line-height is numeric, all child elements recalculate the row height, and when the value of line-height is length and percentage, Line-height is calculated based on the current element's font-size, inheriting to the following element, Of course, when the value is length (except px), the current element is the body.
The existence is reasonable, it seems to be a bit true ah ...
Well, let's take a look at the impact of Line-height on our layout, the code is like this
<style= "Background-color: #d51875;" > < src= "img/6.jpg" alt="/><span style=" Background-color: #fff; " > seok </span></div>
And the effect is like this.
When inserting a picture into a block-level element, there is a gap below the default. Picture Display:inline-block So the picture also has vertical-align, also has the baseline, the line spacing also may have the influence to it, therefore eliminates the bottom clearance one method is lets the picture display:block;
Method 2: Since the picture can be applied vertical-align then let the bottom of the picture align;
Method 3: Baseline up, what does the baseline move affect? Yes, the line height-the distance between the baseline, so that the row height is small enough, of course, the font size of 0 can also be changed to include the picture container row height factor.
Line-height, is that a little bit of egg? Of course not! There is another, multi-line text horizontal Vertical Center ~ ~
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Vertical-align detailed</title>6 <style>7 Body{8 font-size:16px;9 }Ten . Box{
height:250px; One text-align:Center; A Background-color:#009900; - Line-height:250px; - } the - . box. Text{ - Display:Inline-block; - vertical-align:Middle; + Line-height:Normal; - Background-color:#e3372d; + } A at - </style> - </Head> - <Body> $ <Divclass= "box">Panax Notoginseng - <Divclass= "text"> the Line-height The default property value is related to the user's browser and element font, so normal is an indeterminate value, and the value as a row height is calculated based on the font-size of the current element such as font-size:20; line-height:1.5; Then the line height is 20*1.5=30 + A specific length values such as 15rem, etc., percentage equivalent to the value the + When the row height is a numeric value, all child elements recalculate the row height, and the percentage and length values are the current elements that inherit from the font-size to the following element, and the value is generally used as a global setting - </Div> $ </Div> $ - - </Body> the </HTML>
The effect is such a drop
Well, this does not explain, I believe if you can understand the above, this should also understand.
The above content is in MU class online after reading Zhang Xin Xu Big video, draw notes and some of their own ideas, if there is wrong place, welcome to criticize.
The things that vertical-align and line-height
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
