自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

蟹黄堡

一根烟,一杯酒,一行代码敲一天!

  • 博客(73)
  • 收藏
  • 关注

原创 前端面试题收集整合

面试题一、在css布局中,什么场景下出现元素高度塌陷,如何解决元素高度塌陷问题?父元素的所有子元素设置浮动后会出现元素高度塌陷问题。1、父元素设置高度;2、父元素设置浮动;3、修改父元素的类型:display:inline-block/table;4、父元素设置overflow:hidden属性5、额外标签法;6、伪元素方法;7、双伪元素。二、display: none; 和 visibility: hidden;的区别?display: none;是将该元素移除,不占任何空间位置;

2020-10-24 09:52:42 530 2

原创 微信小程序框架——uni-app

文章目录uni-app介绍1.什么是uni-app2.上线的产品3.uni-app的社区和规模uni-app基础1.uni-app初体验2.项目结构介绍3.样式和sass4.基本语法5.事件6.组件7.生命周期补充1.引入样式2.uni-ui3.uni-apiuni-app介绍1.什么是uni-appuni-app是一个使用Vue.js语法来开发所有前端应用的框架。使用uni-app,可以开发网页应用、安卓应用、苹果应用以及各种各样的小程序应用(包括:微信小程序、QQ小程序、百度小程序抖音小程序以

2020-06-25 21:49:04 1256

原创 Node.js基础与进阶

文章目录Node.js基础1.Node.js前言(1)Node出现的背景(2)V8引擎2.Node.js简介(1)什么是Node.js(2)Node.js的特点(3)Node.js的应用方向客户端与服务器1.CS与BS2.Web资源3.资源访问流程Http协议1.什么是协议2.什么是HTTP协议3.HTTP的组成部分4.请求的发送方式5.Http请求6.Http响应7.请求方式node.js基础1.命令行窗口2.进程和线程3.安装node.js4.node如何运行js程序5.Node的模块化开发思想6.ex

2020-06-23 15:36:18 1697

原创 Ajax——PHP基础语法、get/post请求处理、Ajax-GET和Ajax-POST的基本使用及封装、Ajax-jQuery、Ajax-XML、Ajax-JSON、Cookie、hash

文章目录Ajax-服务器软件安装1.基本概念2.Web服务器搭建PHP基础语法get、post请求处理1.get请求处理2.post请求3.get-post异同4.post文件上传5.post-大文件上传Ajax-GET1.Ajax-GET基本使用2.Ajax-GET-IE兼容3.Ajax-GET封装Ajax-POST1.Ajax-POST基本使用2.Ajax-POST封装Ajax-jQuery封装借鉴jQuery中的Ajax,封装自己的AjaxAjax-XMLAjax-JSONCookie1.Cookie

2020-06-12 22:58:34 845 2

原创 ES6——包括:ES6简介、ES6新增的语法(let、const、解构赋值、箭头函数、剩余参数)、ES6内置对象的扩展(扩展运算符、Array.from()、find()、Set数据结构等)

ES6简介1.什么是ES6?ES的全称是ECMAScript,它是由ECMA国际标准化组织制定的一项脚本语言的标准化规范。年份版本2015年6月ES20152016年6月ES20162017年6月ES20172018年6月ES2018……ES6实际上是一个泛指,泛指ES2015及后续的版本。(每年的6月更新一次,区别以年份命名,如:ES2015)。2.为什么要使用ES6?因为JavaScript本身存在的缺陷,如:(1)变量

2020-06-05 20:41:13 5888 1

原创 JavaScript高级——正则表达式(包括:正则表达式的概述、创建正则表达式、测试正则表达式、正则表达式中的特殊字符、正则表达式的替换)

正则表达式的概述1.什么是正则表达式正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。作用:正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本,例如:验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)。其他编程语言也一样会有正则表达式。2.正则表达式的特点(1)灵活性、逻辑性和功能性非常的强。

2020-06-04 10:31:35 832

原创 JavaScript高级——函数进阶(包括:函数的定义和调用、this的指向及改变this的指向(call()、apply()、bind())、严格模式、高阶函数、闭包、递归、浅拷贝和深拷贝)

