----关于css中常见单位----
1.px
像素,绝对单位长度,可设定固定的长度大小。(像素是相对于显示器屏幕分辨率而言)
所有浏览器都显示为一样大小。
eg:
html:
<p>这是一段正常段落</p>
<p class="change">这是一个设置了大小为30像素大小的段落</p>
css:
p.change{font-size:30px}
效果如图:
2.em
值不固定,相对单位长度,会继承父级元素的字体大小。
em是以字为单位,1em是占一个字符的宽度,大小随着字符的字号而变化。
eg:
html:
<p>这是一段正常段落</p>
<p class="change">这是一个设置了大小为1.3em的段落</p>
css:
p.change {font-size:1.3em;}
效果如图:
3.rem
rem是CSS3新增的一个相对单位(root em,根em)
这个单位与em的区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
4.fr
剩余空间分配数
fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。
----关于css中常见单位----的更多相关文章
- css中关于单位的一些问题
Css中关于单位的一些问题 相对字体长度: Em:Em 是一个相对单位.起初排版度量时是基于当前字体大写字母”M”的尺寸的.当改变font-family时,它的尺寸不会发生改变,但在改变font-si ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- div+css中常见的浏览器兼容性处理-兼容不同浏览器
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...
- 一起来看看css中的单位
一起来看看css中的单位 由于一直以来对于css中的百分比单位究竟是相对于谁的比例,这个问题不是很了解,所以就专门找资料看了一下. <div class="container w500 ...
- css中常见几种float方式以及倒计时(刷新页面不清)
css中常见几种float方式 http://jingyan.baidu.com/article/72ee561a670269e16138dfd5.html <script type=" ...
- CSS中常见的布局
一.css中常见的布局有哪些? (1)两列布局 (2)三列布局 (3)弹性布局 (4)圣杯布局 (5)双飞翼布局 二.具体实现 (1)两列布局 https://www.cnblogs.com/qin ...
- CSS中的单位px、em、rem、%、vw、vh、vm
px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...
- CSS中常见的长度单位
原文地址:https://segmentfault.com/a/1190000008934791?utm_source=tuicool&utm_medium=referral px - 像素 ...
- 关于CSS中的单位px、em、rem
首先,px.em.rem都是相对单位: px(pixel像素)是相对于显示器屏幕分辨率的,IE无法调整那些使用px作为单位的字体大小: em是相对于当前对象内文本字体的尺寸,如当前对行内文本的字体尺寸 ...
随机推荐
- 测试技术/网游Bug分析/单机修改 视频教程
早期做的一些视频,测试技术/Bug讲解/单机修改,有兴趣的同学自行下载看吧 由于是早期录制的,有口误多包涵... 链接: http://pan.baidu.com/s/1i5JUKPf 密码: a1x ...
- commit lint规范化团队git提交信息
一.快速提交符号angular编码规范的提交信息 1.命令行中安装commitizen: npm install -g commitizen commitizen init cz-convention ...
- 如何从 VSS 迁移到Team Foundation Server
TFS 2012自带了vss upgrade wizard工具, 在Team Foundation Server管理控制台左侧的最后一个菜单其他工具和组件中,选择Visual SourceSafe升级 ...
- NodeJS对象数组Array 根据对象object key的值排序sort
有个js对象数组 var ary=[{id:1,name:”b”},{id:2,name:”b”}] 需求是根据name 或者 id的值来排序,这里有个风骚的函数. /** * 对数组中的对象,按对象 ...
- 解决Error:Could not determine the class-path for interface com.android.builder.model.AndroidProject.
见https://blog.csdn.net/qq_21397217/article/details/65630730博客
- public class PageRender implements ResponseRender
package cn.ubibi.jettyboot.demotest.controller.render; import cn.ubibi.jettyboot.framework.commons.S ...
- Inception-v3的设计思路小结
一.网络更深.更宽带来的问题 参数太多,若训练数据集有限,容易过拟合: 网络越大计算复杂度越大,难以应用:(内存和计算资源) 网络越深,梯度越往后穿越容易消失,难以优化模型. 解决: 如何减少参数(且 ...
- Go的CSP并发模型实现:M, P, G
最近抽空研究.整理了一下Golang调度机制,学习了其他大牛的文章.把自己的理解写下来.如有错误,请指正!!! golang的goroutine机制有点像线程池: 一.go 内部有三个对 ...
- Vue 目录结构 绑定数据 绑定属性 循环渲染数据
一.目录结构分析 node_modules 项目所需要的各种依赖 src 开发用的资源 assets 静态资源文件 App.vue 根组件 main.js 配置路由时会用 .babelrc 配置文件 ...
- 使用redis-cli --pipe快速插入数据
具体实现步骤如下:(参考http://www.cnblogs.com/ivictor/p/5446503.html) 1. 新建一个文本文件redis_commands.txt,包含redis命令 S ...