android 行高和字号之间关系,行高和字号

行高:指的是每一行的高度

盒子高:指的是元素的高度

1.文字默认在行高中默认是居中显示的

2.如果盒子中只有一行内容,要让这一行内容居中,只需要设置行高=盒子高度(line-height = 盒子高度)

3.如果一个盒子中有多行文字, 那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中, 只能通过设置padding来让文字居中(先设置行高,line-height = 20px,然后根据行数去计算padding,(元素高度 - 行高*行数)/ 2就是padding)

p{

box-sizing: border-box;

width: 610px;

height: 110px;

background-color: #cdcdcd;

border: 1px solid #000000;

line-height: 20px;

padding-top: 35px;

padding-bottom: 35px;

}

div{

box-sizing: border-box;

width: 100px;

height: 80px;

border: 1px solid #000;

line-height: 80px;

}

葬爱:非主流文化的常用词,是当今网络流行术语.且流行于非主流杀马特之中。葬,即埋葬,爱,即爱情,翻译成外语就bury love

我是文字

还原字体和字号

设置了字体和字号之后要重新设置行高和padding

1.在企业开发中, 如果一个盒子中存储的是文字, 那么一般情况下我们会以盒子左边的内边距为基准, 不会以右边的内边距为基准, 因为这个右边的内边距有误差

2.右边内边距的误差从何而来? 因为右边如果放不下一个文字, 那么文字就会换行显示, 所以文字和内边距之间的距离就有了误差

3.顶部的内边距并不是边框到文字顶部的距离, 而是边框到行高顶部的距离

p{

/*box-sizing防止增加padding或者margin之后盒子高度变大*/

box-sizing: border-box;

width: 610px;

height: 110px;

background-color: #cdcdcd;

border: 1px solid #000000;

font-family:"黑体";

font-size: 20px;

line-height: 40px;

color: red;

padding-left: 10px;

padding-right: 10px;

padding-top: 15px;

}

葬爱:非主流文化的常用词,是当今网络流行术语.且流行于非主流杀马特之中。葬,即埋葬,爱,即爱情,翻译成外语就bury love

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值