两者区别如下：（1）在渲染树中display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见...（2）是否是继承属性display:none是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；visibility:hidden是继承属性，子孙节点消失是由于继承了hidden...实现call、apply 及 bind 函数（1）call 函数的实现步骤：判断调用对象是否为函数，即使是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。...：判断调用对象是否为函数，即使是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。...：判断调用对象是否为函数，即使是定义在函数的原型上的，但是可能出现使用 call 等方式调用的情况。
屏幕刷新频率： 屏幕刷新频率即图像在屏幕上更新的速度，即每秒图像更新的次数，它的单位是赫兹（Hz）。一般笔记本的值是60Hz。这个值受屏幕分辨率、屏幕尺寸、显卡影响。...CTR是一种使用电子阴极管的显示器，屏幕上的图像是由一个个因电子束击打而发光的荧光点组成，由于显像管内荧光粉受到电子束击打后发光时间很短，所以电子束必须不断击打荧光粉使其不断发光。...so，即使你对着显示器什么都不做，显示器也会以每秒60次的频率正在不断的更新屏幕上的图像。 动画原理 动画的本质是让人眼看到图像被刷新而引起变化的视觉效果是以连贯的、平滑的方式进行过渡的。...由于人眼的视觉停留效应，当前位置的图像停留在大脑中的印象还没有消失，紧接着图像又移动到下一个位置，因此看到图像是在流畅的移动，这就形成了视觉上的动画。...requestAnimationFrame的步伐跟着系统的刷新步伐，它能保证回调函数在屏幕每次的刷新间隔中只被执行一次，这样就不会丢帧，也不会导致动画卡顿。
前端面试之CSS ---- display: none; 与 visibility: hidden; 的区别 联系：它们都能让元素不可见 区别： display:none;会让元素完全从渲染树中消失...，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成...：hidden; 在IE6中还需要触发 hasLayout，例如zoom：1; 父元素也设置浮动 使用 :after 伪元素。...需要在border外侧添加空白，且空白处不需要背景（色）时，使用 margin 需要在border内测添加空白，且空白处需要背景（色）时，使用 padding 抽离样式模块怎么写，说出思路？...（带单位、纯数字、百分比） 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高 纯数字：会把比例传递给后代。
首先我们把页面滑动到最下面，然后点击鼠标图标如图，然后在页面随意滑动，右侧就会显示对应的模块代码，比如图中的主题DIV模块，因为主题模板已经隐藏了侧栏，所以找不到具体的元素值，然后我们在主题模块下查看其他模块...看到这里我们应该知道侧栏是哪个了，就是“side fr”这个DIV，这个慢慢找总能找到，侧栏的命名一般也都是sidebar之类的，直接找到就行，然后查看代码：如图，side模块在屏幕像素小于999px的时候就被隐藏了...这时候我们点击右侧加号，会自动新建一个css，如图： ? 点击大括号{}之间的空白处，输入代码：“display: block;”然后我们需要的侧栏就显示了。 ?...，因为我们刚刚看到代码是先手机端才隐藏的，所以我们需要在代码上添加屏幕尺寸： @media screen and (max-width:999px){ .side.fr {display:block...还是那句话zblog还是少依赖一些插件为好，除非一些必要插件之后，打个比方，一辆车拉货，你没安装的一个插件就好比是一件货，货多了费车也费油，等哪天抽空再水一篇关于zblog使用插件的二三事。。。
元素不浮动，并会显示在其在文本中出现的位置。 浮动的特性： 浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。...（不推荐使用） 方法三：让父级div 也一并浮起来 这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。...不推荐使用 方法四：父级div定义 display:table 原理：将div属性强制变成表格 优点：不解 缺点：会产生新的未知问题。...绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算 机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。...不会触发其点击事件 visibility:hidden 和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。
前言 Select组件是我们在PC上常用组件，由于原生Select组件样式定制化困难，各个浏览器样式“百花齐放”， 不得不自己定制Select组件，已有很多很强大的UI库(antd, element)...，Hooks是已经出来一段时间的新功能，抱着学习hooks的心态自己造轮子，本文会一步一步描述自己编写整个组件过程和思路。...这里我们当然选择了render body的方案，整个组件思路是：点击显示组件，通过定位显示组件的位置来计算下拉框应该出现的位置。下拉框选中或者点击屏幕其他地方下拉框自动消失。选中后，显示对应的值。...监听document的click事件，来实现点击空白处下拉框消失。但是因为React的事件自己封装了一层并不是原生事件，这里涉及到了原生事件和合成事件的冒泡和捕获问题。...参考官网：https://zh-hans.reactjs.org/docs/events.html#___gatsby 最终使用呈现 <div style={{background
1. px 和 em 的区别 参考回答： px全称pixel像素，是相对于屏幕分辨率而言的，它是一个绝对单位，但同时具有一定的相对性。...参考回答： 结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见...说说两种盒模型以及区别 参考回答： 盒模型也称为框模型，就是从盒子顶部俯视所得的一张平面图，用于描述元素所占用的空间。...屏幕上的部分内容需要更新，表现为某些元素的外观被改变 单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分 重排和重绘代价是高昂的，它们会破坏用户体验...为了消除它们之间的歧义，我们将其归为三大类： 完全隐藏：元素从渲染树中消失，不占据空间。 视觉上的隐藏：屏幕中不可见，占据空间。 语义上的隐藏：读屏软件不可读，但正常占据空。
能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断 放弃使用像素作为尺寸单位：用dp(对于前端来说，这里可能是rem)尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致...渐进增强/优雅降级通常是 AWD 会牵扯到的另一个技术术语。本质上而言即是随着屏幕的大小的改变，功能会一点一点增强。...通过控制每个像素点的颜色，就可以使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位为pt。...rem 适配方案 在 vw 方案出来之前，最被大众接受的就是使用 rem 进行适配的方案，因为 rem 满足上面说的，可以是一个全局性的基准单位。...这样，不管设备的 dpr 是否为 3，我们统一都使用 3 倍图。这样即使在 dpr = 1，dpr = 2 的设备上，也能非常好的展示图片。 当然这样并不可取，会造成大量带宽的浪费。
A粽子应该吃甜的还是咸的？ B 还是旧番更好看 C 太阳会再次照耀我们 点击空白处查看正确答案及解析 ▼ 答案：C 这句话是《复仇者联盟》中洛基的经典台词。...5.欧洲人的正确含义是_________ A 欧气十足的锦鲤本尊 B 壮汉 C 土豪 点击空白处查看正确答案及解析 ▼ 答案：A 从欧气延伸而来的词汇，意指运气爆棚的人。...即使在没有网络的情况下，童鞋们依然可以用它买饭、购物，即刷即用，再也不用担心忘带饭卡了。 7....老师的手机屏幕会切换成PPT遥控器，将PPT课件同步发送至每位学生手机和投影大屏幕上，以供学生在微信上进行答题。...点击空白处查看正确答案及解析 ▼ 答案：C 正确出处：一个小伙子在军训时玩游戏，被教官抓住了，然后教官帮他把游戏过关了，在游戏过程中，教官犹如超神附体，神走位的王者身姿令围观的年轻人直呼：厉害了我的哥
基础单位 px px 是我们最早接触到的单位了，不过我们在移动端自适应的要求下，使用的频率不是很高；我总结了以下使用的情况： 比较小的图案 比如需要我们画一个 r 为 5px 的圆，如果我们使用 rem...作为单位，我们很快会发现在一些机型上的图案不圆，会呈现椭圆形。...字体大小（基本都是用 rem 作为单位） 一般情况字体的大小我也会使用 rem 作为单位，因为精度丢失我认为在可以接受的范围之内。...因为在需要调整字体大小的时候，只需修改 font-size 的值，而 line-height 已经设置成了相对行高了。 首行缩进两个字符 在存在首行缩进的需求，我也会使用这个单位。...内联首屏关键 CSS 性能优化中有一个重要的指标 —— 首次有效绘制（FMP），即指页面的首要内容（primary content）出现在屏幕上的时间。
如上示例中定义的单击事件方法tap中,如果不传递参数,即使用默认参数的情况,系统会自动传递如下对象当成方法的参数 type: click target: 触发点击事件的目标组件 timestamp...参数用法同上 appear 事件 appear 给组件绑定appear事件,那么当这个组件出现在屏幕上时，该事件将被触发 示例 <text class="text" v-if="index==25"...事件被触发时的时间戳 direction : 触发事件时屏幕的滚动方向，up 或 down ......viewdisappear viewdisappear 该事件将会在页面关闭时触发(如pop) 该事件也必须绑定在根节点上 <div class="page" @viewdisappear...和 viewappear 简单的使用就介绍到这里 558F171F-A623-4F25-976F-7E86A578AF9B.png
另一个需要考虑的重要问题是字体大小在大屏幕上的表现，例如 27” iMac。会发生什么呢?你猜对了，字体大小为95px左右，这是一个很大的值。...粘性布局(footer) 在大屏幕上，网站内容有时候很少，footer 没有粘在底部。这很正常，也不被认为是一种不好的做法。但是，还有改进的余地。考虑下面代表问题的示图： ?...在我的职业生涯中，我没有使用固定高度的页脚，因为在例如不同的屏幕尺寸下，此footer是不可行的。...class="device tablet"> 视口单位也可以用于grid- *属性，也用于border，border-radius和其他属性。....header { border-top: calc(2px + 0.138vw) solid $color-main; } 移动端滚动问题 移动设备中存在一个常见问题，即使使用100vh，也会滚动
滑动全面屏 就在大众还在消化FIND X的升降式摄像头时，一项基于这个基础上研发的新隐藏技术——滑屏出现了。...虽说通过上述的方法，已经可以从外形上做到“全面屏”，但实际上那些零件在使用时依旧会出现，没有真正的“被隐藏”。这也表明，只有摄像头等零件能像指纹识别一样放到屏幕之下，才能真正实现“全面屏”。 ?...背面指纹识别，由于受到油污、污垢、遮挡物以及极端环境的影响，识别过程会有偏差，容易识别失败；人脸识别对于光线的要求比较高，一旦在黑暗中，识别效果会也降低。...而且在使用过程中，人脸识别比起指纹识别来说会麻烦一些。而屏下指纹识别则可以解决这些难题，通过穿透识别技术，即使在水下（防水手机），也能完成识别任务。 ?...从升降式摄像头到滑屏，有很多人质疑目前的全面屏技术是在越走越偏，但这实际上确是一条较为正确的路。
…… Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。...class="top"> 我其实只是想和我的父元素隔开点距离。...为了“弥补修复”这个父子垂直外边距合并这个CSS规范“Bug”，而强制在父元素上使用border-top和padding-top，不舒服，也不容易记住，下次再发生这样的情况还是会忘记这条准则，而且在页面设计稿里如果不需要...用Margin还是用Padding 何时应当使用margin：需要在border外侧添加空白时。空白处不需要背景（色）时。上下相连的两个盒子之间的空白，需要相互抵消时。...IE6/7下ul/ol标记消失bug： 发生场合：当ul/ol触发了haslayout并且是在ul/ol上写margin-left，前面默认的ul/ol标记会消失。
默认的旋转中心点时元素的中心点 如下代码的效果为：当鼠标悬停在图片上时，图片会顺时针旋转360°，为了更具有动画效果，添加了过渡效果。...3D转换 3D转换之移动（translate3d） 3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。...:translateZ(100px); 在Z轴上移动100px 当然也可以复合来写： transform:translate3d(x,y,Z); 其中x、y、z分别指在x y z 轴上移动的距离...透视我们也称为视距 :视距就是人的眼睛到屏幕的距离 透视的单位是像素 透视写在被观察元素的父盒子上面的 还是上面的例子，我现在给div的父元素加上透视，因为我body里面只有div,所以div的父元素就是...【3D呈现（transfrom-style）】 有时我们使用多个对象进行旋转的时候，发现一个奇怪的现象，明明设置了旋转，但旋转的时候，子元素的旋转属性却消失了，不起作用，这是应为我们没有设置3D呈现（transfrom-style
，但是即使不是xhtml还是写成小写比较好，美观、易读而且可以应对可能的转换需求 选择器优先级 当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义...不同级别 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。...px是pixel缩写，是基于像素的单位.在浏览网页过程中，屏幕上的文字、图片等会随屏幕的分辨率变化而变化，一个100px宽度大小的图片，在800×600分辨率下，要占屏幕宽度的1/8，但在1024×768...所以如果在定义字体大小时，使用px作为单位，那一旦用户改变显示器分辨率从800到1024，用户实际看到的文字就要变“小”（自然长度单位），甚至会看不清，影响浏览。...如果在web上使用pt做单位的文字，字体的大小在不同屏幕（同样分辨率）下一样，这样可能会对排版有影响，但在Word中使用pt相当方便。因为使用Word主要目的都不是为了屏幕浏览，而是输出打印。
前言 ❝ 我是从5月中旬裸辞的，其实在裸辞时，我已经拿了3个 北京 offer ,都是远程面试的，过程还算可以。 我是不太喜欢北京这个城市的，后来都放弃了。...如今，我现在已经入职新公司一个月了，公司还可以，955，办公环境和同事也都挺 Nice。...left: 50% 定位到页面中心， 然后使用 transform: translate(-50%, -50%) 将元素调整到页面中心 使用 flex ，在父元素上，设置 aligin-items...相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 em em是相对长度单位。相对于当前对象内文本的字体尺寸。...手机端适配时可以采用 rem rpx rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。 ❞ END
故而，遍寻资料，终于看见曙光，让我查到了requestAnimationFrame 这个宿主对象的方法，也能能优雅的实现js动画！...之所以我们能看到动画，一些动画效果，完全时由我们的显示器在短时间内不断播放一张张图片，当播放速率过快时，便形成了动画效果，而我们的显示器在播放图片时，一般有一个播放的频率标准，我们叫做屏幕刷新率，即图像在屏幕上更新的速度...，也即屏幕上的图像每秒钟出现的次数，它的单位是赫兹(Hz)。...那是因为人的眼睛有视觉停留效应，即前一副画面留在大脑的印象还没消失，紧接着后一副画面就跟上来了，这中间只间隔了16.7ms(1000/60≈16.7)， 所以会让你误以为屏幕上的图像是静止不动的。...，在开始执行，走到这里，你会发现，在定时器执行的时候，前面还有会一堆同步代码也需要时间，如果前面有个循环个三五百次的话，会非常浪费时间，这就暴露出了定时器的一个缺点：丢帧现象，就是每次间隔其实是不确定的
:-webkit-box;暂时只有这个的兼容性最好， flex是最好用，还可以如 float一样排多个元素时自动换行，只是兼容性还太差，（即使是第一种，在火狐下兼容性也不是很好） 对于第一种常见用法是：...， width:0是关键（在这个坑里陷了好久，直到偶然的一次设置了 width：0突然就好了，后来在天猫上也看到了同样的设置 width:0） 10.使用 a 标签的话，尽量让 a 标签 block ...，尽量让用户可点击区域最大化 11.对两个 div使用了 transform之后， div下的 z-index有时就会失效，我遇到过，但没去认真探究，只是把 z-index提高就好了 12.在 iOS...（这个没用过） ③ 有的时候比如弹出一个 iphone上滑动出来的层，点击黑色半透明区域弹出层消失，这种可以在黑色区域绑定 touchend也是和 tap差不多的效果 7.当弹窗出现时，想禁止屏幕的滑动...jpeg,image/gif" ，同时在 android上默认不能使用相机，可以加 capture="camera" 同时，由于原生的样式不好看，可以通过设置input的display:none,然后使用
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
