HTML，全称超文本标记语言（Hypertext Markup Language），是一种用于创建网页的标准标记语言。HTML为网页提供了一种结构性的标记方式，使得浏览器可以正确地解析和显示网页内容。
vw与vh不能混用。因为vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形
一款简约的基于原生 Javascript 的消息提示插件 VH-Toast。比如，vh.default，vh.info 等，默认为default。此时正文内容以message的值传入。同时，我们可传入 vhHtml 来支持 HTML标签 的显示。
因为CSS里部分属性是继承父级而来的，height就是其中之一，当前html标签height为0，自然而然body100%也为0。
Base.css * { margin: 0px; padding: 0px; box-sizing: border-box; } ul { list-style: none; } .col-1 { width: 8.33%; float: left; } .col-2 { width: 16.66%; float: left; } .col-3 { width: 25%;
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
1、将整个HTML浏览器的宽度设为单位1，那么为了操作栅格化方便，我们拆分为12等分。
很久没有做过移动端的项目了，关于移动端的自适应，最早之前用rem，我个人觉得效果很不错。忘记是哪个大神的文章提到过，lib-flexible有一些问题，建议使用viewport，今天使用一下viewport。
如果有一个文本和一个按钮，我们想让文本粘在上面，而按钮粘在下面！使用CSS Flex 似乎很容易做到。
而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
https://blog.wenwuhulian.com/zb_users/upload/2021/01/202101241611473765588139.html
本练习训练了孩子们的栅格化布局，H5标签，CSS样式，并对列表与菜单进行了强化训练。使孩子们更好的掌握H5布局，为后面的框架教学打好基础。
HTML5——周技能检测——菜单编辑——2022年11月22日（考完） 一、语言和环境 1. 实现语言：HTML5。 2. 开发环境：VScode。 二、要求 1、完成下列菜单显示效果。 2、添加【:hover】选择器，鼠标悬停在文字上方时文字加粗。 参考图如下所示： 三、推荐实现步骤 （1）创建宽度为【100%】，高度为【5vh】的【div】容器。 （2）通过ul与li的方式创建一个菜单列表，li的数量为8。 （3）添加外层div的背景颜色为【skyblue】。 （4）添加li的文本格式为：宽度【12
例：html中字体尺寸为 20px，盒子宽度为 5rem，则最后显示的盒子宽度为 100px。
微信小程序里面的height和width有几种单位，分别是 rpx px vh 和 vw。
例如我现在利用 vw 和 vh 单位设置一个 div 元素的宽高，然后我们来看看在移动开发中旋转和不旋转的展示效果。
CSS中的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度，你可以设置高度:100vh，这样你就有了一个完美的全屏元素，它会随着视口的改变而改变大小!遗憾的是，事实并非如此。100vh在不同的浏览器的实现方式上也有一点微妙的变化，这使得它几乎毫无用处。最好避免100vh，而是依赖javascript来设置高度，以获得完整的视口体验。
将picture元素和srcset,sizes属性纳入html5规范，新规范意在解决：
在 CSS 中，使用渐变色需要用到 gradient 属性，而 gradient 属性分为 线性渐变 linear-gradient 与 径向渐变 radial-gradient。
把公共的 页头 、页脚、导航栏、边框 放到最顶层，比方说设置层级为 999，其他每个独立页则放在下面，然后切换页面的时候更新独立页的层级以达到效果图的效果（当然不能超过最顶层）。
css3提供了一些与当前viewpoint相关的元素，vw，vh，vmin, vmax等。
1.编辑html.json文件 2.替换需要自动生成的代码 3.在新建的html中输入vh回车即可
元素的width/height/padding/margin用em的话是相对于该元素的font-size
CSS3中有两个新尺寸单位vw和vh， 这两个单位非常适合于开发移动端自适应页面。 假如说有一个设计师做了一张1136x750px的页面，这长页面是针对iPhone6的屏幕设计的。 前端开发工程师将这张设计稿转换成网页， 网页中所有的元素尺寸都用px硬编码， 那么这张网页在iPhone6中能跑的好好的，但是到了其他手机中会容易出问题， 毕竟很多手机的屏幕尺寸和iPhone6是不一样的。 vw和vh就是用来解决这个问题的。它们是一组相对尺寸单位，和百分比相似， 1vw和1vh其实和1%是一样的。换句话说， 不
container – > body – >html [他们的 height 元素都要设置为 100%]
网页框架结构布局，TOP部分占满网页宽度，内容的左右各有8.33%的留白
1、为了方便切换时进行高度操作，此次使用vh单位，100vh表示100%高度，1vh表示1%高度，相比px更方便自适应。
css中有几个不同的单位表示长度，使用时数字加单位。如果长度为0，则可以省略单位。
你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹。
最近在项目中遇到一个问题是一单元素设置了100vh那么使用第三方工具html2canvas进行画布截图时就会出现截图不全的现象。
注意： （1）字体的尺寸指的是什么？ 字体大小是指字在屏幕或印刷介质上表现出来的大小，将每个字看作方块，按方块的对角线长度计算大小。
和百分比有区别的,百分比是相对于父元素来说的,而vw和vh总是针对当前视口来说的.
我们对单位很熟悉，比如说，千克，千米，米等，这些就是绝对单位，我们又有听到太阳的质量等于33个地球，这个就是相对单位。在CSS中，单位也可以分为这两类。
很自然的利用100vh来控制最外层的高度，但测试过程中，发现safari浏览器中，页面的高度出现了偏差，比屏幕的高度还要高出一部分，出现了双层滚动条。
我的案例： 元素没有设置高度的时候， 我写移动端界面的时候用100vh会把屏幕撑大到需要滑动框，但是100%却不会。
首先在Admin tab选项中新建一个vh，这个Name需要在后期的代码配置中用到。
首先，我们在编辑器中，写上基础代码，当然要在 style 中加上一个 flex 类，用于 flex 布局的定义，这个是必然需要的，在此一定得加上。
我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊， 包括vw、vh等。所以打算写博客总结一下，以加深理解。
今天移动web开发学完了，整理一下思路，移动web首先学习的就是就是flex布局。记录一下flex布局和移动适配的一些知识。
目录 FPS 全称： 常规操作 使用【will-change: transform;】 FPS 全称： Frames per second，即 【每秒帧数】 的意思。 通常来讲，当动画的每秒帧数低于 12 （即 12 FPS 以下）时，我们的大脑就能快速从动画中区分出一些静止的图片，所以此时的动画并不是无缝动画。 一旦播放速率（每秒帧数）达到 16-24 FPS 时，大脑就会认为这些画面是连续移动的场景，看起来就是影片的效果了（大部分数字电影拍摄是每秒 24 帧）。 所以，我们可以大致了解到：FPS 越
首先在前端开发中，会遇到各种不同类型的长度单位，而整体的长度单位分为两大类：绝对长度和相对单位。
不过“我看见你”和“我触碰你”是不一样的。正好，机缘巧合，最近又与这两个单位想见。大致琢磨了下，貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局。想到这里，自己不由得小兴奋了下，于是决定抽时间研究研究（虽然最近整iPad忙得屁股尿流~~）。
巧用伪元素:before、:after等，让你的页面按钮眼前一亮。原文链接：8 amazing HTML button hover effects, that will make your website memorable。更多内容：github.com/reng99/blog…
在CSS中，视口单位（Viewport units）听起来不错。如果要设置一个元素的样式使它占据整个屏幕的高度，那么你可以设置height: 100vh，这样你就拥有一个完美的全屏元素，该元素会随着视口的变化而调整大小！可惜的是，事实并非如此。100vh在移动浏览器中以一种微妙但基本的方式被破坏，使其几乎无用。最好避免使用100vh，而应该通过javascript设置高度的方式来获得完整的视口体验。
首先父级元素必须有高度，没有高度就无法垂直居中，如果想全屏垂直居中，可以设置高度为100vh
今天改移动端页面样式的时候因为height:100vh，导致我想超出部分滚动页面的效果没有做出来。就查查这玩意是啥意思。
https://juejin.im/post/6861501624993447950
很明显，我们需要另一个元素来做一个从左到右的位移，所以我们加一个 span 标签。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
