admin管理员组文章数量:1612097
一、position的属性
1.position: relative;相对定位
不影响元素本身特性, 不会使元素脱离文档流, 没有定位偏移量时对元素无影响(相对于自身原本位置进行偏移),
提升层级(用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值越大越在上面,z-index只能在position属性值为relative或absolute或fixed的元素上有效。) (两个都为定位元素,后面的会覆盖前面的定位)
2.position: absolute 绝对定位
使元素完全脱离文档流(在文档流中不再占位),使内联元素在设置宽高的时候支持宽高,使区块元素在未设置宽度时由内容撑开宽度,相对于最近一个有定位的父元素偏移(若其父元素没有定位则逐层上找,直到document——页面文档对象),相对定位一般配合绝对定位使用,提升层级
3.position: fixed 固定定位
生成固定定位的元素,相对于浏览器窗口进行定位。
4.position:static 默认值
默认布局。元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
5.position: sticky 粘性定位
粘性定位,该定位基于用户滚动的位置。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
z-index: 6;
遇到overflow:hidden,这个属性就挂了,也就是说,父级不能有溢出隐藏的这个属性!!!当然,overflow-y: auto情况下是可以用的。
目前测试的现代浏览器(IE除外的主流浏览器)均支持position:sticky。
二、主流浏览器的前缀及使用的内核
内核 | 浏览器 | css前缀 | 备注 |
Trident | IE | -ms- | 360安全浏览器:Trident内核 360极速浏览器:Trident、webkit双内核 搜狗浏览器:Trident+webkit双内核 |
Gecko | Firefox | -moz- | |
webkit | chrome、safari | -webkit- | |
Presto | opera | -o- |
三、文本溢出显示省略号
1、单行文本溢出
.hidden {
overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容)
white-space: nowrap;(设置文字在一行显示,不能换行)
text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪的文本)
}
2.多行文本溢出省略
.hidden {
-webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数,2 表示最多显示 2 行。为了实现该效果,它需要组合其他的 WebKit 属性)
display: -webkit-box;(和 1 结合使用,将对象作为弹性伸缩盒子模型显示 )
-webkit-box-orient: vertical;(和 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 )
overflow: hidden;(文本溢出限定的宽度就隐藏内容)
text-overflow: ellipsis;(多行文本的情况下,用省略号 “…” 隐藏溢出范围的文本)
}
- line-clamp 属性只在 webkit 内核的浏览器中支持
3.根据高度判断是否溢出
.hidden {
position: relative;
max-height: 80px;
line-height: 40px;
word-break: break-all; // 使用该属性,可使英文换行
overflow: hidden;
}
.hidden::after{
content: '...';
position: absolute;
top: 100%;
left: 100%;
width: 20px;
height: 20px;
transform: translate(-100%, -100%);
}
四、CSS元素/容器水平垂直居中
1.元素
(1)text-align (2)display:inline-block;vertical-align:middle
2.容器
方法一:position加margin
<style>
.wrap {
width: 200px;
height: 200px;
background: yellow;
position: relative;
}
.wrap .center {
width: 100px;
height: 100px;
background: green;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
<body>
<div class="wrap">
<div class="center">
</div>
</div>
</body>
方法二:display:table-cell
<style>
.wrap {
width: 200px;
height: 200px;
background: yellow;
display:table-cell;
vertical-align:middle;
text-align:center;
}
.wrap .center {
display: inline-block;
vertical-align:middle;
width:100px;
height:100px;
background:green;
}
</style>
<body>
<div class="wrap">
<div class="center">
</div>
</div>
</body>
方法三:position加 transform
<style>
.wrap {
width: 200px;
height: 200px;
background: yellow;
position:relative;
}
.wrap .center {
position:absolute;
background:green;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100px;
height:100px;
}
</style>
<body>
<div class="wrap">
<div class="center">
</div>
</div>
</body>
方法四:flex弹性布局
<style>
.wrap {
width: 200px;
height: 200px;
background: yellow;
display:flex;
align-items:center;
justify-content:center;
}
.wrap .center {
background:green;
width:100px;
height:100px;
}
</style>
<body>
<div class="wrap">
<div class="center">
</div>
</div>
</body>
方法五:纯position
.wrap {
background: yellow;
width: 200px;
height: 200px;
position: relative;
}
.center {
background: green;
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-50px;
}
方法六:兼容低版本浏览器,不固定宽高
<style>
.table {
height: 200px;/*高度值不能少*/
width: 200px;/*宽度值不能少*/
display: table;
position: relative;
float:left;
background: yellow;
}
.tableCell {
display: table-cell;
vertical-align: middle;
text-align: center;
*position: absolute;
padding: 10px;
*top: 50%;
*left: 50%;
}
.content {
*position:relative;
*top: -50%;
*left: -50%;
background: green;
}
</style>
<body>
<div class="table">
<div class="tableCell">
<div class="content">不固定宽高,自适应</div>
</div>
</div>
</body>
五、解决float的高度塌陷
https://blog.csdn/zuo_zuo_blog/article/details/115397640
六、BFC原理机制
https://blog.csdn/zuo_zuo_blog/article/details/115488299
七、什么是渐进增强(progressive enhancement)、优雅降级(graceful degradation)?
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 :一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。
八、字符串转数值的方法
九、数值转字符串的方法
toString()
toFixed(1) 保留几位
十、js处理数组的方法
https://wwwblogs/jinzhou/p/9072614.html
十一、JS排序方法
https://blog.csdn/zuo_zuo_blog/article/details/105454010
https://edu.csdn/course/detail/27220?utm_medium=distribute.pc_relevant_t0.none-task-course-2%7Edefault%7EOPENSEARCH%7Edefault-1.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant_t0.none-task-course-2%7Edefault%7EOPENSEARCH%7Edefault-1.control
十二、js对字符串的一些操作方法
https://wwwblogs/hellofangfang/p/8507707.html
十三、js对象合并的方法
需求:设有对象 o1 ,o2,需要得到对象 o3
方法1:使用JQuery的extend方法
jQuery.extend([deep], target, object1, [objectN]) 用一个或多个其他对象来扩展一个对象,返回被扩展的对象。
o3 = $.extend(o1, o2) // 合并 o1 和 o2, 将结果返回给 o3. 注意: 此时,o1 == o3! 即 o1 被修改
// 或
o3 = $.extend({}, o1, o2) // 合并 o1 和 o2, 将结果返回给 o3. 注意: 此时,o1 != o3! 即 o1 没有被修改
方法2:用 Object.assign()
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
console.info(o2); // { b: 2 }
console.info(o3); //{ c: 3 }
方法3:遍历赋值法
var extend=function(o,n){
for (var p in n){
if(n.hasOwnProperty(p) && (!o.hasOwnProperty(p) ))
o[p]=n[p];
}
};
十四、js三大弹出框
Window对象的可以不用window.来调用(因为window对象表示浏览器中打开的窗口,窗口只有一个是唯一的)所以window被称为顶级对象
alert()显示带有一段消息和一个确认按钮的警告框。
alert()显示带有一段消息和一个确认按钮的警告框。
prompt用于显示可提示用户进行输入的对话框。
十五、指定区间范围随机数
function randomFrom(lowerValue,upperValue)
{
return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);
}
十六、js阻止冒泡事件和默认事件的方法
阻止默认事件
function stopDeFault(e){
if(e&&e.preventDefault){//非IE
e.preventDefault();
}else{//IE
window.event.returnValue=false;
}
}
阻止事件冒泡
function stopBubble(e){
if(e&&e.stopPropagation){//非IE
e.stopPropagation();
}else{//IE
window.event.cancelBubble=true;
}
}
十七、事件委托或事件代理
事件委托的原理:
事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。
为什么要用事件委托?
性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能
事件委托怎么实现案例
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(){
alert(123);
}
}
冒泡处理
由于冒泡原理,事件就会冒泡到ul上,因为ul上有点击事件,所以事件就会触发,Event对象提供了一个属性叫target,可以返回事件的目标节点,我们成为事件源,也就是说,target就可以表示为当前的事件操作的dom,但是不是真正操作dom,当然,这个是有兼容性的,标准浏览器用ev.target,IE浏览器用event.srcElement
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(123);
alert(target.innerHTML);
}
}
}
十八、长度单位有哪些
px:像素单位,和屏幕分辨率有关rem
rem: 相对单位,相对根节点html的字体大小,1rem = 16px
em: 相对于父节点的字体大小
vw和vh:是视口(viewport)单位,适合响应式布局,兼容性不好,1vw相当于页面宽度1%
十九、CSS优化的方法
删除一些空的规则
display一定不要使用
不滥用浮动
尽量避免使用过多的第三方字体
代码压缩合并,抽取一些公共样式
尽量减少页面的重绘
二十、回流与重绘
回流必将引起重绘,但重绘不一定会引起回流
回流:当元素的尺寸、结构等属性改变时,浏览器重新渲染部分或者全部文档的过程称为回流
重绘:当页面中元素的样式改变并不影响他在文档中的位置,浏览器会将新样式赋予元素并重新绘制。
二十一、post与get区别
1.get请求一般用去请求获取数据,post一般作为发送数据给后台
2.get请求也可以传参到后台,但是其参数在浏览器的地址栏url中可见,隐私安全性较差,参数长度有限制。post请求传递参数放在Request body中,不会在url中显示,比get要安全,并且参数长度无限制
3.get请求刷新浏览器或回退时没有影响,post回退时会重新提交数据请求。
4.get请求可被缓存,post请求不会被缓存
5.get请求保留在浏览器历史记录中,post请求不会保留
6.get请求只能进行url编码,post请求支持多种编码方式
底层思想
post和get请求都是http的请求方式,底层实现都是基于TCP/IP协议
get请求会产生一个TCP数据包,浏览器会把http,header,data一并发送出去,服务器响应200
post会产生两个TCP数据包,浏览器会先发送header,服务器响应100继续,浏览器在发送数据data,服务器响应200
二十二、防抖与节流
https://blog.csdn/zuo_zuo_blog/article/details/109147756
二十三:判断一个变量是不是数组
二十四:网页性能优化
优化html和css代码,对代码做压缩合并
CSS避免使用过多的嵌套
减少页面的http请求次数
使用精灵图片雪碧图
图片懒加载
使用一些性能分析工具对优化效果做检测
字体使用原始的
二十五:闭包
https://wwwblogs/huanghuali/p/9851453.html
二十六、var、let和const
var声明的全局变量,会有变量提升
let和const声明的局部变量,没有变量的提升,存在暂时性死区,不允许在声明之前使用,拥有局部作用域。
let和const定义的变量不能重复声明,会报错
let声明的变量不需要初始化,声明时候不需要立即赋值,const定义的变量是常量,声明时必须赋值,const定义基本类型的变量不允许重复赋值,一经赋值不能改变。引用类型是可以改变内部的值。
声明提升(变量提升),使用var声明的变量和函数会自动移动到代码的最前面
函数与变量相比,函数会被优先提升,可以在声明一个函数之前调用该函数
二十七:Vue声明周期钩子函数
二十八、ES6和CommonJs的区别
https://blog.csdn/qq_40922656/article/details/116014153
二十九、原型链
https://blog.csdn/zuo_zuo_blog/article/details/110555325
https://blog.csdn/iispring/article/details/62219444
三十、跨域处理
https://blog.csdn/zuo_zuo_blog/article/details/108104369
三十一、vuex
https://wwwblogs/mica/p/10757965.html
三十二、通信协议
IP:每台设备的唯一地址
TCP:面向连接,可靠(三次握手协议)
UDP:面向数据,不可靠
HTTP: 超文本传输协议(网页端传输协议,无状态协议,记不住状态)
三十三、数组去重
let person = [
{id: 0, name: "小明"},
{id: 1, name: "小张"},
{id: 2, name: "小李"},
{id: 3, name: "小孙"},
{id: 1, name: "小周"},
{id: 2, name: "小陈"},
];
let obj = {};
person = person.reduce((cur,next) => {
console.log(cur)
console.log(next)
obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
return cur;
},[]) //设置cur默认类型为数组,并且初始值为空的数组
console.log(person)
const arr = ['张三','张三','三张三']
let set = new Set(arr); // set 自带去重
// Set { '张三', '三张三' }
console.log(set);
console.error(Array.from(set)); // [ '张三', '三张三' ]
版权声明:本文标题:position的属性 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728603413a1165146.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论