原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。...4.x.x：最新版，目前还不是很流行 2.4bootstrap基本使用 在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。...--视口设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放--> 的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。...列嵌套最好加一个行 row 这样可以取消父元素的padding值，而且高度自动和父亲一样高 <!
inherit规定应该从父元素继承 position 属性的值。 sticky的使用 粘性定位可以被认为是相对定位和固定定位的混合。...元素在跨越特定阈值前为相对定位，之后为固定定位,设置了以上样式的元素，在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。...之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。...sticky-nav { position: sticky; top: 100px; } 设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可 粘性定位为什么不起作用...使用条件： 父元素不能overflow:hidden或者overflow:auto属性。
在第一个例子中，大家很容易就能看明白 当视口到达定义的位置时，元素会被粘住。 例： ? 但问题是，它有时候能用，而有时却不起作用。 当它工作时，元素会粘住，但在滚动到其他部分，它会停止粘贴。...粘性容器 —— 是包装粘性元素的 HTML 元素。 这是粘性元素可以浮动的最大区域。 当你定义一个具有 position:sticky 样式的元素时，父元素会被自动定义为粘性容器！...固定 —— 当元素被粘住时，它的行为与 position: fixed 完全相同，浮动在与视口的相同位置，并从流中移除。...在大多数情况下，您可以使用粘性定位将元素粘贴到顶部，如下所示： ? 这正是它被设计的初衷，而在此之前，只能使用JavaScript完成这个功能。 但你也可以使用它把元素粘到底部。...这意味着你可以把页脚定义为粘性，并且在向下滚动时使它看起来总是被粘在底部。 当到达粘性容器的末端时，元素会停在它的自然位置。 最好是在以粘性容器底部为自然位置的元素上使用它。
$(): 与jQuery的$()几乎一样,但zepto的选择器是直接使用的原生querySelectorAll(),所以,一些jQuery自定义的选择器是不支持的,但可以添加selector.js...标签*//*以上为作为选择器的使用方法*/ $(function(){ //do...用过jQuery的应该都知道,这是绑定的DOMContentLoaded 事件 }) 当$变量已经存在时,如引用了...定义的，定制插件也是通过$.fn来完成的，细看代码会发现这一句 ?...，用于生成节点的一个临时父节点（下边会说的）； 第三个是一些属性值，是一个json结构的，但要注意为驼峰命名法，因为zepto的精简，所以不想jQuery那样的宽容。...方法，该选择器不包含子选择器并且选择器开头是个#号，这说明人家要的是个ID：XXX的标签 如果满足这种情况，就调用getElementById并将返回结果放入一个数组，这也是为什么获得jQuery
Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发；为什么使用Bootstarp？...，将页面容器缩放到设备这么大，然后展示目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；视口的宽度可以通过meta标签设置此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，...Mark Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发； 为什么使用Bootstarp？...视口 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器...，将页面容器缩放到设备这么大，然后展示 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980； 视口的宽度可以通过meta标签设置 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度
如下图所示，当我点击第9题的时候，左侧第9题移动到视口中，但是整个页面包括导航栏都往上移动了，且无法在移回来，整个页面是没有滚动条的。 ?...（简单来说就是元素相对父元素上边的距离） 这段代码好理解，就是当前需要显示的元素距离父元素顶部的距离，也就是滚动条滚动的高度。...这段代码执行后，就可以让该元素到达父元素顶部的位置。 注意事项：offsetTop 不一定是相对于父元素的，如果有很多父元素的话，它是相对于第一个定位的父元素的。...jQuery 的animate 动画函数。...animate 函数使用方法：https://jquery.cuishifeng.cn/animate.html 如果不使用 jQuery 的话，由于scrollTop 是js属性，不是css属性，
jQuery 中的轮询 轮询，可能是 setTimeout 最典型的用法，jQuery 的兼容IE的 document ready 机制就用到了这个： // jquery 1.9.1 (function...这些问题概括来讲是这样：动态往 dom 树中插入元素， 然后立刻、马上操作这个元素（比如选择文本框的文本，改变 select 的 index 等）， 普通方式写代码通常不起作用，但是放入 setTimeout...所以往 dom 插入元素再立刻操作这个 dom ，那么很有可能这个 dom 还没有重绘完成，因此操作无效。 那么，为什么放入 setTimeout( func, 0 ) 中就可以呢？...setTimeout 进一步理解 可以更深入的思考： setTimeout( func, 0 ) 是延迟 0ms 执行，也就是立刻执行，但为什么还是在重绘之后呢？ 重绘肯定会超过 0ms 啊！...图中蓝色的圆角矩形是 js 块(javascript block) ，右边的数字表示时间，“问题”是模拟浏览器的判断，左边则是 javascript代码的执行时间。
15、介绍 Flex 布局，flex 是什么属性的缩写？ 16、说一说你知道的position属性，都有啥特点？ 17、在网页中的应该使用奇数还是偶数的字体？为什么呢？...可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。...17、在网页中的应该使用奇数还是偶数的字体？为什么呢？ 使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。...自适应的单位有以下几个 百分比：% 相对于视口宽度的单位：ww 相对于视口高度的单位：vh 相对于视口宽度或者高度（取决于哪个小）的单位：Vm 相对于父元素字体大小的单位：em 相对于根元素字体大小的单位...align-items属性定义项目在交叉轴上如何对齐。 align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
2.如何在 React 中实现组件之间的通信？3.Angular 的依赖注入是如何工作的？4.你如何使用 jQuery 选择和操作 DOM？...**jQuery选择和操作DOM：**可以使用$函数选择DOM元素，然后使用jQuery提供的方法（如.html(), .css(), .addClass(), .remove()等）来操作这些元素。...**优化移动端性能：**减少加载时间、使用触摸友好的UI、优化输入延迟、避免不必要的加载和重绘等。**视口和视口单位：**视口是用户在屏幕上看到的区域。...视口单位（如vw、vh、vmin、vmax）是相对于视口尺寸的单位，可以方便地实现响应式布局。# 六：版本控制### 问题:1.你如何使用 Git？2.描述一下 Git 的工作流程。...通过团队协作，我们成功地完成了多个复杂的前端项目。**解决复杂问题的经历：**在一次项目中，我遇到了一个复杂的布局问题。我首先分析了问题的原因，并尝试了多种解决方案。
1.父节点可以嵌套叶子节点，而已最好支持嵌套层数不显示，程序自动完成这个功能，或者在初始化的时候，开发人员传入一个指定的层级数目 2.父节点和叶子节点都可以拖动。...项目中主要使用到jQuery UI里面的draggable和droppable，因为很多老的浏览器都不值html5的drag api。...我自己也没有去查看zTree的源代码，所以也不知道zTree底层拖拽实现是否也是使用了jQuery UI的draggable和droppable方法。...同时因为zTree考虑到具体业务需求，对大数据处理时可以使用ajax方法，而我自己在实现，因为后台返回的数据是json格式，而且数据量不是非常的大，所以没有考虑着一块。...而我实际开发中，就是因为传入到后台的数据要求比较复杂，所以我就放弃了使用zTree控件。 完成最后的功能界面如下，完成通过拖拽数据到右边可以计算出符合条件的人数。 ?
说实话这其实也是Spring八股文里面一个比较常见的问题。在我的印象里面Spring就是父容器，SpringMvc就是子容器，子容器可以访问父容器的内容，父容器不能访问子容器的东西。...有点类似java里面的继承的味道，子类可以继承父类共有方法和变量，可以访问它们，父类不可以访问子类的方法和变量。在这里就会衍生出几个比较经典的问题： 为什么需要父子容器？...有点单一职责的味道。在J2EE三层架构中，在service层我们一般使用spring框架来管理， 而在web层则有多种选择，如spring mvc、struts等。...为什么可行因为无非就是把所有的东西全部交给子容器来管理了，子容器执行了refresh方法，把在它的配置文件里面的东西全部加载管理起来来了。...再者的话子容器会覆盖父容器加载，本来可能父容器配置了事物生成的是代理对象，但是被子容器一覆盖，又成了原生对象。这就导致了你的事物不起作用了。在补充一个问题：SpringBoot 里面是否还有父子容器？
/ 官网：http://getbootstrap.com/ 推荐使用：http://bootstrap.css88.com/ 框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身...以上来自2020年的数据 Bootstrap 使用: 控制权在框架本身，使用者要按照框架所规定的某种规范进行开发 的不识别，并导致CSS不起作用的问题--> 的流式栅格系统，随着屏幕或视口 (viewport) 尺寸的增加，系统会自动分为最多12列 栅格选项参数: 超小屏幕 (手机) =768px 中等屏幕...- .col-md- .col-lg 栅格系统用于通过一系列行与列的组合来创建页面布局，内容就可以放入这些创建好的布局中 行 (row) 可以去除父容器的15px边距 xs-extra small：超小
写在前面： 很多博主在写一些技术博客的时候，会在博文中添加一些代码，但是在展示的时候代码高亮的话会让博客整体布局更优雅。...推荐理由： 集成主题编辑器 切换行号 复制 / 粘贴代码 在新窗口中打开代码 自动获取博客文章 / 评论中的… 进行高亮 远程请求缓存 可以在一个代码框内混合语言高亮显示 可以在行内调用代码高亮...安装完成并启用，然后点击后台菜单栏的设置，找到 Crayon 进行自定义编辑。 遇到问题： 问题1、显示出来的代码块无法点击，右上角的复制/粘贴、展开等功能button点击不起作用： ?...这个说明某些主题的代码中有可能就做了上面的这种不自动加载 jQuery 改动。 这样就导致了某些依赖js文件的插件不起作用。看到这里，我们就不防去验证一下。...问题2、HTML实体字符转义问题： 在Wordpress中使用 Crayon Syntax Highlighter 时，代码段内的HTML实体不会被解释，导致'’显示为’>
页面加载时的动画效果： 1) 页面加载完成后，给body元素添加class: on-loading, 需要实现动画的元素在body.on-loading 状态下显示为：opacity:0(需要显示出来的元素...当滚动到该元素时，去掉class:is-inactive 而监听滚动事件和判断是否去掉class:is-inactive 使用的是jquery.scrollwx.js插件 二、使用方法 要使用这个...mode 用于决定元素和视口的接触面积，判断一个元素是否在视口之内。可以是下面的一些取值： 取值 行为 default 元素和视口的接触面积在视口之内。 top 顶部视口边缘在元素之内。...bottom 底部视口边缘在元素之内。 middle 顶部或底部视口边缘在元素的中间。...top和bottom 通过top和bottom参数可以移动元素和视口的接触面积，可以使用像素值，百分比值，或视口的百分比值(如20vh)。正值向视口内部移动，负值向视口外部移动。
如果仅仅加载WordPress 自带的jQuery 库，在使用一些jQuery 插件的时候明明是代码没有错误，但就是不起作用，该有的效果不能实现；但加载了原版的jQuery 库却又可以了，这样一来却同时加载了两个...后来才了解到：为了防止与其他 JS 库（如 YUI）冲突，WordPress 内置 jQuery 库的末尾都在原版的基础上加入了 jQuery.noConflict()这个东东，以至于在jQuery 代码中用...$ 代替jQuery 的写法不能识别，一些功能不起作用的原因正是由此而来。...jquery.js”为关键词查找，在第127行能找到这么一句（以WordPress 3.5.1为例）： $scripts->add( 'jquery', '/wp-includes/js/jquery/...如果你想取消，就需要在主题文件中找到如下关键代码，删除或注销之： wp_enqueue_script('jquery'); 当然，既然主题自动加载了，那肯定是有它的用处，如果删除了，一些主题功能可能会失效
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。...中文网 官网 推荐网站 框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。...4.x.x：最新版，目前还不是很流行 2.4bootstrap基本使用 在现阶段我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。...宽度定为 750px 超小屏 (100%) .container-fluid 流式布局容器 百分百宽度 占据全部视口（viewport）的容器。...2.6 bootstrap栅格系统 Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
于是就开始着手写了我的布局库的第一个版本，现在我都还保留着这个类的实现和声明： //用于线性布局的子视图的属性，描述离兄弟视图的间隔距离，以及在父视图中的比重。...兄弟的距离以及weight用来表明他在父视图之中的比重。...因此线性布局比较适合通过代码的方式来 构造视图。同时适合于将线性布局作为scrollview的子视图来布局。因为线性布局在位置调整后会 如果是使用自动布局则这个类将无效。...默认是NO.如果设置为YES的话则边缘视图的边距不起作用了，而且子视图的weight也不起作用了。而且不是调整自己的大小了 //也就是当垂直方向则所有子视图按顺序排列在中间。...所以你也可以先以尝试的态度来接触和使用这种新的布局解决方案，而且为了让大家能更好的使用这个布局库，在我的开源库中为每种布局都建立了异常丰富的演示和使用的DEMO，同时我还建立了一个能供大家交流和解决问题的
视口 － viewport IOS 中的 Safari 最早引入的概念 视口：移动设备中，浏览器里显示网页的一块区域(PC 端会忽略) 对于响应式网页，设置视口的信息： (1)....视口的宽度：要与设备宽度一致 (2). 视口的缩放倍率：设置为 1，即不缩放 (3)....JS 插件.Bootstrap 基于 jQuery ，在 jQuery 基础上提供了十几个插件函数，每个都是一个独立的 JS 文件,可以一次性引入全部的 JS 操作 - bootstrap.js，每个插件函数都有两种调用方式...JS 编程方式，手动编写 JS 代码完成行为的调用 $("选择器") : 在 Javascript(jQuery) 中获取页面指定选择器的元素 $(...第二种方法：在 WebStrorm 中 配置 FileWatchers(文件监视器)，由 WS 自动检测 less 文件的编写与更改，自动进行编译得到 css 文件 配置 FileWatchers WS
在“设计”视图中看效果，在“代码”视图中学本质， 将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味，想必对各位初学的小盆友们来说必定是极好的!...为了完成这个任务，我们进入第三个阶段——JavaScript的学习 JavaScript是一种在客户端广泛使用的脚步语言，在JavaScript当中为我们提供了一些内置函数、对象和DOM操作，借助这些内容我们可以来实现一些客户端的特效...在项目开发过程中，我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置，然后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。...、Flex布局优势、盒子父级常见属性设置、盒子子级常见属性设置、携程网 Flex 移动端页面开发 移动端开发：移动端屏幕介绍、移动端浏览器介绍、移动端操作系统介绍、真机调试、viewport 视口、rem...熟练使用和编写 jQuery 插件； – 独立完成电商网站的页面搭建（包括 HTML 结构、CSS 样式、JavaScript 特效）； – 掌握应对业务编程的能力； – 掌握 JavaScript
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
实时音视频
