当前位置: 首页 > Web前端 > CSS

CSS使用记录:height、line-height、font-size的作用和区别

时间:2023-03-31 12:40:02 CSS

关于cssblockmodel:cssblockmodel什么是line-height?如上图所示,基线不是汉字的底边,而是英文字母“x”的底边。line-height:如图,两条红线之间的高度和文字的上下半行间距(halfthelinespacing)linespacing:上一行底线到顶端的距离lineofnextlinefont-size:同一行顶线和底线的距离font-size和line-height的关系//line-height没有设置,效果如上图font-size:100px;//设置行高,font-size=line-height,效果如上图font-size:100px;line-height:100px;//设置行高,andfont-size>line-height,效果如上图,两行字体重叠font-size:150px;line-height:100px;heightandline-height//设置line-height为0,不设置高度,设置font-size,效果如上图,元素(div元素)没有高度,只有上下边框的高度font-size:100px;background-color:#f2f;line-height:0px;border:1pxsolid#111daa;//设置font-size为0,不设置高度,设置line-height,效果如上图,元素(div元素)没有高度,上下边框只有一个font-size:20px;背景色:#f2f;行高:100px;边框:1px实心#111daa;结论:当不设置div的height属性时,div的高度根据line-height的大小变化,文字垂直居中。当设置height=line-height当设置height>line-height当设置height