简要的谈一谈我对CSS中长度单位的理解
- in:英寸
- cm:厘米
- mm:毫米
- pt:磅(1磅等于1/72英寸)
- pc:pica(1pica等于12磅)
- em:与元素的字号挂钩(font-size)
- ex:与元素字体中字母“x”的实际高度挂钩(因为不同字体中x的高度是不同的,感觉是个好随意的单位,为什么不是其他字母呢0.0)
- rem:与根元素的字号挂钩(html元素是根元素)
- px:css像素(假定显示设备的分辨率为96dpi)
- %:另一属性值的百分比
1. em
em是参照元素的字号来设置自身值的一个相对长度单位,如下所示,我设置p元素的font-size属性值为14px,给p元素的height设置为4em,同时给line-height也设置为4em,这样可以让p元素的内容有一个上下居中的效果。
p{
background: gold;
color: #000000;
font-size: 14px;
height: 4em;
line-height: 4em;
}
<p>这是随便写的一句话</p>
效果如下所示:
2. rem(个人感觉这个值在响应式布局会很有用,目前用的不多,但将来应该会很热)
html{
font-size: 24px;
}
p{
background: gold;
color: #000000;
font-size: 1rem;
height: 4em;
line-height: 4em;
}
<p>这是随便写的一句话</p>
效果如下:
3. px
像素,这个单位在实际的开发中用的,见得非常多。虽然CSS标准中定义的px是一个相对长度单位,但因为定义的很奇葩(似乎是和读者的臂长还有关系,我猜这应该也是相对的一种吧:)),所以很多浏览器都把1px的长度定义为1英寸的1/96,大约是这样,所以本质上,px还是一个绝对长度单位。因为很常见,所以就不演示了。
4. %
简要的谈一谈我对CSS中长度单位的理解的更多相关文章
- 关于css中float的理解
感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看 ...
- css中line-height的理解_介绍line-height实际应用
一.line-height的定义 css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同.line-height只影响行内元素和其他行内内容,而不会直接影响块级元素,如果块 ...
- 关于css中浮动的理解及实际应用
一.元素浮动的意义及使用:1. 浮动的意义:设置了浮动属性的元素会脱离普通标准流的控制,移动到其父元素中指定的位置的过程,将块级元素放在一行,浮动会脱离标准流,不占位置,会影响标准流,浮动只有左右浮动 ...
- CSS中各种长度单位总结
在前端开发工作过程中曾碰到这样一问题: <style type="text/css"> .parent{ width:400px; height:300px; bord ...
- 浅谈css中的盒模型(框模型)
css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...
- [转载]来,让我们谈一谈Normalize.css
来源 : http://segmentfault.com/a/1190000002239676 ---------------------------------------------------- ...
- 来,让我们谈一谈Normalize.css
本文译自 http://nicolasgallagher.com/about-normalize-css/最初发布于我的博客:http://jerryzou.com/posts/aboutNormal ...
- 浅谈css中浮动和清除浮动带来的影响
有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...
- 来,让我们谈一谈 Normalize.css
Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的CSS reset,Normalize.css是一种现代的.为HTML5准备 ...
随机推荐
- 【Hadoop系列】linux SSH原理解析
本文中斜体加粗代表shell指令,操作环境 CentOS6.5 linux root免密码登录链接:[Hadoop系列]linux下 root用户免密码登录远程主机 ssh. linux 非root用 ...
- java读取txt文件,对字符串进行操作后导出txt文件
嘿嘿,代码略为简单,不再多做解释,直接上码! package org.lq.com.util; import java.io.File; import java.io.InputStreamReade ...
- java温故而知新(8)反射机制
一.什么是反射机制 简单的来说,反射机制指的是程序在运行时能够获取自身的信息.在java中,只要给定类的名字, 那么就可以通过反射机制来获得类的所有信息. 二.哪里用到反射机制 有些时候,我们用过 ...
- 工厂模式的C++、Java实现
1.工厂模式UML 图1. 工厂模式UML 2.C++实现 类视图如下: 图2. 工厂模式C++实现的类图 其中,Factory实现为: //工厂类. class Factory { public: ...
- csharp: Converting chinese character to Unicode
Function chinese2unicode(Str) Dim Str_one:Str_one = "" Dim Str_unicode:Str_unicode = " ...
- Csharp:WebClient and WebRequest use http download file
//Csharp:WebClient and WebRequest use http download file //20140318 塗聚文收錄 string filePath = "20 ...
- 排序算法Nb三人组-归并排序
归并排序只能对两个已经有序的列表进行合并排序,所以要我们自己创建出两个有序列表.最后在进行合并. def merge2list(li1, li2): li = [] i = 0 j = 0 while ...
- echarts 表格与 div 之间 空白的设置
一. options 图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项 {Object} grid 二. grid 直角坐标系内绘图网格 名称 默认值 描述 {number ...
- Android PopupWindow显示位置设置
当点击某个按钮并弹出PopupWindow时,PopupWindow左下角默认与按钮对齐,但是如果PopupWindow是下图的那样,会发 生错位的情况,尤其是不同尺寸的平板上,那错位错的不是一般的不 ...
- J2EE项目工具集(转)
1.支持重构,TDD, Debug J2EE应用和Flying Error提示的IDE a.重构:即使团队用的最多的只是Rename,Move,Extract Method等有限几个最基本的功能,但J ...