零基础教你学前端——25,颜色值与长度单位
绝对长度单位：是固定的长度单位，不会因其他因素而改变。常见的绝对长度单位有：cm：厘米mm：毫米in：英寸px：像素，是最常用的长度单位，尤其在网页设计中。相对长度单位：是相对于其他元素的长度来定义的。常见的相对长度单位有：百分比，是相对于父元素的长度。
根据每个人的不同，可能学习方法也会有所出路，找到适合你自己的学习法方法是学习的前提。
零基础学习web前端，主要有自学和报班学习两种方式。web前端作为互联网相关的重要岗位，许多互联网大厂（如阿里腾讯等）在招聘时会作出要求。学好web前端对于将来掌握前端后端开发、成为全栈架构师的学习很有帮助。
第三：货比三家，选出合适自己的培训班 很多培训班也会根据学员定位来开展自己的课程，例如有些班是要求具备一定的软件开发基础的，那么这类班级肯定是不合适零基础学员学习的，所以我们选择培训机构时，要根据自己的实际情况，合理选择。
零基础学前端的话，这些书籍资料可以参考一下：《JavaScript高级程序设计（第3版） 红皮书 》，适合有一定编程经验的Web应用开发人员阅读，也可作为高校及社会实用技术培训相关专业课程的教材。
web前端入门到实战:一次搞懂CSS字体单位:px、em、rem和%
CSS中px、em、rem和%字体单位的区别如下：px：性质：绝对单位。特点：保证精确度，适合对位置要求严格的排版。例如，设置字体大小为16px，将精确显示该大小。em：性质：相对单位。计算基础：基于父元素的px值计算。
px px是绝对单位，保证精确度，适合对位置要求严格的排版，如div元素的字体大小16px，将精确显示。 em em是相对单位，基于父元素的px值计算。例如，div设为2em，若根元素为16px，最内层的字体大小将是16 * 2^6 = 38px。
知识点：Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用html和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。
彻底弄懂css中单位px和em,rem的区别
1、px：绝对单位，页面按精确像素展示。em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。rem：相对单位，可理解为”root em”， 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
2、rem也是相对的文字尺寸，和em使用方法接近，不同的是他仅相对于root层级的文字大小（网页中的html）。以这个范例来说，此网站的文字大小是16px，rem的尺寸就是以16px为基准，故下方的1rem会与16px相同尺寸。
3、EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以body的“font-size”为基准。另外，em是相对于父元素的属性而计算的，如果想计算px和em之间的换算，输入数据就可以px和em相互计算。
CSS3新单位vw、vh、vmin、vmax使用详解
vw、vh、vmin、vmax这四类视窗单位用于替代像素值，可以应用于宽度、高度、内边距、字体大小等CSS属性。浏览器会根据视窗大小动态调整这些值，使得布局适应不同尺寸的屏幕。 基本说明：vw和vh相对的基准是浏览器视窗的宽度和高度，分别代表视窗宽度的百分比和视窗高度的百分比。
vmax：当前 vw 和 vh 中较大的一个值2，vw、vh 与 % 百分比的区别（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。（2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。
vw表示视口宽度，vh表示视口高度。它们允许创建响应式布局，适应屏幕大小变化。例如，100vw代表视口宽度的100%，而1vw则代表视口宽度的1%。 Vmin和Vmax单位 vmin和vmax分别基于视口宽度和高度的最小和最大值，用于创建适应不同屏幕尺寸的响应式设计。vmin和vmax的使用考虑屏幕是横屏还是竖屏。
相对单位包括em、rem、ex、ch、vw、vh、vmax和vmin。em单位基于父元素的字体大小进行计算，rem基于根元素的字体大小计算。ex和ch单位用于排版，而vw、vh、vmax和vmin单位则基于视窗尺寸，用于创建全视区界面。绝对单位包括px、pt、pc、cm、mm、in。
如何设置网页大小
在网页的右上方这里，点击“工具”，弹出下拉菜单。在下拉菜单中点“选项”，转到基本设置页面。在页面的左侧导航这里，点击“页面设置”。在右边这里展开页面设置相关的内容，把页面往下拉，拉到“字体大小”这里。然后，点选“跟随系统”；那么，重启浏览器后，再打开网友，字体就能恢复。
进入浏览器。在浏览器右上方工具栏中找到“查看”菜单。进入“查看”菜单，找到“页面缩放”选项。设置缩放比例（小于100%是缩小，大于100%是放大）。方法2 点击进入浏览器。在浏览器下方找到缩放选项。点击右下方的下拉菜单，就可以放大和缩小网页的页面大小了。
方法一：使用快捷键和鼠标滑轮调整 打开浏览器，并进入你想要访问的页面。 按住Ctrl键，然后滑动鼠标上的滑轮。 向上滑动鼠标滑轮可以放大页面。 向下滑动鼠标滑轮可以缩小页面。方法二：通过浏览器菜单调整缩放比例 点击浏览器右上角的菜单选项。 在菜单中找到并点击网页缩放选项。
H5中的长度单位vw和vh
1、在H5中，vw和vh是用于实现响应式设计的重要长度单位，它们分别代表视口宽度和视口高度的百分比。具体来说，vw单位表示视口宽度的百分比，而v代表viewport，w代表width。因此，1vw等同于视口宽度的1%，它将视口宽度划分为100等份，以此来实现基于屏幕尺寸的响应式布局。
2、在理解移动端H5适配之前，首先理解CSS中的尺寸单位至关重要。CSS的尺寸单位主要是相对长度单位，它们各自以不同的目标进行相对测量。例如，像素（px）相对于屏幕分辨率，而em、rem则是相对于字体大小。em在不同属性中的参照对象不同，而rem则是相对于HTML根元素的font-size。
3、我们知道， vh 、 vw 都是 CSS 中的一种相对长度单位， 1vh 表示 viewport 高度的 1%（ vm 同理）。简单来讲，viewport 基本上是指当前文档的可见部分，因此 100vh 表示可见文档的最大高度。
4、H5页面设计应遵循以下设计规范： 响应式设计 确保页面在不同设备上（如手机、平板、电脑）均能良好显示，使用百分比、视口单位（vw、vh）等布局方法，使页面元素适应不同屏幕尺寸。 视觉设计 色彩：选择合适的色彩搭配，保持整体风格一致，避免过于花哨。
5、vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）vh：视窗高度的百分比vmin：当前 vw 和 vh 中较小的一个值vmax：当前 vw 和 vh 中较大的一个值2，vw、vh 与 % 百分比的区别（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
