2013/2/20CSS属性学习-优快云博客

本文详细解析了CSS中的line-height、font-weight、text-indent及vertical-align等关键属性的作用与使用方法，并附带实例说明。

2019独角兽企业重金招聘Python工程师标准>>>

示例： .content{ font-size:14px; color:#000000; line-height:28px;/设置行高/ font-weight:bold;/设置文字的粗体样式/ text-indent:24px;/* 文字的首行缩进*/ background-color:#867D6A; width:380px; vertical-align:top;/内容的垂直对齐方式/ text-align:left;/内容的水平对齐方式/ padding:10px; margin-top:110px; margin-left:60px; border:6px double #EDEDED;}

详解： 1 line-height 行高指的是文本行的基线间的距离，但是文本之间的空白距离不仅仅是行高决定的，同时也受字号的影响

line-height属性的具体定义：

    1). 语法：line-height:normal|<实数>|<长度>|<百分比>|inherit
    2).说明：设置元素中行的高度
    3).值：normal:默认行高，一般为1到1.2；
          实数：实数值，缩放因子；
          长度：合法的长度值，可为负数；
          百分比：百分比取值基于元素的字体尺寸
    4).初始值：normal
    5).继承性：继承
    6).适用于：所有元素
    7).媒体：视觉
    8).计算值：长度和百分比为绝对值；其他同指定值。

    **行高指的是文本本行的基线间距离。而基线(Base line)，指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x色下端沿，同时还要文字的顶线（Top line），中线(Middle line)和底线（Bottom line），用以确定文字行的位置。
    行高与字体尺寸的差称为行距**

    详情见：http://www.tonjay.com/line-height.html

2 font-weight：指定字体显示的浓淡程度。属性值：normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间地热数字（以百位单位）来衡量字体的浓淡

3 text-indent：表示首行缩进

注意：text-indent不能用于display:inline-block的元素，可以用于display:block.
           text-indent不能用于表单

4 vertical-align:

    属性值有：baseline , sub , supper , top , text-top , bottom , text-bottom , middle以及各种长度值（%，em，ex等等）
    按照W3C的定义，当内联元素的vertical-align设置为：
        baseline,top,bottom时都是该元素的baseline(或middle,top,bottom)对其周围元素的相同位置，如图片的top和周围文字的top对齐

        text-top和text-bottom的时候，是该元素的top（或bottom）对齐周围元素的text-top（或text-bottom）

        middle的时候，是该元素的中心对齐周围元素的中心。这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即 小写字母“x”的正中心 。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心（以上图为例，x的高度应该是10px，而em是18px，所以两个值不一样）。

转载于:https://my.oschina.net/syc2013/blog/109432