做网站公司多少钱,wordpress 清空修订版本,腾讯邮箱注册,网站app开发一站式服务一、盒模型
标准盒模型#xff1a;box-sizing: content-box。
外边距边框内边距内容区。
IE盒模型#xff0c;怪异盒模型#xff1a;box-sizing: border-box。
外边距内容区#xff08;边框内边距内容区#xff09;。
二、CSS特性
继承性: 父元素的字体大小#xf…一、盒模型
标准盒模型box-sizing: content-box。
外边距边框内边距内容区。
IE盒模型怪异盒模型box-sizing: border-box。
外边距内容区边框内边距内容区。
二、CSS特性
继承性: 父元素的字体大小字体颜色行高displaynone...也会出现在子元素上。
优先级: 谁的权重高就显示谁的样式。
!important 内联 ID class 属性 伪类 元素 继承 通配 vue中有深度选择器 deep
层叠性: 多个CSS声明应用在同一个元素时权重相加决定最终样式
预处理器 sass less 预处理器 变量 函数 混入全局颜色css原子化
1、变量的声明
声明变量的时候变量名前面要加两根连词线 --。使用变量用var()函数。style
body{--foo:red;
}p{color: var(foo);
}
/style2、变量的继承
style
body{--foo: red;
}p{--foo: initial;
}
/style3、js控制css变量
通过js的dom节点对象可以获取和修改当前节点的css变量值。获取css变量getPropertyValue(--name)
设置css变量setProperty(--name, value)div idheaderhello world/divstyle
#header {--bgColor: #ffffff;
}
/stylescriptlet dom document.getElementById(header);// 获取css变量let color dom.getPropertyValue(--bgColor).trim();// 设置css变量dom.setProperty(--bgColor, #f34e25);
/scriptcss函数1、var变量函数作用引用自定义的变量值。
第一个参数引用的变量名称第二个参数回退值表示如果第一个参数未定义
使用回退值代替。body {// 定义变量bgColor--bgColor: #ffffff;// 背景色取变量--bgColor的值如果未定义则取redbackground-color: var(--bgColor, red);
}2、calc 主要通过简单的数学计算进行一些单位的计算表达式支持加、减、乘、除。3、min(val1... valN)接受任意数量的参数每个参数也可以是表达式。取出参数中最小的值。
max(val1...valN)同上取最大的值。4、:where伪类选择器函数
作用:where()函数实际是一个高级的伪类选择器他的作用是将一系列的选择器列表
都应用相同的样式简化多个选择器样式编码的流程。
:where(class1,...classN) { css样式 }- 接受n个参数参数值为选择器任意的css选择器// 传统方式
.main span {font-size: 12px;
}
.line span {font-size: 12px;
}// 如果有大量样式相同选择:where函数选择器终极版
:where(.main, .line) span {font-size: 12px;
}5、:is伪类选择器函数
作用与:where()函数选择器用法一致。
优先级不同。:where()函数选择器的优先级总是为0即使他的样式代码在最下面
而:is()函数选择器的优先级取决于他的参数选择器列表中最高的选择器
.main span {font-size: 12px;
}:is(.main) span {font-size: 13px;
}span {font-size: 14px;
}:where(.main) span {font-size: 15px;
}
:where()优先级最低其次是span选择器第一个选择器和:is()函数选择器的优先级都是.main span
因此他们优先级一致但是因为is()函数在下面因此font-size为13px。
sass1、使用变量 $
$aaa: 16px;
.fontSize {font-size: $aaa;
}2、extend 继承
.success{color:green;
}
.msg{extend .success;color: #555555;
}3、if
当 if 的表达式返回值不是 false 或者 null 时条件成立输出 {} 内的代码
p{$num : 3;if $num 1 {color:red;}else{border:red;}
}4、for
指令可以在限制的范围内重复输出格式每次按要求变量的值对输出结果做出变动。
for $i from 1 through 3 {.item-#{$i} {width: 2em * $i;}
}
上面等于
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; } 三、隐藏元素的方法
display:none;元素在页面上消失不占据空间
visibility:hidden; 让元素消失占据空间位置一种不可见的状态
opacity:0; 设置了元素的透明度为0元素不可见占据空间位置
position:absolute; 使用定位让元素移到页面之外
四、px、rpx、vw、vh、em、rem
px绝对长度、固定单位无法根据页面的大小而改变
rpx: 小程序独自有的
vwviewpoint width视窗宽度1vw等于视窗宽度的1%。
vhviewpoint height视窗高度1vh等于视窗高度的1%。
em和rem相对长度适用于响应式布局em的大小相对于父元素大小而改变rem的大小相对于根元素的大小而改变
据不同屏幕的宽度以相同的比例动态修改html的font-size适配并将px替换成rem它可以很好的根据根元素的字体大小来进行变化从而达到各种屏幕基本一直的效果体验
配置rem
window.onload () { document.documentElement.style.fontSize window.innerWidth / 375 * 100 px; }
window.onresize () { document.documentElement.style.fontSize window.innerWidth / 375 * 100 px; }
五、重排重绘
重排回流布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小对DOM的大小、位置进行修改后浏览器需要重新计算元素的这些几何属性就叫重排。减少重排可以增强浏览器效率。
重绘计算好盒模型的位置、大小和其他一些属性之后浏览器就会根据每个盒模型的特性进行绘制对DOM的样式进行修改比如color和background-color浏览器不需要重新计算几何属性的时候直接绘制了该元素的新样式那么这里就只触发了重绘
六、元素水平垂直居中
1、定位 margin
2、定位 transform
3、flex布局
4、gird布局
5、table布局
七、响应式开发移动端适配
1、使用rem、em、vw、vh、百分比、flex、media媒体查询等布局
2、监听是手机端打开还是PC端打开配置两套路由或样式
3、监听页面窗口大小配置多套样式
八、JS三部分
1、ECMAScriptJS的核心内容描述了语言的基础语法。
2、文档对象模型DOMDOM把整个HTML页面规划为元素构成的文档。DOM 文档对象模型就是一个API可以通过操作这些API在页面上进行绘制节点设置节点的属性和内容。
例如document.getElementById(app)document.createElement(hr)app.appendChild(hr)app.setAttribute(class, aaa);
3、浏览器对象模型BOM对浏览器窗口进行访问和操作。BOM 浏览器对象模型可以用来操作浏览器的打开、关闭、重加载等。
例如location 当前页面的地址history 浏览器浏览过的历史navigator 浏览器当前的用户设备信息window 浏览器的高度、宽度。浏览器的滚动和打印功能......
九、JS部分内置对象
String、Boolean、Number、Array、Object、Function、Math、Date、RegExp...
Mathabs() 函数返回绝对值 sqrt() 接受一个非负正数返回平方根 max() 最大值 min() 最小值......
Datanew Data() 获取当前时间戳 getYear() 获取年份 ......
十、数组方法
1、改变原数组push 最后面加一个、pop 最后面删一个、unshift 最前面加一个、shift 最前面删一个、sort 排序、splice 可以删除替换增加元素
2、不改变原数组reverse 反转顺序、concat 合并数组、join 将元素拼接成字符串、isArray 判断一个值是否为数组、findIndex 返回满足指定条件的第一个元素的索引如果没有找到则返回 -1。
map创建一个新数组其元素是原数组经过指定函数处理后的结果。
const numbers [1, 2, 3, 4, 5];
const squares numbers.map(num num * num);
console.log(squares); // 输出: [1, 4, 9, 16, 25]
filter创建一个新数组其中包含原数组中满足指定条件的所有元素。
let arr [1, 2, 3, 4, 5];
let evenNumbers arr.filter(item item % 2 0);
console.log(evenNumbers); // 输出 [2, 4]
every判断数组中所有元素是否都满足指定条件如果是则返回 true否则返回 false。
let arr [2, 4, 6, 8, 10];
let allEven arr.every(item item % 2 0);
console.log(allEven); // 输出 true
some判断数组中是否存在满足指定条件的元素如果有则返回 true否则返回 false。
let arr [1, 3, 5, 7, 8];
let hasEven arr.some(item item % 2 0);
console.log(hasEven); // 输出 true
reduce将数组中的元素通过指定函数进行累积计算返回一个最终的结果。
let arr [1, 2, 3, 4, 5];
let sum arr.reduce((acc, curr) acc curr, 0);
console.log(sum); // 输出 15
为什么调用接口时用 push 而不用 concat
因为 push 是改变原数组而 concat 是生成新数组。 for 数组、forEach 数组、for of 数组、for in 数组和对象都能遍历
let arr [ a, b, c, d, e ];
let obj { a: 1, b: 2, c: 3 }
for(let i 0; i arr.length; i){ console.log(i, arr[i]) // 下标 值
}
arr.forEach((item, index) { console.log(item, index) // 值 下标
})
for(let i of arr){ console.log(i) //值
}
for(let i in arr){ console.log(i, arr[i]) // 下标 值
}
for(let i in obj){ console.log(i, obj[i]) // 键 值
}
for、forEach差别forEach 无法使用 break、return、continue 进行中断操作或跳出循环。只能使用 try、catch 中断抛出异常。for循环能控制起点forEach 不能必须从第一个开始。运行速度for forEach
try {arr.forEach((item, index) {if (item 1) {throw new Error(打断施法)}})
} catch (e) {if (e.message ! 打断施法) {throw e}
}
forEach 和 map 的区别
1、forEach()方法没有返回值会更改原数组。
2、map() 有返回值返回一个新数组不会改变原数组map() 不会对空数组进行检测。
3、map 的速度大于 forEach() find用于找出第一个符合条件的数组成员,并且返回该数组元素如果没有满足条件的数组元素该方法返回undefined。
let arr1 [1, 2, 3, 4, 5]
let num1 arr1.find(function(item) {return item 1;
});
console.log(num1); //2
findIndex用于找出第一个符合条件的数组成员的索引值,并且返回该数组元素的索引值。如果没有满足条件的数组元素该方法返回-1。
let arr2 [1, 7, 9, 4, 5]
let num1 arr2.findIndex(item item 9);
console.log(num1); //-1
let num2 arr2.findIndex(item item 3);
console.log(num2); //2
includes判断数组是否包含指定值—是全等判断第一个值是包含的指定值第二个值是指定值的索引。
let arr4 [2, 3, 4, 7, 5]
let flag arr4.includes(2);
console.log(flag); //true
let flag1 arr4.includes(3, 1);
console.log(flag1); //true VUE项目每次打包的版本号是可以配置不同编码的。这样的话不用线上强制刷新。
