- 博客(46)
- 收藏
- 关注
RSS订阅原创 css中的vw
css中的vw是什么单位？在css中，vw是一个长度单位，一个视口单位，是指相对于视口的宽度；视口会被均分为100单位的vw，则1vw等于视口宽度的1%，比如浏览器的宽度为1920px，则“1vw=1920px/100=19.2px”。视口单位(Viewport units)在PC端，视口指的是在PC端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。视口单位中的“
2021-02-08 15:35:32
9785
1
原创 正则表达式中如何表示.css结尾的文件?
正则表达式中如何表示.css结尾的文件?/ \ .css$/$代表字符串结尾\ . 表示对 . 进行转义，代表普通的 .
2020-12-04 15:44:31
912
原创 CommonJS 与 ES6模块化写法对比
1、为什么要模块化?为了防止引入多个js文件, 产生全局变量污染, 出现冲突的情况可维护性强，复用性高2、CommonJS导出引入module.exports={ }require()注意：导出只能导出一个对象，一个js文件就是一个对象eg：导出引入：3、ES6导出引入exportimport注意：ES6可以导出多个值eg：导出引入：注意：导出的格式是import { } form和export对应的单词 imp
2020-12-03 18:19:37
216
原创 rpx尺寸单位
rpx(responsive pixel) ：可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750个物理像素，1rpx=0.5px=1物理像素
2020-10-22 20:49:28
255
原创 exec()
RegExp 对象的主要方法是 exec()，该方法是专门为捕获组而设计的。 exec()接受一个参数，即要应用模式的字符串，然后返回包含第一个匹配项信息的数组；或者在没有匹配项的情况下返回 null。
2020-09-11 12:48:46
778
原创 CPU密集型和IO密集型
CPU密集型（CPU-bound）CPU密集型也叫计算密集型，指的是系统的硬盘、内存性能相对CPU要好很多，此时，系统运作大部分的状况是CPU Loading 100%，CPU要读/写I/O(硬盘/内存)，I/O在很短的时间就可以完成，而CPU还有许多运算要处理，CPU Loading很高。CPU bound的程序一般而言CPU占用率相当高。这可能是因为任务本身不太需要访问I/O设备，也可能是因为程序是多线程实现因此屏蔽掉了等待I/O的时间。IO密集型（I/O bound）IO密集型指的是系统的CP
2020-09-03 16:45:57
220
原创 link引入与script引入的区别
link 一般引入css样式eg： < link rel=“stylesheet” href=“css/index.css”>link引入强调次序script 一般引入的是 JAVASCRIPT 脚本eg: < script src=“js/jquery-1.11.3.js”>< /script>因此，引入jQuery，只能用script引入而不能用link引入...
2020-07-31 13:35:06
4546
原创 this指向
1、obj.fun() this->obj2、 fun() 或(function(){ … })() this->window3、new fun() this->新对象4、Student.prototype.intr=function(){ … this.sname …}this-> 将来调用intr()的 . 前的子对象
2020-07-30 18:51:40
134
原创 z-index
当我们写nav导航栏的下拉列表时，往往会出现，将导航栏引入index页面后，当鼠标hover到导航栏显示下拉列表的时候，会被主页面的内容挡住，下拉列表显示在主页面内容的里面，此时，我们应该在css中，每一个hover里加上z-index：999，这样hover以后，下拉列表就会显示在主页面内容的上方...
2020-07-29 23:18:16
156
原创 == === != !==
== !=是带隐式转换的等于比较交给他们的两个值，都要先被隐式转换一下，再比较。=== !== 是不带隐式转换的严格等于比较绝对不会对给的两个值擅自加工。而是保持原样进行比较。多数情况下，都要用 === 和 !== 代替 == 和 !=但是，如果必须在不同类型数据之间作比较，需要先强制转换为一致类型，再用=== 和 !== 比较。如果确实对js的隐式转换了如指掌，可以使用==和!=...
2020-07-27 09:50:42
206
原创 DOM查找
1、不需要查找就可直接获得:document.documentElement document.head document.body 2、 按节点间关系查找:①父子关系;元素.parentNode父元素.children元素.firstElementChild元素.lastElementChild②兄弟关系:元素.previousElementSibling元素.nextElementSibling3、按HTML特征查找：var 元素=document.getElementB
2020-07-25 09:53:16
210
原创 闭包(closure)
1、什么是闭包:即重用一个变量，又保护变量不被污染的一种编程方法。闭包的本质：外层函数的作用域对象，被内层函数对象引用着，无法释放。这个外层函数的作用域就是闭包对象。2、实现闭包的步骤3步:外层函数包裹要保护的变量和内层函数，内层函数一定要使用了外层函数的局部变量外层函数将内层函数抛出到外部 (return)调用者调用外层函数，获得返回的内层函数对象，保存在变量中。并反复使用。3、闭包是如何形成的:外层函数的作用域对象，被内层函数对象引用着，无法释放。4、 闭包的缺点:比普通
2020-07-24 08:57:26
238
原创 作用域
作用域就是一个变量的可用范围，本质是保存变量的一个对象， 为了避免不同范围的变量间互相干扰！js中只包括2级作用域， 全局作用域和函数作用域1、全局作用域保存任何地方都可以访问到的变量的区域——window对象在全局作用域中保存的变量称为全局变量全局变量的优点:可共用，可反复使用缺点: 易被污染，浪费内存2. 函数作用域:保存仅在函数内才可使用的变量的区域，数作用域中保存的变量是局部变量局部变量的优点: 仅函数内可用，不会污染全局，且用完就释放，不占用内存！缺点: 无法重用注意 ：
2020-07-24 08:51:47
121
原创 正则表达式
正则表达式(Regular Expression)：专门描述字符串中字符出现规则的表达式。1、字符集①简写：如果[]中部分备选字符连续，可用-省略中间字符比如，手机号规则中:[3456789] 可简写为 [3-9] 读作 3到9[0123456789] 可简写为 [0-9] 读作 0到9②其它简写：要匹配一位小写字母：[a-z] 共26个要匹配一位大写字母：[A-Z] 共26个要匹配一位字母： [A-Za-z] 共52个要匹配一位字母或数字：[0-9A-Za-z] 共62个要匹配一位
2020-07-23 16:27:44
464
原创 json解析
json是以js对象，或者js对象数组为表现形式的字符串json串JavaScript object notationjs 对象 表现方式1、json解析把json字符串转换成js对象/js对象数组，这个行为就是json解析做json解析的目的：因为要对数据使用js的API进行处理2、json字符串的格式1.json中，用一对{}来表示一个对象2.json中所有属性名称，必须用双引号括起来使用单引号，不会发生错误，但是建议使用双引号3.json中的属性值，如果是
2020-07-22 09:15:42
167
原创 ajax常见错误总结
1.数据库没开2.却少括号出乎意料的结尾，login这个方法未定义，说明login方法中缺少完结的括号3.符号错误（标点符号写成中文）4.看请求主体中"&""="写没
2020-07-22 09:09:48
204
原创 使用ajax——ajax四部曲
1.创建异步对象var xhr=new XMLHttpRequest();2.创建请求xhr.open(method,url,isAsyn);xhr.open(“get”,“http://127.0.0.1:8080/login”,true);method:请求的方法，注意，必须是字符串形式"get",“post”url:请求的url，注意，必须是字符串形式isAsyn:是否使用异步，boolean值，true/false3.发送请求xhr.send(formdata);注意：get方法
2020-07-22 08:56:09
1193
原创 元素对象获取/修改数据
1.input对象数据使用value属性obj.value=“123” 设置var res=obj.value获取2.所有的双标签，使用innerHTML属性 获取/修改属性obj.innerHTML="123"设置var res=obj.innerHTML获取
2020-07-21 09:29:27
135
原创 安全的HTTP协议，HTTPS
安全的HTTP协议，HTTPSHTTPS，是安全版本的http协议S:SSL为数据通信提供安全支持1.客户端发送请求–>ssl层加密—>服务器接收到加密文件–>SSL层解密，得到请求明文，对请求做处理2.服务器发送响应—>SSL层加密—>客户端得到加密文件—>ssl层解密，得到响应明文，解析执行响应内容...
2020-07-21 09:25:23
728
原创 HTTP协议
1、结构：结构：协议+主机名称+目录结构+文件名称2、HTTP协议Hyper Text Transfer Protocol 超文本传输协议规范了数据是如何打包和传递的(专门为了传递html文件)HTTP协议的历史，我们目前使用的版本 http/1.13、HTTP协议与restful规则4、响应状态码服务器告诉客户端，服务器的响应状态码是什么1**：正在请求，提示信息2**：200 响应成功3**：301 永久重定向302临时重定向304请求未改变，命中缓存4**：404 no
2020-07-21 09:19:46
81
原创 boot响应式要点总结
响应式网页适用于不太复杂的页面写响应式，要考虑多个屏幕下的对齐主要使用栅格，完成响应式手写媒体查询配合栅格row-----自带-15px左右外边距col-----自带-15px左右内边距boot的媒体查询，向上兼容响应式网页，少用定位...
2020-07-20 10:08:38
174
2
原创 scss定制
1.scss是什么css是一种脚本语言，没有动态语言的特征css语法不够强大，没有变量和合理的样式复用机制，导致难以维护我们需要使用动态的样式语言，赋予css新的特性常见的动态样式语言1.SCSS/SASS(scss兼容sass，scss接近css的语法)2.stylus3.less2.SCSS的功能SCSS是一款强化css的辅助工具他和css语法很像，在css的基础上增加了变量，嵌套，混合，导入，函数等高级功能。这些拓展命令，让css更加强大且优雅scss在运行服务器端浏览器不认识
2020-07-20 10:04:58
198
原创 栅格布局
1、web页面中，布局方式有三种2、栅格的概念我们把每一行布局分成12分元素的占地宽度靠份数定义3、栅格属性1.使用栅格必须放在.container中,或者.container-fluid中2.每一行每一个row，弹性，主轴x，可以换行，有**-15px的左右外边距**3.使用col-n，来声明元素在row中占几份自带左右15px的内边距4、响应式的栅格布局一行四列，大屏幕1:1:1:1 中屏幕 两个一行1:1/1：1小屏幕 每个单独一行col-*-n *：xl/lg/md/s
2020-07-20 09:53:40
3468
原创 Bootstrap框架
1.如何使用boot①boot是移动端优先的样式框架设置视口②导入boot的css③按顺序导入3个js文件④在body中，添加div容器注意：boot不支持xs超小屏，boot默认一个rem为16px
2020-07-20 09:41:25
99
原创 响应式布局
1.尺寸（宽度），图片，文本尽量使用相对单位2.尽量使用流式布局（默认文档流+浮动）+弹性，完成布局3.使用css3提供的媒体查询技术@media 设备 and 屏幕尺寸 and 屏幕尺寸{选择器{样式声明}}xl 超大屏 屏幕>=1200pxlg 大屏 992px<=屏幕<1200pxmd 中屏 768px<=屏幕<992pxsm 小屏 576px<=屏幕<768pxxs 超小屏 屏幕<57
2020-07-20 09:25:25
334
原创 过渡
让css的值，在一段时间内平缓的变化1、指定参与过渡的属性transition-property取值：1.all 所有支持过渡的属性都参与2.单独写某个css属性，多个属性间用空格分开支持过渡的属性：1.颜色2.大多数取值为具体数字的属性3.阴影4.转换5.visibility2、指定过渡时长transition-duration: s/ms 秒/毫秒指定多长时间完成此次操作3、过渡时间曲线函数transition-timing-function:取值：1.eas
2020-07-19 11:11:31
119
原创 css hack
由于不同的浏览器对css的解析和认知不同，会导致同一份css在不同的浏览器生成的页面效果不同我们要针对不同的浏览器写不同的css代码这种写不同css代码的过程就叫css hack-webkit--ms--moz--o-
2020-07-19 11:04:05
118
原创 弹性布局
将元素设置为弹性容器之后，他所有的子元素，都会变为弹性项目display:flex；将块级元素设置为容器line-flex 将行内元素设置为容器注意：元素设置为flex容器后，容器的text-align,vertical-align失效项目的float，clear失效1、容器的属性①设置主轴的方向flex-direction:取值：row默认值，主轴是x轴，主轴的起点在左端row-reverse 主轴是x轴，主轴的起点在右端column 主轴是y轴，主轴的起点在顶部column
2020-07-19 11:01:01
427
原创 复杂选择器--伪元素选择器
1、匹配元素的首行首字符:first-letter 或者 ::first-letter2、匹配元素首行:first-line 或者 ::first-line当首行与首字符发生了冲突，应用首字符的样式3、匹配用户选择的文本必须是双冒号 ::::selection{}这里的样式，只能修改文本颜色和背景颜色4、伪元素选择器，内容生成生成的是一个元素，可以设置元素的显示方式，使用content:设置这个元素的文本内容，以及所有可以使用的样式注意：contnet中只能给字符串和url
2020-07-19 10:53:20
168
原创 复杂选择器--伪类选择器
1、目标伪类在锚点被激活时，让锚点元素应用的样式目标伪类的语法:target{} 在锚点被激活时，让锚点元素应用的样式2、结构伪类1.选择器:first-child{}匹配的元素是属于其父元素的第一个子元素（找大哥）同时，这个大哥还需要符合选择器的要求2.选择器:last-child{}匹配的元素是属于其父元素的最后一个子元素（找小弟）同时，这个小弟还需要符合选择器的要求3.选择器:nth-child(n){} n从1 开始3、:empty匹配内部没有任何元素的
2020-07-19 10:41:16
159
原创 定位-------相对，绝对，固定定位
position：取值：1.static 默认，静态（默认文档流）2.relative 相对定位3.absolute 绝对定位4.fixed 固定定位当一个元素设置了position属性，并且取值为relative/absolute/fixed其中一种时这个被称为 已定位元素已定位元素解锁了4个偏移属性top/right/bottom/lefttop：取 + 值，往下，取 - 值往上right：+ ←，- →bottom：+ ↑， - ↓left：+ →，-
2020-07-18 10:08:58
187
原创 光标样式
光标cursor:默认值 default小手 pointer十字 crosshair文本 text等待 wait帮助 help常见的就默认值和小手的光标
2020-07-18 09:43:41
167
原创 vertical-align的垂直对齐方式
vertical-align做项目时，会发现图片与后面的文字总是对不齐，主要是因为img默认的是基线对齐，也就是拼音中四线三格的第三条线一般只有两个地方使用vertical-align，做垂直对齐1、table 中使用取值top/middle/bottom设置table中内容的对齐方式2、img 中使用取值 top/middle/bottom/baseline基线 默认值baseline 基线，即拼音中四线三格的第三条线设置图片与图片前后文字的垂直对齐方式一般项目中会将所有的图片与文
2020-07-18 09:40:56
305
原创 显示方式
1、显示方式决定元素在网页中的表现形式（块级，行内，行内块，table）语法：display：取值：1.display:block; 让元素以块级元素显示2.display:inline; 让元素以行内方式显示3.display:inline-block; 让元素以行内块方式显示4.display:none; 让元素隐藏，脱离文档流，不占位置5.display:table; 让元素以table方式显示2、显示/隐藏visibility取值：1.visible 默认值，可见的
2020-07-18 09:36:23
696
原创 定位
1、分类1.普通流定位2.浮动3.相对定位4.绝对定位5.固定定位2、普通流定位（默认文档流定位）1.每个元素在页面上都有自己的空间（算法：盒子模型）2.每个元素都是从父元素的左上角开始渲染3.行内元素和行内块元素在同一行显示，从左往右，一行放不下，折行4.块级元素独占一行，从上往下排列3、浮动定位让块级元素横向显示float：取值：1.left左浮动，让元素浮动后停靠在父元素的左边，或者其他已浮动元素的后面2.right右浮动，让元素浮动后停靠在父元素的右边，或者其他已
2020-07-17 10:19:11
212
原创 文本格式化--文本属性、表格常用样式
1、文本对齐方式text-align:center;取值：left/center/right/justify justify两端对齐注意：1.一个元素写了text-align，控制的是内部的文本2.这个元素自己想居中对齐，要使用margin:0 auto3. text-align,对是行内元素的孩子，都生效4.孩子如果是块级元素，只会继承 text-align。而块级元素不会居中，块级元素居中， 要使用margin:0 auto2、行高line-height取值：px为
2020-07-17 09:55:07
372
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人