因此，作为网页设计师和前端开发人员，我们别无选择，必须熟悉我们手上的工具，做到知己知彼，这样才能百战不殆。为了帮助大家更好的工作小编今天为大家分享一些css的长度单位，希望能够对小伙伴们有所帮助。
1、rem
我们首先介绍下和我们熟悉的很相似的货。em
被定义为相对于当前对象内文本的字体大小。炒个栗子，如果你给body小哥设置了font-size字体大小，那么body小哥的任何子元素的1em就是等于body设置的font-size。
Test
body{
font-size:14px
}
div{
font-size:1.2em
//calculatedat14px
*1.2,or16.8px
}
你看，这里div这娃的字体大小是1.2em。解释来说，就是他从body爹爹那里继承的字体大小(这里是14px)的1.2倍，结果就是16.8px。
但是，如果你用em一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢?在下面这一小段代码里我们应用了和上面一样一样的CSS，每一个div都从它上一级父元素继承了字体大小，并且逐渐得增加。
Test
Test
Test
虽然在某些地方这正是我们想要的，但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时候嘛，我们就可以使用rem
了。‘r’是“root”的缩写，意思就是1rem等于根元素的字体大小大部分情况下，根元素就是元素了。
html{
font-size:14px
}div{
font-size:1.2rem
}
这样在上面的那三个嵌套的div娃们的字体大小都是1.2*14px=16.8px了。
2、适用于网格布局
Rems
不仅仅只是在设置字体大小上很方便。再炒个栗子，你可以用基于html根元素字体大小的rem作为整个网格布局或者UI库的大小单位，然后在其他特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性，
.container{
width:70rem
//70*14px=980px}
概念上来说，这个方法的思想就是让你的界面根据你的内容进行缩放。但是，这样做并不是对所有的情况都有意义。
3、vhandvw
响应式Web设计离不开百分比。但是，CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度，而不是父元素的，那该肿么办?这就是
vh和vw单位为我们提供的。
1vh等于1/100的视口高度。栗子：浏览器高度900px,1vh=900px/100=9px。同理，如果视口宽度未750，1vw
=750px/100=7.5px。
可以想象到的，他们有很多很多的用途。比如，我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。
.slide{
height:100vh
}
假设你要来一个和屏幕同宽的标题，你只要设置这个标题的font-size的单位为vm，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果，有木有?!
4、vminandvmax
vh和vm依据于视口的高度和宽度，相对的，vmin和
vmax则关于视口高度和宽度两者的最小或者最大值。比如，浏览器的宽度设置为1100px，高度设置为700px，1vmin=1px，1vmax=
11px。
如果宽度设置为800px,高度设置为1080px,1vmin就等于8px,1vmax则未10.8px。
那么问题来了，我们应该在什么场景下使用这两个单位呢?
假设有一个元素，你需要让它始终在屏幕上可见。
只要对其高度和宽度使用vmin单位，并赋予其低于100的值就可以做到了。再来个栗子，可以这样定义一个至少有两个边触摸到屏幕的方形：
.box{
height:100vmin
width:100vmin
如果你要让这个方形框框始终铺满整个视口的可见区域(四边始终触摸到屏幕的四边)
.box{
height:100vmax
width:100vmax
}
结合使用这些单位可以为我们提供一个新颖有意思的方式来灵活地利用我们视口的大小。
5、exandch
ex和ch单位，类似于em和rem,依赖于当前的字体和字体大小。但是，不同的是，这两货是基于字体的度量单位，依赖于设定的字体。
ch单位通常被定义为数字0的宽度。你可以在Eric
Meyers的博客里找到关于它的一些有意思的讨论，例如将一个等宽字体的字母”N”的宽度设置为40ch，那么在另一种类型的字体里它却可以包含40个字母。
这个单位的传统用途主要是盲文的排版，但是除此之外，肯定还有可以应用他的地方。
ex定义为当前字体的小写x字母的高度或者1/2的1em。很多时候，它是字体的中间标志。
x-heighttheheightofthelowercasex
这些单位有很多用途，大部分用于版式的微调。比方说，sup元素(上角文字标)，可以通过position:relativebottom:1ex实现
。
类似的方法，你可以实现一个下角文字标。浏览器默认的方式是利用
上标和下标特定垂直对齐规则，但是如果你想更细粒度更精确得控制，你可以像下面这样做：
sup{
position:relative
bottom:1ex
}
sub{
position:relative
bottom:-1ex
}
结论
持续关注不断发展壮大的CSS技术无疑是很重要的，这样你才能掌握你所持有的工具的全部技能。说不定将来你遇到的某个特殊的问题就需要使用这些复杂的单位来解决。
以上就是小编今天为大家分享的额关于Web前端新手应该知道的CSS长度单位的文章，希望本篇文章能够对正在从事web前端工作和喜欢web前端技术的小伙伴们有所帮助。想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！
译自：codecademy
以px为单位的尺寸是 exact dimensions。例如，若你设定一个div为500px宽，100px高，当屏幕尺寸改变时，它肯能会显得太小，或溢出屏幕，进而难以阅读。故px也被称为hard coded measurements。
为避免它，你可以使用 relative measurements 来代替。 Relative measurements 可以使得 the proportions of a website to remain intact regardless of screen size or layout.
其中一个可以创造relatively-sized content的单位是em，它表示base font的大小。
例如，通常浏览器的默认base font是16px，故1em=16px，2em=32px，以此类推。
上例中，没有指定base font是多大，因此heading elements 的大小将以浏览器默认大小为基准。如果the default font size is 16 pixels, then the font size of the heading element will be 32 pixels.
上例展示了使用em时，如何摆脱浏览器默认值（16px/em)。在 splash-section element 内，所有文本内容的base font 被设为18px。
在下一条CSS语句中，all h1 elements inside of splash-section 将以 the base font of splash-section (18 pixels)为基准来设定大小。故 h1 elements 是27px。
CSS中第二个 relative unit of measurement 是rem。
Rem stands for root em . It acts similar to em, but instead of checking parent elements to size font, it checks the root element . The root element is the <html> tag.
大多数浏览器的把<html>的font size设为 16px ，故默认情况下，1rem=16px。若需设置a different font size for the root element, you can add a CSS rule.
上例中， the font size of the root element, <html>, is set to 20 pixels . All subsequent rem measurements will now be compared to that value and the size of h1 elements in the example will be 40 pixels .
One advantage of using rems is that all elements are compared to the same font size value, making it easy to predict how large or small font will appear. If you are interested in sizing elements consistently across an entire website , the rem measurement is the best unit for the job. If you’re interested in sizing elements in comparison to other elements nearby , then the em unit would be better suited for the job.
使用rems的优势是all elements的字体大小都基于同一个font size value（默认是16px）。如果你需要统一调整网页上所有elements的大小，rem是最好的选择如果你只需统一调整某一parent element的内的所有子元素的大小，则em更合适。
To size non-text HTML elements relative to their parent elements on the page you can use percentages .
Percentages are often used to size box-model values, like width and height, padding, border, and margins. They can also be used to set positioning properties (top, bottom, left, right).
上例中，.main and .subsection 代表两个divs，后者被嵌套在前者内。The parent div (.main)已被设定了固定的尺寸，故当使用 percentages 时，将以父元素设定的尺寸为基准进行百分换算。Therefore, the dimensions of the .subsection div will be 150 pixels tall and 250 pixels wide .
当父元素没被设定尺寸时，子元素使用percentages将会出错。
Note: Because the box model includes padding, borders, and margins, setting an element’s width to 100% may cause content to overflow its parent container. While tempting, 100% should only be used when content will not have padding, border, or margin.
Percentages 也可以用来设定 the padding and margin of elements.
当我们用 percentages 来设定 height and width 时， you learned that the dimensions of child elements are calculated based on the dimensions of the parent element.
而当使用 percentages 来设定 padding and margin 时，其基准 based only on the width of the parent element.
例如，假设 margin-left 属性被设为a percentage ，如：50%，则该元素将向右移动至 其父级元素内 中间处。
Vertical padding and margin 若被设为 percentages 也是依据 the width of the parent. 为什么？想象以下场景：
在以上场景中，父级元素若未被设定height，子元素高度变化时其高度也必然改变。这也是为什么 vertical padding and margin 仍基于 the width of the parent,而非其height。
Note: When using relative sizing, ems and rems should be used to size text and dimensions on the page related to text size (i.e. padding around text). This creates a consistent layout based on text size. Otherwise, percentages should be used.
当使用相对尺寸（relative sizing）时， ems and rems 应被用于设定文字的大小，或页面上有关文字的一些尺寸（如文字周围的padding），这使得有关文字尺寸的布局具有一致性。否则，应使用percentages。
尽管 relative measurements 在不同屏幕尺寸下提供了 consistent layouts ，但视窗太小或太大时，网页 elements 也会丢失其完整性（integrity）。你可以通过一下两个属性限制 elements 的 width。
上例中，当视窗大小改变时，p元素的width不会小于300px，且不会大于600px。
在浏览器视窗改变时，这两个properties保证了 text 的可读性，否则text会变得either very compressed or very spread out。
你也可以限制一个元素的最大/最小高度。
如果一个元素的 max-height property 设置得过小，则其content 将会溢出，溢出部分将不可见。
很多网站都会包含images and videos，为保证其易读性，以原比例显示它们尤为重要。
上例中，.container 代表 a container div。其 width 被设为50%（浏览器width的一半），height为200px。overflow 被设为 hidden 使得任何超出此 container 范围的 content 不可见。
第二个CSS规则使得 images scale（改变大小） with the width of the container . The height property is set to auto, meaning an image’s height will automatically scale proportionally with the width. Finally, the last line will display images as block level elements (rather than inline-block, their default state). This will prevent images from attempting to align（排成一行） with other content on the page (like text), which can add unintended margin to the images.
上例值得记住，因为它代表了一种等比例排布images and videos 的设计样式。
上例中，an image (or video)的 width 被改变至等同于 the width of a container。如果image大于container，image 纵向超出的部分将会 overflow 且不展示。为避免这种情况，你可以设置 max-height to 100% and width to auto （本质上是属性的对调）。这将使 image 的height 等于container 的 height。如果image大于container，横向超出部分将会 overflow 且不展示。
背景图片也可以改变大小。
上例中，第一行表示设置了背景图（# 是代表 an image URL 的一个占位符）。第二行表示图片不repreat（默认是repeat）。第三行使得图片在 element 内居中。
第四行是上例的核心，它定义了如何改变背景图的大小。图片将 cover the entire background of the element， all while keeping the image in proportion. 如果图片尺寸超出container的尺寸，则将只展示图片的一部分。
Content on a website can be sized relative to other elements on the page using relative measurements .
The unit of em sizes font relative to the font size of a parent element .
The unit of rem sizes font relative to the font size of a root element. That root element is the <html> element .
Percentages are commonly used to size box-model features, like the width, height, padding, or margin of an element.
When percentages are used to size width and height, child elements will be sized relative to the dimensions of their parent (remember that parent dimensions must first be set).
Percentages can be used to set padding and margin. Horizontal and vertical padding and margin are set relative to the width of a parent element.
The minimum and maximum width of elements can be set using min-width and max-width.
The minimum and maximum height of elements can be set using min-height and max-height.
When the height of an image or video is set, then its width can be set to auto so that the media scales proportionally. Reversing these two properties and values will also achieve the same result.
A background image of an HTML element will scale proportionally when its background-size property is set to cover .
最常用的dreamweavreMS的=front page
其实，任何文本工具（笔记本之类）都可以做网页
关键是看你的代码，HTML\CSS\JSSCRIT的运用
![[CSS] svg路径动画](/aiimages/%5BCSS%5D+svg%E8%B7%AF%E5%BE%84%E5%8A%A8%E7%94%BB.png)
