HTML学习笔记16——尺寸的表示

1.像素表示： 23px

2.子像素可以用百分比表示其大小，如50%，表示为父元素的一半

如果块状子元素的宽度不指定，默认是占满父元素的宽度；

3.用em表示字体大小时，表示相对大小，是与父元素的比值：

　　　　　　　　　　　1em表示与父元素的字体大小相同；

　　　　　　　　　　　0.5em表示是父元素的字体大小的一半；

　　　　　　　　　　　2em表示是父元素的字体大小的2倍；

　　　　　　　　　　注：em是相对于自身字体大小而言的，如果自身未指定，那么就是继承父元素的字体大小。

当父元素取10px时，子元素若取1.2em,1.5em...则表示子元素的字体大小为12px,15px.....

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>尺寸的表示</title>
 6 </head>
 7 <style type="text/css">
 8     #father{ 9         width:600px;
10         height:300px;
11         background:blue;
12     }
13     #son1{14         height:50%;
15         background:green;
16     }
17     #son2{18         height: 25%;
19         width:25%;
20         background:red;
21     }
22     #test1{23         width:400px;
24         height:200px;
25         font-size: 30px;
26         background: pink;
27     }
28     #p1{29         font-size: 20px;
30     }
31     #p2{32         font-size: 1em;
33     }
34 </style>
35 <body>
36     <div id="father">
37         <div id="son1">
38             子div1只定义高度，未定义宽度，则默认与父div同宽；
39         </div>
40         <div id="son2">
41             子div2定义宽高；
42         </div>
43     </div>
44     <div id="test1">
45         我是test1，p标签的父div；
46         <p id="p1">
47             p1使用像素表示字体大小；
48         </p>
49         <p id="p2">
50             p2使用em表示字体大小；
51         </p>
52     </div>
53 </body>
54 </html>

View Code

效果：

4. rem的表示方法，rem是相对于根元素的大小而言的。

转载于:https://www.cnblogs.com/Christeen/p/5712914.html

HTML学习笔记16——尺寸的表示_px、%、em三种相关推荐

JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别
JavaScript:学习笔记(7)--VAR.LET.CONST三种变量声明的区别 ES2015(ES6)带来了许多闪亮的新功能,自2017年以来,许多JavaScript开发人员已经熟悉并开始使用 ...
Hibernate学习笔记_核心幵发接口及三种对象状态
核心接口开发 (重点) 一, Configuration a) AnnotationConfi ...
cocos2d-x学习笔记16：记录存储1：CCUserDefault
cocos2d-x学习笔记16:记录存储1:CCUserDefault 一.简述 CCUserDefalt作为NSUserDefalt类的cocos2d-x实现版本,承担了cocos2d-x引擎的记录 ...
SpringBoot学习笔记(16)----SpringBoot整合Swagger2
Swagger 是一个规范和完整的框架,用于生成,描述,调用和可视化RESTful风格的web服务 http://swagger.io Springfox的前身是swagger-springmvc,是 ...
Hadoop学习笔记—16.Pig框架学习
Hadoop学习笔记-16.Pig框架学习一.关于Pig:别以为猪不能干活 1.1 Pig的简介 Pig是一个基于Hadoop的大规模数据分析平台,它提供的SQL-LIKE语言叫Pig Latin, ...
台大李宏毅Machine Learning 2017Fall学习笔记 (16)Unsupervised Learning:Neighbor Embedding
台大李宏毅Machine Learning 2017Fall学习笔记 (16)Unsupervised Learning:Neighbor Embedding
Linux 学习笔记16 信号量
Linux 学习笔记16 信号量Semaphore 信号量概念信号量(或信号灯)是一种用于提供不同进程间或一个给定进程的不同线程间同步手段的原语. 信号量是控制进程(或线程)同步(谁先执行,谁后执行 ...
Netty网络框架学习笔记-16(心跳(heartbeat)服务源码分析)
Netty网络框架学习笔记-16(心跳(heartbeat)服务源码分析_2020.06.25) 前言: Netty 作为一个网络框架,提供了诸多功能,比如编码解码等,Netty 还提供了非常重要的一 ...
区块链学习笔记16——ETH交易树和收据树
区块链学习笔记16--ETH交易树和收据树学习视频:北京大学肖臻老师<区块链技术与应用> 笔记参考:北京大学肖臻老师<区块链技术与应用>公开课系列笔记--目录导航页交易树和 ...

HTML学习笔记16——尺寸的表示_px、%、em三种

HTML学习笔记16——尺寸的表示_px、%、em三种相关推荐

最新文章

热门文章