CSS Learning Note two

July 12, 2015
First, Absolute
1. Comment Have to go to the space effect
2.absolute with follow-up, best positioning effect
3. Image Center Effect--set absolute,test-align:center image in parent element with an   empty string and then picture
4.absolute does not occupy space and does not affect page layout
Z-index does not work at 5.absolute
6.top, Bottom,left,right has the tensile action ie7+ can replace the width/height, the inner element can be automatically stretched.
7. Compare
Under normal circumstances
The inner element supports a percent width/heigt value, but to work, the parent container's height value is not auto.
Absolute under
Even if the height value of the parent element is auto, the percent height is also supported as long as the container is absolutely positioned for extrude formation.
8.width/height and Top,botton,right,left extrudes exist at the same time, setting the size is width/height greater than top,bottom,left,right is priority
But when setting Margin:auto is two is a partnership. ie8+ under
The distance between the two lines of line-height and the baseline of the text.
1.line-height can let single-line text center
2.line-heiht and inline frame box model
Four-Medium box
3. The height of the inline element is determined by line-height.
4. Content area + Line spacing = row height
5. Content area height is only related to the font size and the font (with) off and line height
6. In the SimSun font, the content area height is equal to the text size value
7. The way to eliminate the bottom of the picture, row height does not affect the height of the picture
7.1 Picture blocky-No baseline alignment
Img{display:block;}
7.2 Picture Bottom Line Alignment
Img{vertical-align:bottom;}
7.3 Line height is small enough-the baseline position is moved up
. box{line-height:0;}
8. Picture Horizontal Vertical Center ie8+
. Box{line-height:300px;text-align:center;} Parent level
. Box>img{vertical-align:middle;}
9. Multi-line text horizontal vertical Center ie8+
. Box{line-height:250px;test-align:center;}
.box>.text{display:inline-block;line-height:normal;
text-align:left;vertical-align:middle;max-width:100%}
10.ie6,ie7 Line-height instead of height
. out{display:inline-block;/* or folat:left*/}
. In1{display:block; height:36px;}
. In2{display:block; line-height:36px;}
<span class= "Out" >
<span class= "in1" >height:36px;</span>
</span>
<span class= "Out" >
<span class= "in2" >line-height:36px;</span>
</span>

CSS Learning Note two