Peripheral knowledge points_html/css_WEB-ITnose

em

　1em = the font-size value set by the element itself or inherited from the parent element

1 <h1 id="left-margin-small-px-small">left margin = <small>24px</small></h1>2 <h2 id="left-margin-small-px-small">left margin = <small>18px</small></h2>3 <p>left margin = <small>12px</small></p>

1 h1{font-size:24px;}2 h2{font-size:18px;}3 p{font-size:12px;}4 h1,h2,p{margin-left:1em;}

font-weight

　The value 100~900 does not have a fixed boldness. It is generally equivalent to a certain deformation name. 400 corresponds to normal, 700 corresponds to bold, and the others depend on the keywords. .

Times hypothetical bold designation

字体	指定关键字	指定数字
TimesRegular	normal	100,200,300,400
TimesBold	bold	500,600,700,800,900

bolder bold according to the parent element

1 p{font-weight:normal;}/*400，更粗是bold对应700，其中最小值为700*/2 p em{font-weight:bolder;}/*700*/3 4 h1{font-weight:bold;}/*700，更粗假设没有关键字，则设置为下一个更大的数字，最大为900*/5 h1 b{font-weight:bolder;}/*800*/

font-size

No specified number, initial value is medium . Larger is similar to bolder and moves up by the scaling factor based on the parent element, but has no absolute size range (900) limit.

The percentage is also calculated based on the size inherited from the parent element.

These inheritances are level-by-level, and the deeper they are nested, the more they accumulate.

Using px gives a fixed value to the font. This has a hidden danger that users cannot adjust the text size before IE6, so it would be better to use keywords and percentages for the font size.

text-indent

　Text-indent Jin will also inherit.

1 <style type="text/css">2     #demo{text-indent:3%;}3 </style>

1 <div id="demo">2     This is the first line.3     <p>This is the second line while this will also <br>get the text indent style.</p>4 </div>

line-height

 1 <style type="text/css"> 2     body{font-size:10px;line-height:10px;} 3     /*由于大多数浏览器默认font-size最小值为12px,所以此处body设置的字体大小其实为12px*/ 4     5     .paragraphA{line-height:1em;}/*继承字体大小为12px，line-height为12*1=12px*/ 6     .paragraphA p{font-size:18px;}/*line-height为继承的12px*/ 7  8     .paragraphB{line-height:1;}/*使用缩放因子，运用于该元素和所有子元素，各元素根据自己字体大小值计算line-height为12*1=12px*/ 9     .paragraphB p{font-size:14px;}/*自身大小值*缩放因子：line-height为14*1=14px*/10 11     .paragraphC p{font-size:12px;line-height:150%;}/*根据自身指定字体大小计算line-height为12*150%=18px*/12 </style>

1 <div class="paragraphA">2     <p>This is paragraph A which gets a line-height equals 12px.</p>3 </div>4 <div class="paragraphB">5     <p>This is paragraph B which gets a line-height equals 14px.</p>6 </div>7 <div class="paragraphC">8     <p>This is paragraph C which gets a line-height equals 18px.</p>9 </div> 

vertical-align

The default value is baseline, aligned with the text baseline (letters such as "g", The small tail is below the baseline).

Text-bottom: Align with the bottom line of the text (the "bottom tangent line" of the text, the tangent line at the bottom of the small tail).

Bottom: Align the bottom of the line box (when the line height is greater than the font size, there is a certain distance below the small tail at the bottom of the space occupied by the line height).

The percentage is to increase or decrease the specified amount relative to the baseline (row height) of the parent element.

px: Positive values ​​will increase, negative values ​​will decrease.

Note that vertical-align can only be used for inline elements or table cell elements.

References

"Css Definitive Guide" Chapter 4~6