position的属性

最新推荐文章于 2021-12-07 11:23:51 发布

zuo_zuo_blog

最新推荐文章于 2021-12-07 11:23:51 发布

阅读量1.1w

点赞数 7

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/115466127

版权

HTML/CSS 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

一、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.net/zuo_zuo_blog/article/details/115397640

六、BFC原理机制

https://blog.csdn.net/zuo_zuo_blog/article/details/115488299

七、什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）？

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

八、字符串转数值的方法

九、数值转字符串的方法

toString()

toFixed(1) 保留几位

十三、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()显示带有一段消息和一个确认按钮的警告框。

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.net/zuo_zuo_blog/article/details/109147756

二十三：判断一个变量是不是数组

二十四:网页性能优化

优化html和css代码，对代码做压缩合并
CSS避免使用过多的嵌套
减少页面的http请求次数
使用精灵图片雪碧图
图片懒加载
使用一些性能分析工具对优化效果做检测
字体使用原始的

二十五：闭包

https://www.cnblogs.com/huanghuali/p/9851453.html

二十六、var、let和const

var声明的全局变量，会有变量提升
let和const声明的局部变量，没有变量的提升，存在暂时性死区，不允许在声明之前使用，拥有局部作用域。
let和const定义的变量不能重复声明，会报错
let声明的变量不需要初始化，声明时候不需要立即赋值，const定义的变量是常量，声明时必须赋值，const定义基本类型的变量不允许重复赋值，一经赋值不能改变。引用类型是可以改变内部的值。

声明提升（变量提升），使用var声明的变量和函数会自动移动到代码的最前面
函数与变量相比，函数会被优先提升，可以在声明一个函数之前调用该函数

二十七：Vue声明周期钩子函数

二十八、ES6和CommonJs的区别

https://blog.csdn.net/qq_40922656/article/details/116014153

二十九、原型链

https://blog.csdn.net/zuo_zuo_blog/article/details/110555325

https://blog.csdn.net/iispring/article/details/62219444

三十、跨域处理

https://blog.csdn.net/zuo_zuo_blog/article/details/108104369

三十一、vuex

https://www.cnblogs.com/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)); // [ '张三', '三张三' ]

zuo_zuo_blog

关注

7
点赞
踩
43

收藏

觉得还不错? 一键收藏
0
评论
position的属性

1.position: relative;相对定位不影响元素本身特性，不会使元素脱离文档流，没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移），提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。）（两个都为定位元素，后面的会覆盖前面的定位）2.position: absolute 绝对定位使元素完全脱离文档流（在...
复制链接

扫一扫