admin管理员组文章数量:1794759
position的属性
一、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的高度塌陷blog.csdn/zuo_zuo_blog/article/details/115397640
六、BFC原理机制blog.csdn/zuo_zuo_blog/article/details/115488299
七、什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）？渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
八、字符串转数值的方法 九、数值转字符串的方法toString()
toFixed(1) 保留几位
十、js处理数组的方法wwwblogs/jinzhou/p/9072614.html
十一、JS排序方法blog.csdn/zuo_zuo_blog/article/details/105454010
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对字符串的一些操作方法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
二十二、防抖与节流blog.csdn/zuo_zuo_blog/article/details/109147756
二十三：判断一个变量是不是数组 二十四:网页性能优化优化html和css代码，对代码做压缩合并 CSS避免使用过多的嵌套 减少页面的http请求次数 使用精灵图片雪碧图 图片懒加载 使用一些性能分析工具对优化效果做检测 字体使用原始的
二十五：闭包wwwblogs/huanghuali/p/9851453.html
二十六、var、let和constvar声明的全局变量，会有变量提升 let和const声明的局部变量，没有变量的提升，存在暂时性死区，不允许在声明之前使用，拥有局部作用域。 let和const定义的变量不能重复声明，会报错 let声明的变量不需要初始化，声明时候不需要立即赋值，const定义的变量是常量，声明时必须赋值，const定义基本类型的变量不允许重复赋值，一经赋值不能改变。引用类型是可以改变内部的值。
声明提升（变量提升），使用var声明的变量和函数会自动移动到代码的最前面 函数与变量相比，函数会被优先提升，可以在声明一个函数之前调用该函数
二十七：Vue声明周期钩子函数 二十八、ES6和CommonJs的区别blog.csdn/qq_40922656/article/details/116014153
二十九、原型链blog.csdn/zuo_zuo_blog/article/details/110555325
blog.csdn/iispring/article/details/62219444
三十、跨域处理blog.csdn/zuo_zuo_blog/article/details/108104369
三十一、vuexwwwblogs/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的属性 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686984183a125434.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论