盒子模型——网页布局、定位、光标样式、pointer-event无视元素遮挡、背景不透明度、格式化列表（ul、ol）样式

简单概述：定位=定位模式+边偏移

定位定位模式边偏移
static 默认正常文档流定位 top上
relative 相对定位相对于原来的自己定位  占据页面内容空间 bottom下
position： absolute 绝对定位始终相对于有定位的父级元素定位  不占据页面内容空间 left左
fixed 固定定位始终相对于浏览器定位  不占据页面内容空间 right右
sticky 粘性定位

将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素最终位置

浮动和定位的区别：

1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子

2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子

二、边偏移：

边偏移就是定位的盒子移动到最终位置

top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

三.定位模式：

定位模式决定元素的定位方式他通过css的position属性来设置，它的值有四个：

static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

1.static 静态定位（不常用）

静态定位是元素的默认定位方式，无定位的意思

静态定位是按照标准流特性摆放位置，他没有偏移

很少用到

2.relative相对定位:

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

相对定位的特点：

1.他是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）

2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他，（不脱标，继续保留原来位置）

所以，

相对定位并没有脱标，他最典型的应用是给绝对当爸爸，用来限制绝对定位（子绝父相）

3.absolute 绝对定位

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

绝对定位的特点：

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器定位

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置（谁有定位找谁咯！找最近的！！！）就近原则

3.绝对定位不再占有原先的位置，脱离标准流

子绝父相

子级使用绝对定位，父级要使用相对定位

1.子级绝对定位，不会占位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子

2.父盒子需要加定位限制子盒子在父盒子内显示

3.父盒子布局时，需要占有位置，因此父亲只能是相对定位

4.fixed 固定定位

固定定位是元素固定于浏览器的位置

主要使用场景：可以在浏览器页面滚动时元素的位置不会变

固定定位的特点：

1.固定定位始终是相对于浏览器窗口为参照点移动定位

跟父元素没有任何关系

不随滚动条滚动

2.固定定位不再占有原先的位置

也会变成块级元素，直接修改宽度和高度

5. 粘性定位（不太常用）

作用：

1、粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上

2、当用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体验。

彻底理解粘性定位（position：sticky）_又菜又爱玩的程序猿的博客-优快云博客_粘性定位粘性定位可以被认为是相对定位和固定定位的混合（即元素子再跨越特定阈值前为相对定位，之后为固定定位）例如：.div{ position: sticky; top: 10px; }在视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下一、应用场景：1、粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上2、当用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体.https://blog.youkuaiyun.com/weixin_57585624/article/details/120116514

box {
     position: sticky;
     top:0px;
}

四、调节Z轴上的层级关系：

z-index z轴的堆叠顺序值越大越靠上（无单位）

五、如何让块元素始终处于浏览器中心

之前我们学到了让块元素水平居中，可使用 margin: 0 auto; 那么如何让块元素始终处于浏览器中心呢？

在学习定位后我们就可以解决此问题

给块元素添加绝对定位，并使得此块元素上下左右位置都设为0px，最后再添加margin：auto；

案例：

<head>
		<meta charset="utf-8">
		<title>十字架居中</title>
		<style type="text/css">
				.red {
					width: 50px;
					height: 300px;
					background-color: royalblue;
				}
				.blue {
					width: 300px;
					height: 50px;
					background-color: royalblue;
					top: 125px;
				}
				.red,.blue {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
				}
        </style>
</head>
<body>
				<div class="red">1</div>
				<div class="blue">2</div>
</body>

效果：

六、格式化列表样式、不透明度设置、光标（鼠标）样式

list-style:none 列表样式无
opacity 整体不透明度 取值范围 [0,1]

background-color: rgba(0, 0, 0, 0~1)：让背景透明度改变。

举例：
background-color: rgba(0, 0, 0, 0.3);
效果是改变背景透明度：

兼容ie8及以下版本 filter : alpha(opacity=数值) 数值取值范围[0,100]

pointer-event属性

pointer-event所有属性值详解http://t.csdnimg.cn/lfse2

pointer-event:none;元素不会成为鼠标事件的target，利用该属性可制作遮罩水印并不影响界面功能（点击）交互

光标样式

cursor 光标样式
值：1）default 默认白箭头
2）text 默认文本工字型
3）wait 等待状态
4）help 帮助状态
5）pointer 链接样式小手状
6）url("图片路径"),auto 自定义光标样式（图片过大或格式问题可能不成功）

定位	定位模式	边偏移
	static 默认正常文档流定位	top上
	relative 相对定位相对于原来的自己定位占据页面内容空间	bottom下
position：	absolute 绝对定位始终相对于有定位的父级元素定位不占据页面内容空间	left左
	fixed 固定定位始终相对于浏览器定位不占据页面内容空间	right右
	sticky 粘性定位

盒子模型——网页布局、定位、光标样式、pointer-event无视元素遮挡、背景不透明度、格式化列表（ul、ol）样式

一、定位

浮动和定位的区别：

二、边偏移：

三.定位模式：

1.static 静态定位（不常用）

2.relative相对定位:

相对定位的特点：

3.absolute 绝对定位

绝对定位的特点：

子绝父相

4.fixed 固定定位

固定定位的特点：

5. 粘性定位（不太常用）

四、调节Z轴上的层级关系：

五、如何让块元素始终处于浏览器中心

六、格式化列表样式、不透明度设置、光标（鼠标）样式

list-style:none 列表样式无 opacity 整体不透明度 取值范围 [0,1]

pointer-event属性

pointer-event:none;元素不会成为鼠标事件的target，利用该属性可制作遮罩水印并不影响界面功能（点击）交互

光标样式

list-style:none 列表样式无
opacity 整体不透明度取值范围 [0,1]