- 博客(313)
- 收藏
- 关注
RSS订阅原创 uni-app:刷新当前页面
uni-app：关闭当前页面，跳转到应用内的某给页面（如果想刷新当前页面也可以使用该方法）：uni.redirectTo({ url: 'test?id=1'});官方文档讲解:uni.redirectTo
2020-09-28 10:53:27
16909
原创 PS操作小技巧
PS操作小技巧如何查看psd文件指定图层图片的大小？如何查看psd文件指定图层图片的大小？首先你需要找到你的指定图层：点击小眼睛然后再配合使用**Ctrl + 左键 ** 这个时候图片会被选中，效果如下：...
2020-09-23 17:52:01
521
原创 uni-app：app端返回逻辑
uni-app：app端返回逻辑app端返回app端返回 onBackPress(options) { if (options.from === 'navigateBack') { return false; } this.back(); return true; }, methods:{ back(){ // 返回到相对应的模块 let page = this.$store.state.loginTapPage; if(page == 2
2020-09-22 09:54:29
621
原创 样式补充
文章目录样式补充display：list-item图片失效时的宽高问题行盒中包含行块盒或可替换元素text-align:justify制作一个三角形direction 和 writing-modeutf-8字符样式补充display：list-item设置为该属性值的盒子，本质上仍然是一个块盒，但同时该盒子会附带另一个盒子元素本身生成的盒子叫做主盒子，附带的盒子称为次盒子，次盒子和主盒子水平排列涉及的css：list-style-type设置次盒子中内容的类型list-style-po
2020-08-23 10:44:38
228
原创 居中小总结
文章目录居中小总结行盒（行块盒）水平居中常规流块盒水平居中绝对定位元素的水平居中单行文本的垂直居中行块盒或块盒内多行文本的垂直居中居中小总结居中：盒子在其包含块中居中行盒（行块盒）水平居中直接设置行盒（行块盒）父元素text-align:center常规流块盒水平居中定宽，设置左右margin为auto绝对定位元素的水平居中定宽，设置左右的坐标为0（left：0， right：0）， 将左右margin设置为auto实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况
2020-08-22 12:09:34
158
原创 浏览器兼容性
文章目录浏览器兼容性问题产生原因厂商前缀css hack渐近增强 和 优雅降级caniuse浏览器兼容性问题产生原因市场竞争标准版本的变化厂商前缀比如：box-sizing，谷歌旧版本浏览器中使用-webkit-box-sizing:border-box市场竞争，标准没有发布；标准仍在讨论中（草案），浏览器厂商希望先支持；IE: -ms-Chrome, safari: -webkit-opera: -o-firefox: -moz- <style>
2020-08-20 08:50:34
276
原创 扩展-数据链接
文章目录数据链接如何书写意义base64数据链接data url如何书写数据链接：将目标文件的数据直接书写到路径位置语法：data:MIME,数据<link rel="stylesheet" href="data:text/css,h1{color:blue}"><body> <h1>标题</h1></body>意义优点：减少浏览器的请求请求响应减少了请求中浪费的时间有利于动态生成数据缺点：增加了
2020-08-16 10:34:24
317
原创 扩展-svg
文章目录扩展-svg怎么使用书写svg代码rect ：矩形circle ：圆形ellipse : 椭圆line ：线条polyline ：折线polygon : 多边行path : 路径扩展-svgsvg: scalable vector grapics , 可缩放的矢量图该图片使用代码书写而成缩放不会失真内容轻量怎么使用svg可以嵌入浏览器，也可以单独成为一个文件xml语言，svg使用该语言定义书写svg代码rect ：矩形<svg style="background-co
2020-08-09 19:33:36
278
原创 扩展-堆叠上下文
文章目录堆叠上下文创建堆叠上下文的元素同一个堆叠上下文中元素在Z轴上排列堆叠上下文堆叠上下文(stack context)，它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在Z轴上排列的先后顺序。创建堆叠上下文的元素html元素（根元素）设置了z-index（非auto）数值的定位元素同一个堆叠上下文中元素在Z轴上排列创建堆叠上下文的元素的背景和边框堆叠级别为负值的堆叠上下文常规流非定位的块盒非定位的浮动盒子常规流非定位的行盒任何z-index 是 auto 的定位
2020-08-09 12:10:45
178
原创 扩展参考线-深入理解字体
文章目录参考线-深入理解字体文字font-size行高vertical-align可替换元素和行块盒的基线参考线-深入理解字体font-size、line-height、vertical-align、font-family文字文字是通过一些文字制作软件制作的，比如fontforge制作文字时，会有几根参考线,不同的文字类型，参考线不一样。同一种文字类型，参考线一致。font-size字体大小，设置的是文字的相对大小文字的相对大小：1000、2048、1024文字顶线到底线的距离，是文字的实
2020-08-08 17:23:16
328
原创 数值的扩展
文章目录数值的扩展1.二进制和八进制表示法2.Number.isFinite()、Number.isNaN()3.Number.parseInt()、Number.parseFloat();4.Number.isInteger()5. Number.EPSILON6. 安全整数和Number.isSafeInteger()7. Math对象的扩展Math.trunc()Math.sign()Math.cbrt()Math.clz32()Math.imul()Math.fround()Math.hypot()
2020-08-07 10:02:35
308
原创 行盒的垂直对齐
文章目录行盒的垂直对齐多个行盒垂直方向上的对齐图片的底部白边行盒的垂直对齐多个行盒垂直方向上的对齐给没有对齐元素设置vertical-align，可以是预设值也可以是数值 <input type="checkbox"> <span>垂直居中XXXXX</span> input[type="checkbox"] { width: 50px; height: 50px;
2020-08-02 10:12:13
172
原创 扩展（浮动的细节规则、行高的取值、body的背景）
浮动的细节规则左浮动的盒子向上向左排列右浮动的盒子向上向右排列浮动盒子的定边不得高于上一个盒子的定边若剩余空间无法放下浮动的盒子，则改盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动。行高的取值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-
2020-08-01 10:35:20
185
原创 块级格式化上下文
文章目录块级格式化上下文块级格式化上下文全称Block Formatting Context, 简称BFC它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局不同的BFC区域，它们进行渲染时互不干扰创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部具体规则：创建BFC的元素，它的自动高度需要计算浮动元素<!DOCTYPE html><html lang="en"><head> <meta charset="U
2020-08-01 09:50:55
177
原创 布局
文章目录布局多栏布局两栏布局三栏布局布局多栏布局两栏布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty
2020-08-01 09:49:32
263
原创 变量的解构赋值
变量的解构赋值变量的解构赋值1. 数组的解构赋值基本用法默认值2.对象的解构赋值简介默认值注意点3.字符串的解构赋值4.数值和布尔值的解构赋值5. 函数参数的解构赋值6.圆括号问题不能使用圆括号的情况可以使用圆括号的情况7. 用途变量的解构赋值1. 数组的解构赋值基本用法ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为变量赋值，只能直接指定值。 let a = 1; let b = 2; let c = 3;
2020-07-21 18:00:48
332
原创 web字体和图标
web字体和图标web字体用户电脑上没有安装相应字体，强制让用户下载该字体(浏览器自动去下载，用户是看不到的),在浏览器下载过程中，这会导致用户的体验感不好，所以不推荐使用。使用@font-face指令制作一个新字体<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-
2020-07-19 11:50:56
171
原创 @规则
@规则at-rule: @规则、@语句、CSS语句、CSS指令import@import “路径”导入另外一个css文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel
2020-07-19 10:47:02
235
原创 其他元素
其他元素其他元素其他元素abbr缩写词 <p> <abbr title="cascading style sheet">CSS</abbr> 是用于为页面添加样式 </p>time提供给浏览器或收缩引擎阅读的时间 <p> <time datetime="2020-6-22">今年六月</time> 我...... </p>
2020-07-19 10:26:47
308
原创 表格元素
表格元素在css技术出现之前，网页通常使用表格布局。后台管理系统中可能会使用表格。前台：面向用户后台：面向管理员。对界面要求不高，对功能性要求高。表格不再适用于网页布局？表格的渲染速度过慢。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
2020-07-19 09:23:44
197
原创 美化表单元素
美化表单元素美化表单元素新的伪类常见用法美化表单元素新的伪类focus元素聚焦时的样式 input{ color: #999; } input:focus{ outline: 1px solid #f00; outline-offset: 0; color: #333; }checked单选或多选框被选中的样式<bod
2020-07-18 11:12:49
133
原创 表单元素
表单元素表单元素input元素select元素textarea元素按钮元素表单状态配合表单元素的其他元素labeldatalistform元素fieldset元素表单元素一系列元素，主要用于收集用户数据input元素输入框type属性：输入框类型type：text， 普通文本输入框type：password，密码框type：date， 日期选择框，具有兼容性问题type：search，搜索框，具有兼容性问题type: number, 数字输入框type: checkbox, 多选框
2020-07-18 11:11:58
215
原创 在页面中使用flash
在页面中使用flashobjectembed它们都是可替换元素MIME多用途互联网邮件类型比如，资源是一个jpg图片，MIME：image、jpeg兼容性写法：object标签里面嵌套embed标签：如果object标签浏览器可以识别出来，那么embed会失效，如果不能识别出来，那么就会执行embed进行执行。...
2020-07-18 11:10:24
120
原创 iframe元素
iframe元素通常用于在网页中嵌入另一个页面iframe 可替换元素通常行盒通常显示的内容取决于元素的属性CSS不能完全控制其中的样式具有行块盒的特点 <a href="https://www.baidu.com" target="myiframe">百度</a> <a href="https://www.douyu.com" target="myiframe">斗鱼</a> <a href="https://w
2020-07-18 11:09:48
128
原创 定位
文章目录定位position属性相对定位绝对定位固定定位定位下的居中多个定位元素重叠时补充定位常规流浮动：float定位：position定位：手动控制元素在包含块中的精准位置涉及的css属性：positionposition属性默认值：static，静态定位（不定位）relative：相对定位absolute：绝对定位fixed：固定定位一个元素，只要position的取值不是static，认为该元素是一个定位元素。定位元素会脱离文档流（相对定位除外）一个脱离了文档流的
2020-06-26 18:45:22
161
原创 浮动
文章目录浮动应用场景浮动的基本特点盒子尺寸盒子排列高度坍塌浮动视觉格式化模型，大体上将页面中盒子的排列分为三种方式：常规流浮动定位应用场景文字环绕横向排列浮动的基本特点修改float属性值为：left：左浮动，元素靠上靠左right：右浮动，元素靠上靠右默认值为none当一个元素浮动后，元素必定为块盒(更改display属性为block)浮动元素的包含块，和常规流一样，为父元素的内容盒盒子尺寸宽度为auto时，适应内容宽度高度为auto时，与常规流一致，
2020-06-21 10:29:16
178
原创 常规流
文章目录常规流常规流布局常规流盒模型：规定单个盒子的规则视觉格式化模型（布局规则）：页面中的多个盒子排列规则视觉格式化模型，大体上将页面中盒子的排列分为三种方式：常规流浮动定位常规流布局常规流、文档流、普通文档流、常规文档流所有元素，默认情况下，都属于常规流布局总体规则：块盒独占一行，行盒水平依次排列包含块(containing block)：每个盒子都有它的包含块，包含块决定了盒子的排列区域绝大部分情况下：盒子的包含块，为其父元素的内容盒块盒每个块盒的总宽度，必须刚好等
2020-06-20 23:03:28
238
原创 行盒的盒模型
文章目录行盒的盒模型显著特点行块盒空白折叠可替换元素 和 非可替换元素行盒的盒模型常见的行盒：包含具体内容的元素span、strong、em、i、img、video、audio显著特点盒子沿着内容延伸行盒不能设置宽高调整行盒的宽高，应该使用字体大小、行高、字体类型、间接调整。内边距（填充区）水平方向有效，垂直方向不会实际占据空间。边框水平方向有效，垂直方向不会实际占据空间。外边框水平方向有效，垂直方向不会实际占据空间。行块盒display: inline-blo
2020-06-20 19:38:34
163
原创 盒模型及盒模型应用
文章目录盒模型盒子的组成部分盒模型应用改变宽高范围改变背景覆盖范围溢出处理断词规则空白处理盒模型box: 盒子，在每个元素在页面中都会生成一个矩形区域（盒子）盒子类型：行盒，display等于inline的元素块盒，display等于block的元素行盒在页面中不换行、块盒独占一行display默认值为inline浏览器默认样式表设置的块盒：容器元素、h1~h6、p常见的行盒：span、a、img、video、audio盒子的组成部分内容 contentwidth、heigh
2020-06-20 13:03:51
275
原创 let 和 const 命令
文章目录let 和 const 命令1. let命令基本用法不存在变量提升暂时性死区不允许重复声明2.块级作用域为什么需要块级作用域？ES6 的块级作用域块级作用域与函数声明3. const命令基本用法本质ES6声明变量的六种方法4.顶层对象的属性5.globalThis 对象let 和 const 命令1. let命令基本用法let命令，用来声明变量。 它的用法类似于var， 但是所声明的变量，只在let命令所在的代码块内有效。 { let a = 10;
2020-06-18 17:53:43
207
原创 使用选择器继承来精简CSS
文章目录使用选择器继承来精简CSS6-1. 何时使用继承6-2. 继承的高级用法6-3. 继承的工作细节6-4. 使用继承的最佳实践使用选择器继承来精简CSS选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式，通过@extend语法实现。 <header>头部</header> <main> XYZ </main>header{ border: 1px solid #f00; bac
2020-06-15 14:54:46
202
原创 混合器
文章目录混合器5-1. 何时使用混合器5-2. 混合器中的CSS规则5-3.给混合器传参5-4. 默认参数值混合器混合器使用@mixin标识符定义, 通过@include来使用这个混合器。@mixin main-color { color: #00f;}main{ font-size: 30px; @include main-color;}5-1. 何时使用混合器你是否为这个混合器想出一个好名字，如果你能找到一个很好的短名字来描述这些属性修饰的样式，那么往往
2020-06-13 16:04:22
265
原创 SCSS之静默注释
文章目录静默注释静默注释sass注释格式/…/的注释语法，即静默注释。其内容不会出现在生成的css文件中。main { color/* 这种注释内容会出现在生成的css文件中 */: #f00; // 这种注释内容不会出现在生成的css文件中 padding:10px; /* 这种注释内容会出现在生成的css文件中 */}编译之后的cssmain { color/* 这种注释内容会出现在生成的css文件中 */: #f00; padding: 10px; /*
2020-06-08 14:48:45
400
原创 导入SASS文件
文章目录3.导入SASS文件3-1.使用SASS部分文件3-2.默认变量值3-3.嵌套导入3-4.原生的CSS导入3.导入SASS文件3-1.使用SASS部分文件局部文件：不需要生成对应的独立css文件，这样的sass文件称为局部文件sass局部文件的文件名以下划线开头例如：_night-sky.scss,你在引用的时候可以省略文件名的下划线3-2.默认变量值!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。// _night-sky.
2020-06-07 17:10:38
328
原创 CSS之层叠
文章目录层叠1. 比较重要性2. 比较特殊性3. 比较源次序应用层叠声明冲突：同一个样式，多次应用到同一个元素层叠：解决声明冲突的过程，浏览器自动处理（权重计算）1. 比较重要性重要性从高到底：作者样式表： 开发者书写的样式1） 作者样式表中的!important样式2) 作者样式表中的普通样式3) 浏览器默认样式表中的样式2. 比较特殊性看选择器总体规则：选择器选中的范围越窄，越特殊具体规则：通过选择器，计算出一个4位数(xxxx)千位：如果是内联样式，记1， 否则记
2020-06-06 23:19:49
178
原创 嵌套CSS规则
嵌套CSS规则2. 嵌套CSS规则2-1. 父选择器的标识符&2-2. 群组选择器的嵌套2-3. 子组合选择器和同层组合选择器： >、+和 ~2-4. 嵌套属性2. 嵌套CSS规则2-1. 父选择器的标识符&伪元素 : hover <article> Lorem ipsum dolor sit amet <a href="https://www.sass.hk/guide">了解：父选择器的标识符&<
2020-06-05 16:59:08
1743
原创 CSS之常见样式声明
文章目录常见样式声明常见样式声明color元素内部的文字颜色预设值: 定义好的单词三原色，色值：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达，色值。rgb表示法：rgb（0，255，0）hex（16进制）表示法：#红绿蓝淘宝红：#ff4400， 缩写#f40黑色： #000000，缩写#000红色： #ff0000， 缩写#f00灰色：#ffffff， 缩写#fffbackground-color元素背景颜色font-size元素内部文
2020-05-31 11:42:55
285
原创 CSS之为网页添加样式
文章目录为网页添加样式术语解释选择器声明块CSS代码书写位置为网页添加样式术语解释 h1{ color: #ff0000; background-color: black; text-align: center; }CSS规则 = 选择器 + 生命块选择器选择器： 选中元素ID选择器：选中的是对应id值的元素元素选择器类选择器声明块出现在大括号中声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。C
2020-05-31 10:29:37
313
原创 HTML之元素包含关系
文章目录元素包含关系元素包含关系以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外。元素的包含关系由元素的内容类别决定。例如：查看h1元素中是否可以包含p元素总结：容器元素中可以包含任何元素a元素中几乎可以包含任何元素某些元素有固定的子元素（ul>li, ol>li, dl>dt>dd）标题元素和段落元素不能相互嵌套，并且不能包含容器元素...
2020-05-30 10:26:26
300
原创 HTML之容器元素
文章目录容器元素div元素语义化容器元素容器元素容器元素：改元素代表一个块区域，内部用于放置其它元素div元素没有语义语义化容器元素header： 通常用于表示页头，也可以用于表示文章的头部footer： 通常用于表示页脚，也可以用于表示文章的尾部article： 通常用于表示整篇文章section： 通常用于表示文章的章节aside：通常用于表示侧边栏...
2020-05-30 10:05:20
234
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人