css中em与px
Px是绝对定位 em是相对定位
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
em应用:
1. body选择器中声明Font-size=62.5%;(注:在ie中把body选择器中声明Font-size=63%)
2. 将你的原来的px数值除以10,然后换上em作为单位;
简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。(欢迎提出不同意见(*^__^*) 嘻嘻……)
css中em与px的更多相关文章
- CSS中em,px区别(转)
这里向大家描述一下CSS中px和em的特点和区别,px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的,而em是相对长度单位,相对于当前对象内文本的字体尺寸,相信本文介绍一定会 ...
- 谈谈CSS中em与px的差异
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...
- css中em小于1时chrome字体大小和firefox字体大小不一致的问题
css中em设置为0.8,结果页面显示,chrome字体比firefox字体大了不少. chrome有默认字体大小,默认为12px.设置的字体大小小于12px时,也是按照12px来显示. firefo ...
- CSS中的 REM PX EM
px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的 em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. ...
- 说说css中pt、px、em、rem都扮演了什么角色
前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...
- CSS中的单位px、em、rem、%、vw、vh、vm
px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...
- css中pt、px、em、ex、in等这类长度单位详细说明
在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位.它们各是什么意思,有什么区别呢? 在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt ...
- 关于CSS中的单位px、em、rem
首先,px.em.rem都是相对单位: px(pixel像素)是相对于显示器屏幕分辨率的,IE无法调整那些使用px作为单位的字体大小: em是相对于当前对象内文本字体的尺寸,如当前对行内文本的字体尺寸 ...
- html中em和px
px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸 ...
随机推荐
- 通过WebService跨平台上传大文件到服务器
好长时间没写博客了,对最近工作中遇到的大文件上传和下载的代码贴出来和大家分享一下. 大文件的上传的和下载是C++的平台通过调用WebService实现文件上传和下载到服务器 /// <summa ...
- aspx后台生成json对象
json对象应用很广,有时,我们要把一些数据转化为json对象,就需要用到以下方法了. 1.使用Newtonsoft.Json.DLL (推荐使用) 下载地址:http://files.cnblogs ...
- How to recover a skipped tablespace after an incomplete recovery with resetlogs? [ID 1561645.1]
n this Document Goal Solution This document is being delivered to you via Oracle Support's Rapid ...
- ios消息的交互方式
注意这些都是界面回传(即从第二个界面传到第一个界面,从第一个界面传到第二个界面的时候用第二个界面的属性即可) iOS消息的交互方式有4种,分别为:通知,代理,block,kvo 现在我们对这个4中 ...
- mysql数据库sql优化
此文章为转载 一. 前提 这里的原则 只是针对mysql数据库,其他的数据库 某些是殊途同归,某些还是存在差异.我总结的也是mysql普遍的规则,对于某些特殊情况得特殊对待.在构造sql语句的时候养成 ...
- codevs1304 拓扑序计数
题目描述 Description 求一颗有根树/树形图的拓扑序个数. 输入描述 Input Description ...
- HOOK钩子 - 钩子函数说明
翻译参考自MaybeHelios的blog: http://blog.csdn.net/maybehelios/ 通过SetWindowsHookEx方法安装钩子,该函数指定处理拦截消息的钩子函数(回 ...
- json对象和json字符串转换方法
在WEB数据传输过程中,json是以文本,即字符串的轻量级形式传递的,而客户端一般用JS操作的是接收到的JSON对象,所以,JSON对象和JSON字符串之间的相互转换.JSON数据的解析是关键. 先明 ...
- css reset 以及哪些元素有默认margin padding值
很多网站在css reset 的时候有如下做法: body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, label, dl, dt, dd,fields ...
- PHP Version之PHP5.2.x到5.3.x
不向下兼容的变化 1. 在5.3的所有绑定扩展中应用了新的内部参数解析API,当给函数传递不兼容的参数时将返回NULL,但有些例外,比如函数get_class()在出现错误时返回FALSE 2. ...