CSS行高与行对齐精解lineheight和verticalali

CSS行高与行对齐精解：lineheight和verticalaliCSS:lineheightverticalali离，但是文本之间的空白距离不仅仅是行高决lineheightnormal<实数>|<长度>|<比例>|inheritnormal通为1到1.2;实数:实数值，缩放因子;mal素离。而基线(Baseex有文字的顶线(Topline)、中线(Middle内框和行框都有一种内容区域，它是由字体尺寸决定的，如nlinebox有其它因框等于内容区域，而设定行高则能够增加或者减少行内框的高(行高-pstylelineheightpxpx<strongstyle=”line-heightpx行高50px。</strong><spanstyle=”line-eightpxxspanp—行框(linebox拟的矩形框，其高度等于本行内全部，当有多行内容时，每行都会有自己的行框，如图7-的概念对于学习本章[7.4垂直对齐:vertical-本行内元素的行高有关，而和父元素的高度(height)无下:pstylefontsizepxlineheightem高20px，行高2em。stylefontsizepxlineheightem30px，行高2em。算此时多行的文字将叠加到一起，例如有以下代p{font-size:20px;line-height:10px;}行高是可继承的，但是继承的是计算值，例如有以下代码:p{font-size:20px;line-height:2em;}pspan{font-size:30px;}ppxspanpx。</span></p>pempx，因此计算值为40px，即使<span>元素本pxpx示的p{font-size:20px;line-height:1em;}pspan{font-size:30px;}panpxspanp个元素单独定义行高，但是这样很烦琐，因此能的实数值作为缩放因子来统一控制行高，缩放因子是直接继承的，而不是继承计算值。例如修改上例中的行高为:p{line-height:1;}则含有图片行的行框行框，但是不会影响行高，因此也不会影响到基于行高齐，ign误自己的体现形式，例如在Opera内，行高将按照CSS到内容区域的上下两边，而IE和Firefox则不是完全平分示2个像素在实际显示中普通不会有太大的影响，因此能够忽视E是，其体现同其它浏览器也不相似。例如有以下代码#lineHeight4p{line-height:60px;}#lineHeight4fieldset{border:0;}dividlineHeightp在[IE6]内浏览line-width=”88″height=”31″/></p><formid=”testForm”n<fieldset><p><labelfor=”test1″>表单元素</label><inputtype=”textmaxlengthvalueIE失效”/></p></fieldset>v的上下，而由于图片默认是基线对齐，因此文字IE失效的问题，需要使用CSSHack手段来针对IEIECSSHack，请参见本书[第16章:浏览器与Hack]。方向居中XHTML:dividsampleh帖大盘点</h2>……</div>h针对这个现象，普通只需要设定与高度相等的行高即可，有关代码以下:#sampleh2{height:31px;line-height:31px;……}它需要文字垂直居中显示的地方，例如列表项、导航，读者能够发现文字和图片在垂直方向并不是沿中线居中，而是直对齐方式为基线对齐(vertical-align:linelignverticalalign表以下:verticalalignbaselinesub|super|top|text-top|middle|bottomtext-bottom|<比例>|<长度>|inheritbaselinesub下标;super:上标;top:顶端对齐;text-ebottomtexttomeline元格(table-cell)元素值为绝对长度;其它同指定值垂直对齐属性只对行内元素有效。例如有以下代码:pstyleverticalalignsuperspan标npgtp览器内浏览时将不会有任何变化。而以下代码:pspanstyleverticalalignsuper标</span></p>line-height介绍了文本的基线、顶线、中线和底线，尚有内容区域、行。基线对齐(vertical-align:baseline线同父元素的基线对齐，例如有以下代码:pstrong{izeemvertical-align:baseline;}pstrongverticalalignbaselinestrongp>的元素，本身没有基线，则将其底端同父元素的基线顶端对齐(vertical-align:top顶端对齐，例如有以下代码:p{}pstrong{erticalaligntoplineheightem}pimg{vertical-align:top;}<p>顶端对齐:<strong>vertical-align:top;</strong><imgsrc=”strong设定了vertical-align，还设定了line-height，这是由于在本章[7.3.2新设定行高，则<strong>元素继承了父元素<p>的行高，因此verticalaligntexttop顶线对齐，例如有以下代码，其显示如图7-p{}pstrong{verticalaligntexttop;}pimg{verticalaligntexttop;}pstrongverticalaligntop</strong><imgverticalalignbottom)与顶端对齐(vertical-align:verticalaligntextbottom)与文本顶端对齐(vertical-align:p中间对齐(vertical-align:middle使用在图片上，将图片的垂直方向的中线与文本行的中线对齐，例如pimg{vertical-align:middle;}<p>中间对齐为基线上方0.5ex处<imgsrc=”img/ddcat_ad.gif”alt=”tpxex)的示。而ex同字体尺寸有关，大部分浏览器认为1ex=的差别同样，在中间对齐上，各浏览器之间也稍有些差alignsuper元素的底端)相对于父元素的基线升高，下标(veralignsub移动的幅度CSS规范中没有规定，由浏览器来决定pspanstyleverticalalignsupervertical-alignsuperspanspanstyle=”vertical-alignsubverticalalignsubspan</p>比例值可使元素的基线(替代元素的底端)相对于父元少(负值)。器拟定的，而设定长度值或者比例，能够精确控制p{line-height:2em;}pemspanst