函数的定义和调用1.函数的定义方式(1)函数声明方式function关键字(命名函数)function fn(){};(2)函数表达式(匿名函数)var fun = function(){};(3)new Function()var fn = new Function('参数1','参数2'...,'函数体')var f = new Function('a','b','console.log(a + b)');Function里面参数和函数体都必须是字符串格式。第三种方式

2020-06-04 10:27:52 289

原创 JavaScript高级—包括:构造函数和原型(原型对象prototype和对象原型__proto__)、继承(call()、继承父类的属性和方法)、ES5新增的方法(数组方法、字符串方法、对象方法)

构造函数和原型1.概述在典型的OOP语言中(如:Java),都存在类的概念,类就是对象的模板,对象就是类的实例,但在ES6之前,JS中并没有引入类的概念。ES6,全称ECMAScript6.0,2015.06发布。但是目前浏览器的JavaScript是ES5,大多数高版本的浏览器也支持ES6,不过只实现了ES6的部分特性和功能。在ES6之前,对象不是基于类创建的,而是用一种称为构建函数的特殊函数来定义对象和它们的特征。创建对象可以通过以下三种方法:(1)对象字面量var obj

2020-06-01 21:08:16 230

原创 JavaScript高级——包括:面向对象编程介绍(面向过程编程POP和面向对象编程OOP)、ES6中的类和对象(类、对象、创建类、constructor构造函数、类添加方法)、类的继承(super)

面向对象编程介绍1.两大编程思想面向过程面向对象2.面向过程编程 POP面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。3.面向对象编程 OOP面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。(简单来说,面向对象是以对象功能来划分问题,而不是步骤)在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工。面向对象编程具有灵活、代码可复用、容易维护和开发的优点,更适合多人合作的大型软件项

2020-06-01 20:50:19 312

原创 jQuery拷贝对象、jQuery多库共存、jQuery插件

jQuery拷贝对象如果想要把某个对象拷贝(合并)给另外一个对象使用,此时就可以使用$.extend()方法。语法:$.extend([deep],target,object1,[objectN])deep:如果设为true为深拷贝,默认为false浅拷贝。target:要拷贝的目标对象。object1:待拷贝到第一个对象的对象。objectN:待拷贝到第N个对象的对象。浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。深拷贝,前面加true,

2020-05-31 15:13:17 221

原创 jQuery事件——单个事件注册、jQuery事件处理(包括:事件处理on()绑定事件、事件处理off()解绑事件、自动触发事件trigger())、jQuery事件对象

