Open evantianx opened 7 years ago
line-height——两行文字基线(baseline)之间的距离
line-height
<p>这是一行文字，这是一个<em>em</em>标签</p>
包含了四种盒子:
font-size
支持normal,,,，inherit值
line-height: normal
line-height: <number>
line-height: <length>
line-height: <percent>
line-height: inherit
line-height: 1.5和line-height: 150%/1.5em有什么区别？ 前者的后代可继承元素会根据自身的字体大小乘以1.5来得到自身的行高； 后者的后代元素会以父级字体大小乘以1.5来得到自身的行高
line-height: 1.5
line-height: 150%/1.5em
body全局数值行高如何设置?
/*原则就是匹配20px,在chrome下是舍去小数位的，所以取行高值的时候要进位*/ body { font-size: 14px; line-height: 1.4286}
消除图片底部间隙的方法:
img {display: block}
img {vertical-align: bottom;}
.box {line-height: 0;}
基本知识
line-height——两行文字基线(baseline)之间的距离line-height与行内框盒子模型包含了四种盒子:
font-size相关line-height的高度机理line-height无关line-height属性值支持normal,,,，inherit值
line-height: normal默认属性值，由浏览器决定，且与元素字体有关line-height: <number>相对于元素的字体大小计算,即: number*font-size = line-heightline-height: <length>px,em等等line-height: <percent>相对于设置了该行高属性的元素的font-size大小计算line-height: inheritIE8+line-height: 1.5和line-height: 150%/1.5em有什么区别？ 前者的后代可继承元素会根据自身的字体大小乘以1.5来得到自身的行高； 后者的后代元素会以父级字体大小乘以1.5来得到自身的行高body全局数值行高如何设置?
line-height与图片的表现消除图片底部间隙的方法:
实际应用