line-height设置% 数字以及em
来源:互联网 发布:淘宝货源网 编辑:程序博客网 时间:2024/06/05 07:52
line-height百分比在面试中可能经常问到。例如你知道line-height:120%和line-height:1.2的区别吗?
现在就说一下行高带单位和不带单位的区别,例如下面的例子:
line-height:26px; 表示行高为26个像素line-heigth:120%;表示行高为当前字体大小的120%line-height:2.6em; 表示行高为当前字体大小的2.6倍
带单位的行高都有继承性,其子元素继承的是计算值,如父元素的字体大小为14px,定义行高line-height:2em;则计算值为 28px,不会因其子元素改变字体尺寸而改变行高。(例如:父元素14px,子元素12px,那么行高就是28px,子元素虽然字体是12px,行高还是父元素的行高)
line-height:2.6;表示行高为当前字体大小的2.6倍
不带单位的行高是直接继承,而不是计算值,如父元素字体尺寸为14px,行高line-height:2;子元素字体为12px,不需要再定义行高,他默认的行高为24px。(例如:子元素12px,他的行高是24px,不会继承父元素的28px)
只是单纯的文字描述,可能同学看了会很晕!不清楚是怎么回事!下面我再补充一下案例吧!
大家把下面代码copy到html中
<style> .parent1{font-size:14px;line-height: 150%; background: #999;padding:10px} .parent2{font-size:14px;line-height: 1.5; background: #999;padding:10px} .child{font-size:26px;background: #ccc}</style><div class="parent1"> <div class="child">line-height: 150%;</div></div><br/><br/><div class="parent2"> <div class="child">line-height: 1.5;</div></div>其中,一个是有百分比的,一个是没有百分比的!预览图如下:
如上图,有百分比的haorooms_children 继承了父级元素14*1.5=21px
没有百分比,不带单位的是自己的1.5倍,也就是26*1.5=39px;
0 0
- line-height设置% 数字以及em
- line-height:2;与line-height:2em的区别
- font-size,line-height,text-indent大小的设置方法(px,em,百分数)及其继承性
- CSS em rem vh vw calc() line-height 百分比
- 全面理解解析line-height: 150%和line-height: 1.5em和line-height: 1.5rem和line-height: 1.5的区别
- line-height
- line-height
- line-height
- line-height
- line-height
- line-height
- line-height
- line-height
- line-height
- line-height
- line-height
- 【line-height】 line-height详解
- height和line-height
- C#和C++代码折叠功能
- 应用通知栏样式及声音、震动和闪光设置
- libsvm在MATLAB的安装
- Google出品 可以添加headViewd的GridView
- 线程创建未回收导致的内存泄漏问题(进程中的堆栈内存,并不是malloc出来的内存)
- line-height设置% 数字以及em
- win10常用快捷键
- Intent的用法——传递数据
- logback 常用配置详解(序)logback 简介
- ELK(ElasticSearch, Logstash, Kibana)搭建实时日志分析平台
- 开源大数据引擎:Greenplum 数据库架构分析
- java编程思想读书笔记----第十章 内部类
- asset断言函数
- 【项目】内存池(对象池)