jQuery事件注册1.单个事件注册语法:element.事件(function(){})$("div").click(function(){ 事件处理程序})其他事件和原生基本一致。比如:mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。jQuery事件处理1.事件处理 on()绑定事件on()方法在匹配元素上绑定一个或多个事件的事件处理函数。语法:element.on(events

2020-05-31 15:09:25 353

原创 jQuery常用API——包括:jQuery选择器、样式操作、效果、属性操作、内容文本值、元素操作、尺寸及位置操作等

文章目录jQuery选择器1.jQuery基础选择器2.jQuery层级选择器3.jQuery隐式迭代4.jQuery筛选选择器5.jQuery筛选方法6.jQuery里面的排他思想7.链式编程jQuery样式操作1.操作CSS方法2.设置类样式方法3.类操作与className区别jQuery效果1.显示隐藏效果2.滑动效果3.事件切换4.动画队列及其停止排队方法5.淡入淡出效果6.自定义动画animatejQuery属性操作1.设置或获取元素固有属性值prop()2.设置或获取元素自定义属性值attr(

2020-05-31 15:02:01 341

原创 jQuery入门——包括:jQuery概述、jQuery的下载、jQuery的使用步骤、jQuery的入口函数、jQuery的顶级对象$、jQuery对象和DOM对象的区别及转换)

jQuery概述jQuery是一个快速、简洁的JavaScript库,它把JavaScript中常用的功能代码做了封装,优化了DOM操作、事件处理、动画设计和Ajax交互。jQuery的作用就是可以加快前端人员的开发速度。优点:1.轻量级。核心文件才几十kb,不会影响页面的加载速度。2.跨浏览器兼容。基本兼容了现在主流的浏览器。3.链式编程、隐式迭代。4.对事件、样式、动画支持,大大简化了DOM操作。5.支持插件扩展开发。有着丰富的第三方插件,例如:树形菜单、日期控件、轮播图等。

2020-05-31 14:56:51 315

原创 JavaScript——本地存储(包括:本地存储等概述、window.sessionStorage、window.localStorage等)

本地存储本地存储的特性:1.数据存储在用户浏览器中。2.设置、读取方便、甚至页面刷新不丢失数据。3.容量较大,sessionStorage约5M、localStorage约20M。4.只能存储字符串,可以将对象JSON.stringify()编码后存储。window.sessionStorage生命周期为关闭浏览器窗口。在同一个窗口(页面)下数据可以共享。以键值对的形式存储使用。存储数据:sessionStorage.setItem(key, value)//例子:v

2020-05-27 03:51:19 193

原创 JavaScript——移动端网页特效(包括:触屏事件、移动端常用开发插件、移动端常用开发框架等)

触屏事件1.触屏事件概述移动端浏览器兼容性较好,可以不需要考虑JS的兼容性问题,可以放心的使用原生JS书写效果,但是移动端也有自己独特的地方。比如触屏事件(也称触摸事件),Android和IOS都有。touch对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触控笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。常见的触屏事件如下:触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM元

2020-05-27 03:48:43 492

原创 JavaScript——PC端网页特效(包括:元素偏移量offset系列、元素可视区client系列、元素滚动scroll系列、动画函数封装等)

元素偏移量offset系列offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。1.可以获得元素距离带有定位父元素等位置。2.可以获得元素自身的大小(宽度和高度)。注意:返回的数值都不带单位。offset系列常用属性:offset系列属性说明element.offsetParent返回作为该元素带有定位的父级元素如果父级都没有定位则返回bodyelement.offsetTop返回元素相对带有定位父元素上方的偏移如果没有父级元素或者父级元素

2020-05-26 10:01:55 343

原创 JavaScript——BOM(包括:BOM的概述、window对象常见事件、this的指向问题、JS执行队列、location对象、navigator对象和history对象)

BOM概述BOM即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。BOM是由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。现在,BOM是浏览器厂商在各自浏览器上定义的,兼容性较差。BOM是包含DOM的,它的组成如下:1.document2.location3.navigation4.s

2020-05-25 19:34:49 379

原创 JavaScript——事件高级(包括:注册事件(绑定事件)、删除事件(解绑事件)、DOM事件流、事件对象、事件委托、常用鼠标事件及鼠标事件对象、常用键盘事件及键盘事件对象等)

注册事件给元素添加事件,称为注册事件或者绑定事件。注册事件有两种方式:传统方式和方法监听注册方式。1.传统注册方式:(1)利用on开头的事件,比如:onclick(2)< button οnclick=“alert(‘hello’)”>< /button>(3)btn.onclick = function(){ }(4)特点:注册事件的唯一性。简单来收,就是同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数2.方法监听注册方

2020-05-24 20:42:52 397

原创 JavaScript——DOM(包括DOM简介、获取元素、事件基础、操作元素、节点操作)

DOM简介文档对象模型(DOM),就是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。作用:通过这些DOM接口,可以改变网页的内容、结构和样式。DOM树:(1)文档:一个页面就是一个文档,DOM中使用document表示(2)元素:页面中所有标签都是元素,DOM中使用element表示(3)节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示(4)DOM把以上三种都看做是对象获取元素1.根据ID获取使用getEle

2020-05-23 16:43:20 547

原创 JavaScript——Web APIs

JS的组成JavaScript由ECMAScript(JavaScript基础)、DOM和BOM(Web APIs)组成。其中,JavaScript基础是ECMAScript标准规定的基本语法;而Web APIs是W3C组织的标准。API和Web APIAPI(应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码或理解内部工作机制的细节。Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。

2020-05-22 15:17:03 253

原创 JavaScript——简单数据类型和复杂数据类型(包括:简单类型与复杂类型的概述、堆和栈、简单类型与复杂类型的内存分配以及简单类型与复杂类型的传参)

简单类型与复杂类型简单类型有叫做基本数据类型或值类型;复杂类型又叫做引用类型。值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,,因此叫做值类型。如:string、number、boolean、undefined、null。null其实是一个空对象,注意用途有:(1)销毁变量;(2)如果某个变量以后打算存储为对象,但暂时没有想好放什么值,就可以先给该变量赋值null,让它等于一个空对象。引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型

2020-05-22 12:12:06 325

原创 JavaScript——内置对象(包括:内置对象的概述、Math对象、日期对象、数组对象、字符串对象)

内置对象概述JavaScript中的对象分为以下3中:(1)自定义对象(2)内置对象(3)浏览器对象内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性或方法)。内置对象的优点:帮助开发者快速开发。JavaScript提供了多个内置对象:Math、Date、Array、String等。Math对象Math数学对象不是一个构造函数,使用使用时不需要new,而是直接使用里面的属性和方法即可。1.Math.max()

2020-05-22 10:18:03 554

原创 JavaScript——对象(包括:对象的概述、利用字面量创建对象、利用new Object创建对象、利用构造函数创建对象、遍历对象)

对象的概述在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如:字符串、数值、数组、函数等。对象是由属性和方法组成的。(1)属性:事物的特征,在对象中用属性来表示(常用名词)(2)方法:事物的行为,在对象中用方法来表示(常用动词)作用:JavaScript的对象使表达更清晰、更强大。创建对象在JavaScript中,创建对象的方法主要有以下三种:(1)利用字面量创建对象(2)利用new Object创建对象(3)利用构造函数创建对象

2020-05-21 12:46:57 586

原创 JavaScript——预解析(包括:预解析的概述、变量预解析(变量提升)、函数预解析(函数提升)、案例等)

预解析JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为以下两步:(1)预解析(包括:变量预解析和函数预解析)(2)代码执行预解析:JavaScript引擎会把js里面所有的var和function提升到当前作用域的最前面。变量预解析(变量提升)定义:变量预解析就是把所有的变量声明提升到当前作用域的最前面,不提升赋值操作。//原先的代码:fun();var fun = function

2020-05-21 02:21:48 367

原创 JavaScript——作用域(包括:全局作用域、局部作用域、块级作用域、全局变量、局部变量、作用域链)

作用域JavaScript作用域就是代码名字(一般是变量)在某个范围内起作用和效果。作用:提高了程序逻辑的局部性, 增强了程序的可靠性,减少了名字冲突。JavaScript的作用域分为以下两种:(1)全局作用域:在整个script标签或者一个单独的js文件内起作用(2)局部作用域(函数作用域):只能在函数内部起效果和作用全局变量和局部变量根据作用域的不同,变量可以分为全局变量和局部变量。(1)全局变量:在全局作用域下的变量,在全局下都可以使用,包括函数内部。并且,全局变量

2020-05-20 22:16:29 3017

原创 JavaScript——函数(包括:函数的概述、函数的声明和调用、函数封装的定义、函数的参数(形参和实参)、函数返回值(return)、arguments的使用、函数的两种声明方式)

函数的概述函数就是封装了一段可以被重复执行调用的代码块。目的:让大量代码重复使用。函数的使用函数在使用的时候分为以下两步:(1)声明函数(2)调用函数1.声明函数//声明函数function 函数名(){ //函数体代码}2.调用函数//调用函数函数名(); //通过调用函数名来执行函数体代码3.扩展(函数的封装的定义)函数的封装就是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口。函数的参数在声明函数 时,可以在函数名称

2020-05-20 20:15:49 384

原创 JavaScript——数组(包括:数组的概念、创建数组、获取数组中的元素、遍历数组、获取数组的长度、向数组中新增元素、冒泡排序)

数组的概念数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。创建数组JS中创建数组的方式有以下两种:(1)利用new创建数组(2)利用数组字面量创建数组1.利用new创建数组//var 数组名 = new Array();var arr1 = new Array(); //创建一个新的空数组var arr2 = new Array(5); //创建一个长度为5的数组var arr3

2020-05-20 16:40:10 465

原创 JavaScript——流程控制(包括:顺序结构、分支结构(if、if else、if else if、三元表达式、switch)、循环结构(for、while、do while)、continue等

流程控制流程控制就是来控制我们的代码按照什么结构顺序来执行。流程控制主要有以下三种结构,分别是:(1)顺序结构(2)分支结构(3)循环结构顺序流程控制顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行。分支流程控制由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码,从而得到不同的结果。1.if分支语句//if分支语句的语法结构如下://条件成立执行代码,否则什么也不做if(条件表达式){ //条件成立执

2020-05-20 11:11:12 3806

原创 JavaScript——运算符(包括:算数运算符、递增和递减运算符、比较运算符、逻辑运算符、逻辑中断、赋值运算符以及运算符的优先级)

运算符运算符也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有:(1)算数运算符(2)递增和递减运算符(3)比较运算符(4)逻辑运算符(5)赋值运算符算数运算符算数运算符用于执行两个变量或值的算数运算。(注意优先级,先乘除,后加减,有括号先算括号里面的)运算符说明+加-减*乘/除%取余数(取模)浮点数值的最高精度是17位小数,但在进行算数计算时其精度远远不如整数

2020-05-19 20:40:20 343

原创 标识符、关键字、保留字详细讲解

标识符标识符就是指开发人员为变量、属性、函数、参数取的名字。标识符不能是关键字或保留字。关键字关键字是指JS本身已经使用了的字,不能再用它们充当变量名、方法名。包括:break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等。保留字保留字就是

2020-05-19 16:18:16 1187

原创 解释型语言和编译型语言的概述及其执行过程

解释型语言和编译型语言概述计算机是不能直接理解任何除机器语言以外的语言,所以必须要把程序员所写的程序语言编译成机器语言才能执行程序。程序语言翻译成机器语言的工具,被称为翻译器。翻译器翻译的方式有两种:一个是编译,另外一个是解释。两种方式之间的区别在于翻译的时间点不同。(1)编译器是在代码执行之前对所有代码进行编译,生成中间文件,然后在执行程序。(像Java等语言的翻译器就是这种)(2)解释器是在运行时进行及时解释,并立即执行,简单来说,就是逐行解释并执行。(像JavaScript等语言的翻译

2020-05-19 15:55:32 1868

原创 JavaScript——数据类型转换(包括:数据类型转换的定义、转换为字符串、转换为数字型、转换为布尔型)

数据类型转换的定义数据类型转换就是把一种数据类型的变量转换成另一种数据类型。通常有以下3种方式的转换:(1)转换为字符串类型(2)转换为数字型(3)转换为布尔型1.转换为字符串方式说明案例toString()转成字符串var num = 1;console.log(num.toString());String()强制转换转成字符串var num =1;console.log(String(num));加号拼接字符串(隐式转换)和字符串拼接的结果

2020-05-19 15:53:20 363

原创 JavaScript——数据类型(包括:数据类型的简介、简单数据类型(数字型、字符串型、布尔型、Undefined、Null)、获取变量数据类型的方法以及字面量的含义)

数据类型简介为什么需要数据类型在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,所以才需要定义不同的数据类型。变量的数据类型与Java、C语言等其他编程语言不同的是,JavaScript是一种弱类型或者动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。简单来说,就是在代码运行的时候,变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的,运行完毕后,变量就确定了数据类型。var use

2020-05-19 14:37:29 485

原创 JavaScript——变量(包括:变量的概述、变量的使用、更新变量、同时声明多个变量、声明变量的特殊情况、变量的命名规范)

变量概述本质:变量是程序在内存中申请的一块用来存放数据的空间。变量的使用变量在使用时分为以下两步:声明变量//声明变量var age; //声明一个名称为age的变量var是一个JS关键字,用来声明变量。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管。age是程序员定义的变量名,我们需要通过变量名来访问内存中分配的空间。赋值age = 22; //给age这个变量赋值为22= 是用来把右边的值赋给左边的变量空间。变量值是程序员保存到变

2020-05-19 02:38:36 277

原创 JavaScript入门简介(包括:JavaScript的定义,JavaScript的作用,渲染引擎,JS引擎,JS的组成,JS代码的书写位置——行内式、内嵌式、链接式,JS注释及输入输出语句)

JavaScript是什么JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚步语言。(当然,现在可以基于Node.js技术进行服务器端端编程)脚步语言:不需要编译,运行过程由js解释器(js引擎)逐行进行解释并执行。JavaScript的作用表单动态校验(密码强度检测)(JS产生最初的目的)网页特效服务端开发桌面程序App控制硬件—物联网游戏开发浏览器执行JS简介渲染引擎:用来解析HTML与CSS,俗称内核,比如:chrome浏览器的blink,老版本的w

2020-05-18 20:49:58 305

原创 移动开发之响应式布局(包括:响应式开发的原理、响应式布局容器以及Bootstrap前端开发框架)

响应式开发原理响应式开发就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。响应式开发原理:在不同屏幕下,通过媒体查询来改变布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。设备划分尺寸区间超小屏幕(手机)<768px小屏设备(平板)>=768px ~ <992px中等屏幕(桌面显示器)>=992px ~ <1200px宽屏设备大桌面显示器)&g

2020-05-18 14:33:46 304

原创 Less的基础知识(包括:Less的概述及Less的使用)

Less概述Less是一门CSS扩展语言,也称为CSS预处理器。Less作为CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入了程序式语言的特性,包括:引入了变量、Mixin(混入)、运算以及函数等功能,大大简化了CSS的编写,降低了CSS的维护成本。常见的CSS预处理器有:Sass、Less、Stylus。使用Less之前需要先安装Less,Less的安装步骤如下:(1)先安装node.js;(2)基于安装的node.js,使用命令“npm install

2020-05-18 01:01:37 2109

原创 移动开发之rem适配布局(rem单位、媒体查询、rem适配方案)

rem单位rem是一个相对单位,类似于em,但和em是有区别的。em是相对与父元素的字体大小来说的。rem是相对于html元素的字体大小来说的。优点:rem可以通过修改html里面的文字大小来整体控制页面中元素的字体大小。媒体查询@media可以针对不同的屏幕尺寸设置不同的样式,当重置浏览器大小时,页面也会根据浏览器的宽度和高度重新渲染页面。媒体查询的语法格式如下:@media not|only mediatype and (media feature) { CSS 代码..

2020-05-17 22:07:51 294

原创 移动端之flex布局——包括:flex布局父元素的常见属性(flex-direction、justify-content、flex-wrap、align-items等)和子项常见的属性(flex等)

flex布局概述flex用来为盒状模型提供最大的灵活性,并且任何一个容器都可以指定flex布局。指定了flex布局的元素,不管是行内元素还是块级元素,都可以设置宽度和高度。flex布局就是通过给父盒子添加flex属性来控制子盒子的位置和排列方式。为父盒子设定flex布局以后,子元素的float、clear和vertical-align属性都将失效。采用flex布局的元素,称为flex容器,简称“容器”;而它的所有子元素自动成为容器成员,成为flex项目,简称“项目”。flex布局父元素常见的

2020-05-17 15:20:52 1313

原创 移动端常见布局之流式布局详细讲解

流式布局流式布局也称为百分比布局。流式布局就是通过设置盒子的宽度为百分比,让它能够根据屏幕的宽度进行伸缩,不受固定像素的限制,内容向两侧填充。通常,为了保护盒子的宽度在合理范围之内,我们都会设置以下两个属性:max-width:最大宽度min-width:最小宽度微信公众号也会定期更新,觉得文章写得还可以的,可以加个关注!点个赞!谢谢!...

2020-05-17 01:22:06 510

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除