css: line-height 与box-sizing

css

1、line-hight:

行高line-height,是文本行基线这件的距离,不是字体大小,它确定了各个元素框的高度增加或减少多少。

对于块级元素:定义了元素中文本基线之间的最小距离。

line-height并不影响替换元素的布局,但是确实可以应用到替换元素。

行间距:line-height - font-size

定义font属性的时候,用户代理会自动会生成一个line-height。

浏览器  FF
 字体大小(font-size)  12px   13px 14px /15px 16px  18px  20px  22px 
 行高(line-height)  17px  19px  20px  21px  24px  27px  30px

 

浏览器  Chrome
 字体大小(font-size)  12px   13px 14px /15px 16px  18px  20px  22px 
 行高(line-height)  17px  19px  20px  21px  24px  27px  30px

 

浏览器  IE9
 字体大小(font-size)  12px   13px 14px  16px  18px  20px  22px 
 行高(line-height)  15.8px  17.2px  18.5px  21.2px  23.8px  26.4px  29px

 

浏览器  360
 字体大小(font-size)  12px   13px 14px /15px 16px  18px  20px  22px 
 行高(line-height)  17px  19px  20px  21px  24px  27px  30px

在inline元素中,不是文字撑开了div的高度,而是line-height!

 

2、box-sizing

只是为了规定box modeling

 css: line-height 与box-sizing

box-sizing : content-box || border-box || inherit

content-box 为默认值

你可能感兴趣的:(height)