在前端开发工作过程中曾碰到这样一问题:

<style type="text/css">
.parent{ width:400px; height:300px; border:1px solid #ccc; }
.child{ margin:10%; background-color: red; }
</style>
<div class="parent">
<div class="child"></div>
</div>

问这类名为child元素在网页中显示的高宽?

答案:width:320px;height:160px;

如果您的答案正确,那说明您CSS功底比较强,如果您也不知所以然,希望这篇博文对您有所帮助

CSS中长度单位类型

css中长度单位有很多,可谓五花八门,但可分为这两类:

  1. 绝对长度单位

    彼此固定,不会因为其他元素的尺寸变化而变化。主要有cm mm Q in pc pt px
  2. 相对长度单位

    指定相对于另一长度的长度。主要有em ex ch rem %和可视区百分比长度单位 vm vh vmin vmax

由于各种单位比较多,我们这里只介绍常用的一些单位,其他单位的详细情况可查询W3C规范

px

px单位名称为像素,像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站。

像素单位的一个问题是在IE下无法用浏览器字体缩放的功能(影响不是很大)。

%

百分比是一个相对长度单位,相对于包含块(containing block)的高宽或字体大小。

关于包含块(containing block)的概念,不能简单地理解成是父元素。

如果是静态定位和相对定位,包含块一般就是其父元素。

如果是绝对定位的元素,包含块应该是离它最近的 position为非static属性的祖先元素。

如果是固定定位的元素,它的包含块是视口(viewport)。

具体可以参考 W3Help

在使用百分比单位的时候,最让人困惑的就是不清楚它到底是相对于谁计算的,下面将详细介绍列出

  • 相对于包含块的宽度

    left、right、

    width、max-width、min-width、

    margin、padding、

    text-indent;

  • 相对于包含块的高度

    top、 bottom、

    height、 max-height、 min-height;

  • 相对于自身的高宽

    border-radius、background-size、transform: translate()、transform-origin、zoom(css3缩放)、clip-path

  • 相对于自身的字体大小

    line-height

  • 相对于自身的行高(不常用)

    vertical-align

  • 相对于继承字体大小

    font-size

  • 特殊对象

    • 背景定位中的百分比 background-position 分别设置水平方向和垂直方向上的两个值,如果使用百分比,那么百分比值会同时应用于元素和图像。例如 50% 50% 会把图片的(50%, 50%)这一点与框的(50%, 50%)处对齐,相当于设置了 center center。同理 0% 0% 相当于 left top,100% 100% 相当于 right bottom。
    • filter(css3滤镜,不常用) filter: none | blur(%) | brightness(%) | contrast(%) | drop-shadow(%) | grayscale(%) | hue-rotate(%) | invert(%) | opacity(%) | saturate(%) | sepia(%) | url(%);
百分比的继承

如果某个元素设置了百分比的属性,则后代元素继承的是计算后的值。例如:

p { font-size: 10px;line-height: 120%; }

那么p的子元素继承到的值是 line-height: 12px,而不是 line-height: 120%。

em

em是相对字体长度单位。如果用于font-size属性本身,则是相对于父元素的font-size。若用于其他属性(width,height),则是相对于本身元素的font-size。国外使用比较多;

em单位有如下特点:

  1. em的值并不是固定的;
  2. em会继承父级元素的字体大小。

我们知道任意浏览器的默认字体大小都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

em是继承父元素的字体大小,可是当父元素字体大小改变时,又得重新计算了,这不怎么方便,还好rem解决了这个问题

rem

rem是CSS3新增的一个相对字体长度单位,只相对根元素即html元素字体大小

所以我们只要在html标签上设置字体大小为标准,文档中的字体大小都会以此为参照

html{font-size:62.5%; }
body{font-size:12px;font-size:1.2rem ;}
p{font-size:14px;font-size:1.4rem;}

兼容性:

IE 9 & IE 10 do not support rem units when used in the font shorthand property (the entire declaration is ignored) or when used on pseudo elements.

IE9/10中font缩写和伪元素中不支持rem单位

IE9/10部分支持,IE11+、Firefox、Chrome、Safari、Opera 的主流版本都支持,为了兼容不支持 rem 的浏览器,我们需要在 rem 前面写上对应的 px 值,这样不支持的浏览器可以优雅降级。

vm vh vmin vmax

响应式布局的实现依靠媒体查询( Media Queries )来实现,选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配,但这样做会比较麻烦,只能在选取的几个主流设备尺寸下呈现完美适配。CSS3中引入一种新的办法去真正地适配所有设备尺寸。

视口单位

视口在桌面端,指的是浏览器的可视区域;而在移动端较为复杂,它涉及到三个视口:分别是 Layout Viewport(布局视口)、 Visual Viewport(视觉视口)、Ideal Viewport。

视口单位中的“视口”,在桌面端,毫无疑问指的就是浏览器的可视区域;但是在移动端,它指的则是Layout Viewport(布局视口) 。

根据CSS3规范,视口单位主要包括以下4个:

  • vw : 1vw 等于视口宽度的1%
  • vh : 1vh 等于视口高度的1%
  • vmin : 选取 vw 和 vh 中最小的那个
  • vmax : 选取 vw 和 vh 中最大的那个
兼容性

在PC端用的很少,主要在移动端

在移动端 ios 8 以上以及 Android 4.4 以上获得支持,并且在微信 x5 内核中也得到完美的全面支持。

搭配vw和rem,布局更优化
  • 给根元素大小设置随着视口变化而变化的 vw 单位,这样就可以实现动态改变其大小。
  • 限制根元素字体大小的最大最小值,配合 body 加上最大宽度和最小宽度

个人总结

在一般的PC端网页制作过程中,一般直接用px为单位,在移动端由于vw,vh单位的兼容性,目前一般采用rem + %或者rem + vw/vh。

参考文章

CSS Values and Units Module Level 3

KB008: 包含块( Containing block )

css样式的百分比都相对于谁?

CSS参考手册

纯CSS3使用vw和vh视口单位实现自适应

CSS中各种长度单位总结的更多相关文章

  1. 深入理解CSS中的长度单位

    前面的话 本文分为绝对长度单位和相对长度单位来介绍CSS中的长度单位的主要知识 绝对长度单位 绝对长度单位代表一个物理测量 像素px(pixels) 在web上,像素px是典型的度量单位,很多其他长度 ...

  2. CSS中的长度单位及颜色表示

       CSS中的长度单位及颜色表示 长度单位: px:像素,绝对单位 em:相对单位,如果用于font-size属性本身,则是相对于父元素的font-size.若用于其他属性(width,height ...

  3. [翻译]解读CSS中的长度单位

    测量,在WEB设计上是非常重要的.在CSS中有至少10种不同的测量单位.每种单位都有其独特的作用,使用它们,可以使页面,在各种设备上,很好的工作.一旦你熟悉了所有这些单位,你可以更准确地设定元素的大小 ...

  4. 简要的谈一谈我对CSS中长度单位的理解

    CSS中的长度单位目前分为两种,分别是绝对长度和相对长度.绝对长度单位包括: in:英寸 cm:厘米 mm:毫米 pt:磅(1磅等于1/72英寸) pc:pica(1pica等于12磅) 以上五个就是 ...

  5. CSS 中的rem,em,vh,vw一次说清楚

    关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...

  6. CSS中表示大小的单位

    以下是DIVCSS5为大家总结网页中常见html单位介绍,在css+div布局中长度单位介绍篇. 其实css中的长度单位一共有8个,分别是px,em,pt,ex,pc,in,mm,cm: px:像素( ...

  7. CSS中rem、em的区别

    引用文档:http://www.divcss5.com/html/h529.shtml:http://blog.csdn.net/qq_35432904/article/details/5180422 ...

  8. CSS中常见的长度单位

    原文地址:https://segmentfault.com/a/1190000008934791?utm_source=tuicool&utm_medium=referral px - 像素 ...

  9. css中pt、px、em、ex、in等这类长度单位详细说明

    在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位.它们各是什么意思,有什么区别呢? 在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt ...

随机推荐

  1. Spring 源码分析之 bean 依赖注入原理(注入属性)

         最近在研究Spring bean 生命周期相关知识点以及源码,所以打算写一篇 Spring bean生命周期相关的文章,但是整理过程中发现涉及的点太多而且又很复杂,很难在一篇文章中把Spri ...

  2. Linux入门搭建可视化桌面环境小合集virtual box centOS7.10

    常用命令: 关联主机与虚拟机(方便文件共享): # sudo mount -t vboxsf share(主机文件夹名) /usr/share(虚拟机内自创) Linux shell进入root模式: ...

  3. springboot属性注入转化为对象

    第一种方式:用spel表达式解析 @Value("#{ T(com.alibaba.fastjson.JSON).parseObject('${train.purchase}')}" ...

  4. Shell脚本 | 性能测试之内存

    性能测试中,内存是一个不可或缺的方面.比如说在跑 Monkey 的过程中,如何准确持续的获取到内存数据就显得尤为重要. 今天分享一个脚本,可以在给定时间内持续监控内存,最后输出成一份 CSV 文件,通 ...

  5. Spring Boot + Spring Cloud 构建微服务系统(八):分布式链路追踪(Sleuth、Zipkin)

    技术背景 在微服务架构中,随着业务发展,系统拆分导致系统调用链路愈发复杂,一个看似简单的前端请求可能最终需要调用很多次后端服务才能完成,那么当整个请求出现问题时,我们很难得知到底是哪个服务出了问题导致 ...

  6. [深度学习]CNN--卷积神经网络中用1*1 卷积有什么作用

    1*1卷积过滤器 和正常的过滤器一样,唯一不同的是它的大小是1*1,没有考虑在前一层局部信息之间的关系.最早出现在 Network In Network的论文中 ,使用1*1卷积是想加深加宽网络结构 ...

  7. AOP技术基础(转)

    1.引言 2.AOP技术基础 3.Java平台AOP技术研究 4..Net平台AOP技术研究 2.1 AOP技术起源 AOP技术的诞生并不算晚,早在1990年开始,来自Xerox Palo Alto ...

  8. mybatis mapper xml文件的导入方式和查询方式

    mybatis mapper xml文件的导入方式和查询方式 ssm框架 Mybatis  mapper与SQLSession的关系 每个基于MyBatis的应用都是以一个SqlSessionFact ...

  9. css布局------左右宽度固定,中间宽度自适应容器

    HTML /*适用方法1,方法2*/<body> <div class="container"> <div class="left" ...

  10. 浩顺考勤机二次开发(第二版,附实测可用的demo)

    1.背景 之前写过一次浩顺考勤机的二次开发,不过那个版本还是有一些问题,后来更换了新的考勤机,又拿到了新的二次开发包,所以就有了这次这个版本 2.关于考勤机的一些说明 2.1 首先要给考勤机设定ip, ...