CSS之EM相对单位
之前以为em单位只是在font-size中起到继承作用,
后来慢慢觉得,继承,应该是在几乎所有样式中都可以是实现的,比如height,width,border...
今天才简单测试了下,果真是可以实现,不过,只是要基于font-size的一并出现而已!
也就是说,想height等样式也应用上em的继承相对大小,必须在父节点中应用font-size的值!
代码片段如下:(可把emDiv类中的font-size注释来对比看看效果...)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css测试</title>
<style>
.emDiv {
font-size: 2em;
height: 2em;
}
.heightEmDiv1, .heightEmDiv2 {
width: 6em;
border-width: 0.2em;
border-style: solid;
}
.heightEmDiv1 {
font-size: 2em;
height: 4em;
border-color: red;
}
.heightEmDiv2 {
font-size: 2em;
height: 4em;
border-color: blue;
}
</style>
</head>
<body>
<div class="emDiv">
<div class="heightEmDiv1">
111
<div class="heightEmDiv2">
222
</div>
</div>
</div>
</body>
</html>
CSS之EM相对单位的更多相关文章
- [css] px em rem
一.区别 px是相对于显示器屏幕分辨率而言的. em相对于浏览器的默认字体尺寸. rem相对于HTML根元素. 二.使用 1.em 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: ...
- CSS中em,rem的区别
首先这两个单位一般用在移动端 不太清楚得求证 再记录 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字 ...
- 谈谈CSS中em与px的差异
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...
- CSS中em,px区别(转)
这里向大家描述一下CSS中px和em的特点和区别,px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的,而em是相对长度单位,相对于当前对象内文本的字体尺寸,相信本文介绍一定会 ...
- css中em小于1时chrome字体大小和firefox字体大小不一致的问题
css中em设置为0.8,结果页面显示,chrome字体比firefox字体大了不少. chrome有默认字体大小,默认为12px.设置的字体大小小于12px时,也是按照12px来显示. firefo ...
- 使用em为单位制作两列弹性布局
一.DIV布局按照定位的方法分为:浮动方法(float),坐标定位方法(position),还有就是两者相结合的方法. 二.DIV布局按照定义单位的不同可分为:固定宽度布局.流体布局.弹性布局和混合布 ...
- mobile css & rem & em & px
mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...
- css中em与px
Px是绝对定位 em是相对定位 1. em的值并不是固定的: 2. em会继承父级元素的字体大小. em应用: 1. body选择器中声明Font-size=62.5%:(注:在ie中把body选 ...
- CSS尺寸和字体单位-em、px还是%
在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明,重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置, ...
随机推荐
- 【BZOJ4542】[Hnoi2016]大数 莫队
[BZOJ4542][Hnoi2016]大数 Description 小 B 有一个很大的数 S,长度达到了 N 位:这个数可以看成是一个串,它可能有前导 0,例如00009312345.小B还有一个 ...
- Asp.Net MVC3中如何进行单元测试?
下面我们就以一个示例演示一下如何进行单元测试? public Model.UserInfo UpdateEntity(Model.UserInfo entity) { db.UserInfo.Atta ...
- java拾遗3----XML解析(三) StAX PULL解析
使用PULL方式解析XML: Pull是STAX的一个实现 StAX是The Streaming API for XML的缩写,一种利用拉模式解析(pull-parsing)XML文档的API StA ...
- The space of such functions is known as a reproducing kernel Hilbert space.
Reproducing kernel Hilbert space Mapping the points to a higher dimensional feature space http://www ...
- 【python】-- 初识python
Python 安装 windows: 1.下载安装包 https://www.python.org/downloads/ 2.安装 默认安装路径:C:\python27 3.配置环境变量 [右键计算机 ...
- vue介绍和简单使用
Vue是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易 ...
- python数据分析之:数据聚合与分组运算
在数据库中,我们可以对数据进行分类,聚合运算.例如groupby操作.在pandas中同样也有类似的功能.通过这些聚合,分组操作,我们可以很容易的对数据进行转换,清洗,运算.比如如下图,首先通过不同的 ...
- Ubuntu安装SSH + Windows上配置Putty
1. Ubuntu安装SSH 命令: # sudo apt-get install openssh-server 2. 启动SSH Server 命令: # sudo /etc/init.d/ssh ...
- Please enable network time synchronisation in system settings
eth区块同步出现这样的WARN: WARN [06-17|13:02:42] System clock seems off by -51.509894715s, which can prevent ...
- 删除power by dedecms的方法
在include/dedesql.class.php文件,会发现最新的include/dedesql.class.php文件会多出第588到第592行的那几段代码,代码如下图: $arrs1 = ar ...