javaweb 标签属性学习笔记(1)--em以及px

这个学期开始学习javaweb,我是个勤奋的爱百度的小白…

通过做两次实验,把遇到的不懂的常用的标签和属性自己百度了一遍用法。

1.font-family属性

用法举例:body{ font-family:Arial,Helvetica,sans-serif;}(应该都能看懂这个是style标签里的吧,嗯能看懂我就偷懒了)

解释:设定字体优先级,可以把多个字体的名称作为一个“回退”系统来保存,如果浏览器不支持第一个字体,则会尝试下一个。最后的sens-serif是一种无衬线字体,是一种通用字体族,大多数计算机里都有这种字体,保证前面的字体都没有的情况下不会设置“没有字体"的情况。

2.background-repeat属性
用法举例:body{ background-repeat: no-repeat;}

解释:可用来设置是否以及如何重复背景图像,除了no-repeat(背景图像将仅显示一次)这个属性外,还有其他的属性:
repeat-x:背景图像将在水平方向重复。
repeat-y:背景图像将在垂直方向重复。
inherit:*规定应该从父元素继承
repeat:*默认。背景图像将在垂直方向和水平方向重复。

如:这是只显示一次背景图像在这里插入图片描述

这是在水平方向重复背景图像
在这里插入图片描述
这是在垂直方向重复背景图像
在这里插入图片描述
这是默认重复背景图像
在这里插入图片描述
是不是看到图片就好理解了~

3.line-height 属性
用法举例:line-height:1.5em;

解释: 设置行间的距离(行高),而行间距的尺寸分配是line-height 与 font-size 的计算值之差(在 CSS中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容(文本+文本顶部+文本底部)的最小框就是行框(line-box)

这里看到不懂的em,于是又去百度了一波…嗯呐我可太爱百度了…
下面是我百度得来的收获:

1.px、em、rem都是计量单位,都能表示尺寸(不要问我为什么加了个rem,当然是因为…我不认识rem)

2.px表示“绝对尺寸”(并非真正的绝对),利用px设置字体大小及元素宽高等比较稳定和精确。任意浏览器的默认字体高都是16px。px的缺点是其不能适应浏览器缩放时产生的变化,因此一般不用于响应式网站。

本来不想插播什么是响应式网站的,但是为了能够更好的了解em,原谅我还是插进来了。

自适应网站会根据你使用的访问设备来自动调教分辨率使得你看的页面相同,而响应式则是让不同的用户端看的不同的网站布局和内容。
响应式网站较为简单,只要开发一个界面就可以了,至于布局可以通过设定来自行调整。而自适应网站,开发者要做两套或者多套不同的网页界面,以满足所有的市场用户。

3.em表示相对尺寸,一般都是以<body>的字体大小作基准的。em是相对于父元素的属性来计算的,这样就会存在一个问题,就是每一层父元素都必须有它的数值。(所有未经调整的浏览器都符合: 1em=16px。)

4.rem是CSS3新增的一个相对单位,不过是相对Html根元素,这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。

5.当 em 单位设置在 html 元素上时,它将转换为em值乘以浏览器字体大小的设置。 例如,如果网站的 html 元素的字体大小属性设置为 1.25em,根元素字体大小将为 1.25 倍的浏览器的字体大小设置。
(即假定当前默认字体尺寸是14px,n em即为14px字体尺寸的n倍)
实例:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
</style>
</head>
<body>
<h1>假定当前默认字体尺寸是14px,n em即为14px字体尺寸的n倍:</h1>
<ul>
	<li class="size1">
		<p>1em大小的文字</p>
	</li>
	<li class="size2">
		<p>2em大小的文字</p>
	</li>
	<li class="size3">
		<p>3em大小的文字</p>
	</li>
</ul>
</body>
</html>

运行结果:在这里插入图片描述

第一行:16px大小
第二行:114px大小
第三行:2
14px大小
第四行:3*14px大小

这里给大家提供一个px、em、rem转换工具http://pxtoem.com/(狗头保命,我也是白嫖来的)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南桃shine

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值