0

前端flex布局基础学习教程

FlexiableBox即是弹性盒,用来进行弹性布局,一般跟rem(rem伸缩布局(转))连起来用比较方便,flexbox负责处理页面布局,然后rem处理一些flex顾及不到的地方(rem伸缩布局主要处理尺寸的适配问题),布局还是要传统布局的。flex-插图1布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex布...

阅读全文>>

0

在bootstrap中col-md-offset-*不起作用

在bootstrap中,使用col-md-offset-1、col-md-offset-2、col-md-offset-3、col-md-offset-4等来设置偏移量很常见,但最近就遇到一个问题了,在最新版的bootstrap4.5中,这个值不起作用了。 <div class="container"> <div class="row"> <div> <h2 class="col-md-4 col-md-offset-1">...

阅读全文>>

0

Bootstrap3和Bootstrap4有哪些区别

Bootstrap3和Bootstrap4区别 首先引入Bootstrap3和4官网连接; Bootstrap3 VS Bootstrap4. 不同点 Bootstrap3/Bootstrap4 Less/Sass语言编写 4种栅格类/5种栅格类 使用px为单位/使用rem和em为单位(除部分margin和padding使用px) 使用push和pull向左右移动/偏移列通过offset-类设置 使用float的布局方式/选择弹性盒模型(flexbox) 注:Bootstrap3的4种栅格: 特小(col-xs-) 适配手机(<768px)...

阅读全文>>

1

深入理解浏览器的缓存机制

一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。 对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么就没有必要再将数据回传回来,这样就减少了响应数据。 接下来的内容中我们将通过缓存位置、缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。 二、缓存位置 从缓存...

阅读全文>>

0

你的Input框还有很多有趣的功能等着你去展现

<input /> 标签是我们日常开发中非常常见的替换元素了,但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性,选择器都没怎么用过,所以就开篇文章来整理一下一些比较有趣或者实用的知识点。本篇文章默认大家已经知道 <input /> 标签的基本用法,不会做过多的基础说明~没想到,这些选择器居然跟 input …到写文章为止,根据最新的 drafts 指出,一共有3大类,16种跟 input 相关的选择。其实都挺有用的,善用它们,会让我们的用户体验更加美好。下面我们来分享一下这3大类选择器的作用:第一类:控制系(In...

阅读全文>>

0

带你看懂 HMR 热更新原理

现在的我们基本上都是使用 webpack 模式开发,修改了代码之后,页面会直接进行改变,但是很少有人想过,为什么页面不刷新就会直接改变了?初识 HMR 的时候,觉得神奇的同时,脑海中一直有一些疑问:一般来说, webpack 会将不同的模块打包成不同 bundle 或 chunk 文件, 但是在使用 webpack 进行 dev 模式开发的时候,我并没有在我的 dist 目录中找到 webpack 打包好的文件,它们去哪了呢?在查看 webpack-dev-server 的 package.json 文件中,我发现了 webpack-dev-middleware 这个依赖,这个 webpack...

阅读全文>>

0

nodejs真的是单线程吗?

一、多线程与单线程像java、python这个可以具有多线程的语言。多线程同步模式是这样的,将cpu分成几个线程,每个线程同步运行。而node.js采用单线程异步非阻塞模式,也就是说每一个计算独占cpu,遇到I/O请求不阻塞后面的计算,当I/O完成后,以事件的方式通知,继续执行计算2。事件驱动、异步、单线程、非阻塞I/O,这是我们听得最多的关于nodejs的介绍。看到上面的关键字,可能我们会好奇:为什么在浏览器中运行的 Javascript 能与操作系统进行如此底层的交互?nodejs既然是单线程,如何实现异步、非阻塞I/O?nodejs全是异步调用和非阻塞I/O,就真的不用管并发数了吗?no...

阅读全文>>

0

CSS实用技巧第一讲:文字处理

前言作为程序员的我们,书写代码也需要大量的技巧。一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满。因此,在这里简单的整理一些CSS开发技巧,希望能让你写出耳目一新、容易理解、舒服自然的代码。CSS实用技巧第一讲:文字处理本小结主要是围绕css对文字处理的技巧,有兴趣的小伙伴可以收藏一下。文本对齐方式CSS最常用的对齐方式,居中对齐、左对齐(默认)、右对齐,而且实现起来也是非常的简单。如下:p{ text-align: center; text-align: left; text-align: right;}但是两端对齐你有用过吗?只需要添加text-align-last:ju...

阅读全文>>

0

web 图像技术:前端引入图片的各种方式及其优缺点

前端开发人员在构建网站时需要做的一个决定是引入图片的方式。它可以是<img>标签,或者是通过CSS background 属性,还可以使用 SVG<image>。选择正确的方式是很重要的,它对性能和可访问性有很大的影响。在本文中,我们会学习引入图像的各种方式,以及每种方式的优点和缺点,以及何时使用和为什么使用它们。HTML img 元素最简单的情况下,img元素必须包含src属性:<img src="cool.jpg" alt="">设置宽度和高度属性在页面加载时,它们会在页面图像加载时发生一些布局变化。为了避免这种情况,我们可以为它设置...

阅读全文>>

0

移动端页面开发

了解移动端页面与PC端页面开发的区别,学习移动端页面的开发流程。移动端与PC端页面布局区别视口视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用 meta 标签,name=“viewport ” 来设置视口的大小,将视口的大小设置为和移动设备可视区一样的大小。设置方法如下( 快捷方式:meta:vp + tab ):<head>......<meta name=...

阅读全文>>