滚动条基本知识： 建议比价华丽的页面使用overflow:scroll这个样式的滚动条，比较好看。...滚动条空白部分的颜色 scrollbar-shadow-color立体滚动条阴影的颜色 我们通过几个实例来讲解上述的样式属性： 1.让浏览器窗口永远都不出现滚动条 没有水平滚动条...举例： 2，页面有多个div块，如何让...body页面不使用滚动条，只在某个div内使用滚动条 先说说正常显示的，显示滚动条和不显示滚动条，效果图如下： 代码： iframe 中始终显示滚动条：</h3...2，另外可能会出现关闭了整个body的滚动条后，发现div的滚动即使启动了也没有显示，这种情况可能是没有设置此div的高度或宽度，这是需要设置的。
–webkit-transform-style: preserve-3d，会对fixed定位造成影响，在向下滚动之后，fixed定位的内容位置会发生变化。在PC端，也会有布局上的影响。...class="wrap"> 独行冰海 - 利利 - 刘国利 line-height 行高设置 在做移动端过程中，我曾经尝试过百分比的做法，那时候为了让一个文字在父级中垂直居中...于是给其line-height设置了百分比，但是发现line-height并非是按照父级高度进行设置的，它也不是根据父级宽度设置的。...可谓不是一般的坑啊~因此，制作移动端的时候，百分比坑多多（前面盒模型一部分也有所讲解），在制作移动端的时候，个人还是首先推荐rem。...此前书写过一篇博文，感兴趣的可以直接点击查阅：《网络字体@font-face 如何处理网页中的特殊字体》 美工图设计的基准字体 当前为了让前端能够书写出兼容各个分辨率的代码，美工在做移动端设计图的时候，
或两者 今天，我们要告诉你如何用手势创建一个本地菜单 ? 让羊驼走上舞台！ 所以，在我转向实际的代码之前，在那里有一些我想要经历的事情，所以请耐心等待 HTML结构 <!...为了可读性,在函数中没有太多的代码行，我把它们全部分成了小的一行 这个手机触摸手势最后有趣的一部分 现在我对触摸事件,变量和函数的解释已经不存在了,现在是我关注如何创建动画的时候了。...意思是，在与手势相关的代码方面，行为本身应该是默认滚动。...如果0.5不透明度与100％相关，则百分比将是期望的不透明度 ?...五个像素移动？那么这个菜单可以根据距离打开或关闭。
高度： height: 长度值|百分比|auto 最大高度: max-height: 长度值|百分比|auto 最小高度: min-height:长度值|百分比|auto ?...text-align: left|right|center|justify style="text-align:left;" div{text-align:center;} ?...fixed:当页面的其余部分滚动时，背景图片不会移动 背景图片定位： 设置元素的背景图片的位置： background-position:百分比|值|top|right|bottom|left|center...，fixed:背景图片不会移动 背景图片定位 background-position: 百分比 | 值 | top | right | bottom | left | center background
html>标签未被激活，body担当类似于根节点的节点，其background背景色被浏览器俘获，浏览器界面背景色为background的背景色，以上是我的推论，这种推论不是我凭空想象出来的，而是有一定的根据的...如何避免呢？很多人会想到设置 body{overflow-y:scroll;} Firefox下是出现了滚动槽了，但是IE下出现了两个滚动条，如下： ?.../image/404.png) no-repeat fixed center center;} div{height:2000px;} 结果IE6下，背景不固定了，只看到背景图片随着滚动条上下移动而移动...属性可以说是高度百分比起作用的前提条件之一吧。...而这里要讲的是关于body和html的高度百分比显示的。
因此我们只需要写一小段js代码，根据屏幕宽度改变html的font-size值，就可以做到弹性布局。这种方法确实便捷，兼容性也很好，是目前非常主流的弹性布局方案。...中只需要使用这个函数做转换即可 //以iphone7尺寸@2x 750像素宽的视觉稿为例 @function vw($px) { @return ($px / 750) * 100vw; } //假设一个div...元素在视觉稿中，宽度为120px，字体大小为12px div { width: vw(120); font-size: vw(12); } vw单位和百分比%单位对比 那么100vw和我们平时用的...百分比%是根据父元素宽度或者高度进行计算，而vw vh固定按照viewport来计算，不会受父元素宽高度影响。...（移动端滚动条不占位，所以不会有这个问题）不过pc端一般不需要弹性布局，还是尽量使用width:100%更保险。 为何rem布局比vw主流？
"> 效果： 背景尺寸（大小） 通过 background-size 属性设置背景图片的尺寸，可以是具体的像素值、百分比，也可以使用关键字如 cover 或 contain。...百分比，也可以使用关键字。... 效果： 背景附着（固定） 通过 background-attachment 属性设置背景图片是否固定或者随着内容滚动。...scroll：背景图片随网页滚动而移动(默认) fixed：背景图片不会随网页滚动而移动 local： 背景图片会随着元素内容的滚动而滚动。...而background子属性众多，到底如何安排子属性连写顺序也是一个难题。
参数tz是一个 length 值，不能是百分比值。 正值会使元素沿Z轴正方向上移动，负值会使元素沿Z轴负方向上移动。...请注意，translateZ 值可以是负值，表示向内移动，也可以是正值，表示向外移动。 根据你的需求和设计，你可以调整 translateZ 值来实现不同的视差效果。...透视效果是指当元素在 3D 空间中移动时，根据其与观察者的距离，产生的远近感和大小变化。 通过调整 perspective 属性的值，可以改变透视效果的强度。...在视差滚动中，"向内移动"和"向外移动"是相对于观察者（即浏览器窗口）的视角来说的。 当一个层的 translateZ 值为负时，它会向内移动，也就是朝向观察者的方向。...给定背景图像位置的百分比偏移量是相对于 容器 的。
简介 根据CSS规范，视口百分比单位相对于初始包含块的大小，它是web页面的根元素。 视口单位为：vw，vh，vmin和vmax。 vw单位表示根元素宽度的百分比。1vw等于视口宽度的1%。...如果视口宽度大于其高度，则将根据高度计算该值。 我们以下面的例子为例。 ? 我们有一个横屏手机，其中有一个元素具有vmin单元。在这种情况下，值将根据视口高度计算，因为它小于宽度。... <div...通常，使用top属性进行此操作，并使用百分比或像素值。 但是，对于视口单位，我们可以添加一个可以根据视口高度改变的间距。 ? .modal-body { top: 20vh; } ?....header { border-top: calc(2px + 0.138vw) solid $color-main; } 移动端滚动问题 移动设备中存在一个常见问题，即使使用100vh，也会滚动
一、流式布局简介 流式布局 又称为 百分比布局 / 非固定像素布局 ; 为 流式布局 中 盒子模型 设置 百分比宽度 , 其大小可以根据屏幕宽度自适应伸缩 , 该盒子没有像素限制 , 内容自动向左右两边填充...; 流式布局 可以 根据 设备屏幕尺寸 和 设备类型 自动调整 网页布局 和 标签元素大小 , 以适应不同尺寸的 设备屏幕 ; 当 设备屏幕尺寸 发生变化时 , 标签元素的尺寸也会相应地调整 ; 移动端流式布局注意事项...最小宽度 : min-width ; 最大宽度 : max-width ; max-width: 980px; min-width: 320px; 使用响应式图片 : 在移动端流式布局中，图片大小也需要自适应调整...使用媒体查询 : 使用媒体查询可以 根据不同的屏幕尺寸和设备类型，设置不同的CSS样式。...> 显示效果 :
像是这样： 我的宽度是正常宽度 我的宽度是溢出了一小部分 我的宽度是溢出了溢出了很大一部分 .wrap {...由于在使用 transform: translate() 进行位移的时候，如果使用百分比表示，那么百分比的基准元素是元素本身，也就是如果我们 transform: translate(100%, 0)，...其实表示的就是向右移动一个元素本身宽度的距离。...这样，不论父容器宽度如何，文本元素宽度如何，都可以实现对溢出文本适配滚动展示。
HTML5学堂：学习CSS3，重要的并不是那几个命令，而是如何应用CSS3的知识实现网站中的效果，换句话说，“只有想不到，没有做不到”。在这个效果当中，主要用到了圆角边框和动画。...关于元素的水平垂直居中，可点击查看：《网易NEC水平垂直居中》 另一个处理，是宽度高度自适应的设置，在为width和height设置百分比之后，会分别根据父级元素的宽度和高度进行计算，此时一旦设备宽度高度不同...，我们的loading图就不再是正圆形，由于padding设置百分比值时，均是按照文字方向计算的（默认都是参照父级的宽度计算），因此此处我们将宽高均设为0，而用padding进行内容区大小的设置。...webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } 当前就已经实现出来了，不过，在测试的时候会发现，出现了滚动条...，因此，我们可以给body再增加这样一句代码： body { overflow: hidden; } CSS3就已经搞定了~很简单的解决了loading的效果，很适合在移动端应用。
# WebApp 一、 移动端web基础 1....：使切换css不同媒体样式时更加平滑 弹性图片：图片根据盒子百分比，改变盒子宽高即可 重新布局，显示和隐藏： 同比例缩减元素尺寸 调整页面结构布局 隐藏冗余的元素 优劣比较 优点：减少重复开发，一套代码多端兼容...相对单位 em: 根据父节点的font-size为相对单位 rem: 根据html的font-size为相对单位 （建议使用） 那么，rem的基值设置为多少比较合适呢？...这就是著名的移动端300ms延迟问题。那么如何解决这个问题呢？tap事件处理。什么是tap事件？...但与此同时，要注意随之产生的一个问题，就是组织默认事件后，页面也会随之禁止滚动，因此看情况使用。
视口 视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况...，移动端会将视口缩放到移动端窗口的大小。... pc端与移动端渲染网页过程： ? 使用视口解决上面的div显示太小的问题 ? ? 设置了视口之后，div显示比较正常了。...首先写一个div放置这张背景图片。 ? 下面设置一下背景图片的大小，如下： ? 使用这种方法是最频繁的，但是还有用百分比的方式。...background-size: percentage：用百分比指定背景图像大小。不允许负值。 这里的百分比其实就是div的宽高百分比，示例如下： ? ?
下图是两者官方示例的简单对比： 本文就是介绍如何使用 mCustomScrollbar 这个插件，大部分的内容是翻译自 mCustomScrollbar 官方的介绍页面，但是根据自己的理解做了部分的调整和修改...set_width:false：设置你内容的宽度 值可以是像素或者百分比 set_height:false：设置你内容的高度 值可以是像素或者百分比 horizontalScroll:Boolean：是否创建一个水平滚动条...:{ scrollType:String }：滚动按钮滚动类型 值:"continuous"(当你点击滚动控制按钮时断断续续滚动) "pixels"(根据每次点击的像素数来滚动) 点击这里可以看到形象的例子...:Integer }：设置点击滚动按钮时候每次滚动的数值 像素单位 默认 40像素 advanced:{ updateOnBrowserResize:Boolean }：根据百分比为自适应布局 调整浏览器上滚动条的大小...，官方给出了一张非常形象的图片 根据这张图片，就可以很容易的定义滚动条的样式了。
如何使div带有边框 边框虚线样式：dashed 边框实现样式：solid border:1px dashed #000 /* 代表设置对象边框宽度为1px黑色虚线边框*/ border:1px...behavior： 设置文本在 marquee 元素内如何滚动。可选值有 scroll(连续滚动)，slide(滑动一次) 和 alternate(往返滚动)。...loop： 设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动. scrollamount ：设置每次滚动时移动的长度（以像素为单位）。...vspace,hspace：表示运动区域边界的水平距离和垂直距离，以像素或百分比值设置垂直边距。 width,height：表示运动区域的宽度和高度，以像素或百分比值设置高度。... CSS cursor 属性 请把鼠标移动到单词上，可以看到鼠标指针发生变化： <span style="cursor
因此，我们可以根据这个它特性，去实现一些复杂的图形，如下： 当鼠标经过时，变成了下面的样子： 代码如下： .minW{ display: inline-block; width: 0 }...3.如何让元素支持height:100%效果 知识点：绝对定位的宽高百分比是基于padding-box的，而非绝对定位的宽高百分比是基于content-box 方法如下： * 1.设置显示的高度值 *... class="counter"> 西瓜...指字母x的高度 ex：ex指小写字母x的高度，是相对单位 vertical-align:middle 指的是基线往上1/2 x-height高度 内联元素设置对齐方式时，是基于最前面的内联元素的基线，然后根据自己的...,PC端滚动高度可以用document.documentElement.scrollTop获取,在移动端用document.body.scrollTop获取 PC端滚动条宽度约为17px 让页面滚动条不出现晃动的方法
因为涉及的内容较多，我分5篇内容发出来，好逐一进行让大家消化这些内容，本次我把前13-24个CSS重难点整理出来，具体内容如下： 13、如何判断元素是否到达可视区域（图片懒加载原理）？...13、如何判断元素是否到达可视区域（图片懒加载原理）？...%：相对于父元素的百分比，从而实现响应式的效果。...元素的位置在屏幕滚动时不会改变，⽐如回到顶部的按钮都是用的fixed固定定位 sticky 粘性定位，基于用户的滚动位置来定位。...在有滚动条的页面中，absolute 会跟着父元素进行移动，fixed 固定在页面的具体位置。
CSS 优先级算法如何计算？ 关于伪类 LVHA 的解释? CSS3 新增伪类有那些？ 如何居中 div？ display 有哪些值？说明他们的作用。...（根据项目回答） 请解释一下 CSS3 的 Flex box（弹性盒布局模型），以及适用场景？ 用纯 CSS 创建一个三角形的原理是什么？ 一个满屏品字布局如何设计?...元素竖向的百分比设定是相对于容器的高度吗？ 全屏滚动的原理是什么？用到了 CSS 的哪些属性？ 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？...视差滚动效果，如何给每页做不同的动画？ 如何修改 chrome 记住密码后自动填充表单的黄色背景？ 怎么让 Chrome 支持小于 12px 的文字？ 让页面里的字体变清晰，变细用 CSS 怎么做？...如何让去除 inline-block 元素间间距？ 有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。
背景 现在手机、电脑、ipad成为了每个家庭必备内容，但是通常设计给到我们的都是一个固定大小的UI，如果用户是一个屏幕小或者大的设备，一般就会出现滚动条或者大片空白内容，为了更好的利用一些空间，或者在各种屏幕上都有一个较好的体验...，出现了网页设计的概念，自适应的概念，也就是随着屏幕尺寸的不同能够适配各种内容 ea6ac8_8abc6421adcc4f48abe6d09cb2b995c1_mv2.gif 如何做好各种屏幕的适配工作...: 0 auto; } 弹性布局其实就是根据浏览器窗口的大小更改大小，使用相对值（百分比、rem、em、vh、vw等）来进行，flex grid也属于自适应布局方式，另外max-width/min-width...class="container"> Header Slider Content Footer 这里我们采用grid加栅格布局的方式，方便pc和移动端的转换，同时每个块之间的间距为
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
