行高和高度的三两事:行高 > 高度 文字靠下;行高 < 高度 文字靠上

先明白行高的原理,行高包含内容区域的高度、上半行间距和下班行间距。如果line-heigt:300px; font-size:20px;算出间距280px,上下半行间距都为140px。chrome默认字体大小为16px。

行高 > 高度  文字靠下;

height: 200px;
line-height: 300px;

行高 < 高度  文字靠上;

height: 200px;
line-height: 100px;

 

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网上花店</title> </head> <style> body{ background-color: lightgray; color:darkgray; font-size: 16px; font-family: "楷体",serif; } h1{ text-align: center; height: 86px; line-height: 86px; font-weight: lighter; } h1 em{ font:14px; } p img{ display:block; margin:auto; } p em{ font-style: italic; text-decoration: underline; } p{ text-indent: 2em; line-height: 30px; } </style> <body> <!-- 1.通过CSS设置网页背景颜色为浅灰色,文字颜色为深灰色,字号16px,字体为楷体--> <!-- 2.通过CSS设置标题1水平居中,高度都为86px,字体粗细为lighter。 3.通过CSS改变“偏安一隅 静静生活”的文字大小--> <h1>彼岸の花偏安一隅 静静生活</h1> <hr /> <!-- 4.通过CSS设置图片居中。注意:对段落设置水平对齐方式才起作用。--> <p>< img src="images/bestseller2.jpg" /></p > <br /><br /> <!-- 5.通过CSS设置段落缩进2个字符,30px--> <p>多肉植物是指植物营养器官肥大的等植物,通常具根、茎、叶三种营养器官花、果实、种子三种繁殖器官。在园艺上,又称肉质植物或多肉花卉,但以多肉植物这个名称最为常用。</p > <!-- 6.通过CSS设置“全世界共有多肉植物一万余种”倾斜并加下划线--> <p>全世界共有多肉植物一万余种,它们绝大部分属于等植物(绝大多数是被子植物)。植物上隶属几十个科,个别专家认为有67个科中含有多肉植物,但大多数专家认为只有50余科。</p > <br /> </body> </html>
03-10
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值