line-height 百分比和数值设置行高
2017-01-14 13:10
393 查看
一、line-height的值为百分比
子集元素继承父级元素的距离
1、例如
2、说明
//结果就是:
二、line-height的值为数值
子元素计算各自的行距离
1、例如
2、说明
//结果就是:
子集元素继承父级元素的距离
1、例如
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ font-size:14px; line-height:150%; background: black; } p{ font-size:26px; background: gray; color: white; } </style> </head> <body> <p>你好!</p> </body> </html>
2、说明
body{font-size:14px;line-height:150%;} p{font-size:26px;}
//结果就是:
body{line-height:21px;}//14*150%=21 p{line-heigt:21px;}//继承父元素
二、line-height的值为数值
子元素计算各自的行距离
1、例如
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ font-size:14px; line-height:1.5; background: black; } p{ font-size:26px; background: gray; color: white; } </style> </head> <body> <p>你好!</p> </body> </html>
2、说明
body{font-size:14px;line-height:1.5;} p{font-size:26px;}
//结果就是:
body{line-height:21px;} //14*1.5=21 p{line-height:39px;} //26*1.5=39
相关文章推荐
- CSS——line-height行高设置垂直居中
- 让iframe的高度height也可以设置百分比数值
- Jquery 设置字体大小(font-size)与行高(line-height)
- ie6下 line-height设置行高失效bug解决办法
- line-height参数,数值百分比的区别
- CSS行高:line-height属性详解
- CSS中line-height深入-----深入理解CSS中的行高
- CSS行高line-height属性理解及应用(转帖)
- 行高line-height小结
- Flex :给LineChart设置坐标轴最大最小范围,以及设置纵坐标的线条间隔,数值间隔的例子
- ie对行高line-height的诡异解释
- IE6行高line-height失效问题方法详解
- css行高line-height的一些深入理解及应用
- css行高line-height的深入理解及应用
- CSS line-height行高上下居中垂直居中样式属性
- CSS行高——line-height
- css行高line-height的深入理解及应用
- line-height 和 vertical-align 行高与行对齐精解 (图文)
- line-height:normal 默认行高 html按钮点击无效button.disabled=true
- css行高line-height的一些深入理解及应用