line-height属性(行高标签用法)
line-height属性
1、line-height特点设置行间的距离(行高),而行距离的尺寸分配是line-height与font-size的计算值之差(在CSS中成为“行距离”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容(文本+文本顶部+文本底部)的最小框便是行框(line-box),
2、可能的值有:
注:行距离自动习惯行高的方法,最好用的是采用number数值的方法。
3、设置了line-height的行框line-box,具有的特性:
1)、笔直居中性:由上面对line-height定义可知,line-height是经过line-box行框表现的,而行框包含文本+文本顶部+文本底部,文本顶部和文本底部是line-height与font-size差值的一半,所以,line-box与文本共用中基线,这便是行高的笔直居中性。
单行文字的笔直居中对齐,将line-height特点设置为所需要的行框高度:
关于多行文本笔直居中对齐,只需要将行框内的多行文本转换为内敛元素,比如设置display:inline-height或inline,然后单独设置内敛元素的行距离,整个内敛元素就在行框内笔直居中对齐了:
注:经过line-height设置文本笔直对齐,假如设置元素笔直对齐,需运用vertical-align:middle;
2)、运用行高替代高度防止haslayout
在某些情形下,line-height可以和height交换,因为实现的作用一样。都能撑开一个高度,然而这两个css特点有一个较隐蔽的差异,便是运用height会使标签haslayout,而运用line-height则不会。曾经只有IE6的时分曾流行运用height铲除浮动,便是利用了IE下height使haslayout的特点。但有时分,haslayout并不需要,反而要防止。
读过我前面有关自习惯按钮文章的人可能会发现我运用了line-height替代了height,其原因在于:IE6,IE7下,相似inline-block特点的元素里假如有block特点的元素,假如该blockhaslayout,则该标签会突破外部inline-block的显现而宽度100%显现,从使按钮自习惯文字大小的作用失效,解决方法便是运用line-height替代height。
line-height属性行高标签用法
line-height属性定义及用法
在css中,line-height属性是使用来设置行高,即设置行间的距离。所以浏览器都支持该属性,但是任何的版本的InternetExplorer(包括IE8)都不支持属性值"inherit";
说明
该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离;
line-height与font-size的计算值之差(在CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框;
原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值;
line-height属性语法格式
css语法:line-height:normal/number/length/%/inherit;
JavaScript语法:object.style.lineHeight="2";
line-height属性值说明
normal:默认,设置合理的行间距;
number:设置数字,此数字会与当前的字体尺寸相乘来设置行间距;
length:设置固定的行间距;
%:基于当前字体尺寸的百分比行间距;
inherit:规定应该从父元素继承line-height属性的值;
实例:
<!DOCTYPEhtml><html><head><metacharset="utf-8"/>
<title>cssline-height属性设置行高</title>
<styletype="text/css">.small{line-height:80%;}.big{line-height:180%;}</style>
</head><body><p>这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>这是一个标准行高的段落。<br></p>
<pclass="small">这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>这是一个更小行高的段落。<br></p>
<pclass="big">这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>这是一个更大行高的段落。<br></p>
</body></html>
优秀作品:
最新作品:
评论列表(共326人参与)参与讨论或分享设计作品获得视觉癖积分奖励
么 01 注册会员
2021-01-11 1:38:45
iv> 完好 人在调查事物的时分总期望发现一些规则,在这种心理作用下,咱们会主动补充本来不存在的图像。负空间就是最典型的比如。 册排版设计欣赏" src="/uploads/allimg/210113/1-210113095S6
回复1、名片注册会员
2021-01-11 23:35:14
虽然LOGO游客
2021-01-11 17:43:19
游客59809:line-height属性10116141357.jpg" style="height: 228px; width: 400px;" /> 餐饮厨房设计的推广功能
回复许在一两注册会员
2021-01-11 13:16:34
动习惯行高的方法,最好用的是采用number数值的方法。 3、设置CXV5-TVJMH78 4、DE15R22-NX4MV3T-9XCZS7B-XVVSF4G
回复