本文主要是介绍盒子模型——网页布局、定位、光标样式、背景不透明度、格式化列表（ul、ol）样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
一、定位
浮动和定位的区别：
编辑
二、边偏移：
三.定位模式：
1.static 静态定位（不常用）
2.relative相对定位:
相对定位的特点：
3.absolute 绝对定位
绝对定位的特点：
子绝父相
4.fixed 固定定位
固定定位的特点：
5. 粘性定位（不太常用）
四、调节Z轴上的层级关系：
五、如何让块元素始终处于浏览器中心
六、格式化列表样式、不透明度设置、光标（鼠标）样式
list-style:none 列表样式无
opacity 不透明度 取值范围 [0,1]
光标样式
前言：网页布局常用到定位，并且与浮动等内容结合使用
一、定位
简单概述：定位=定位模式+边偏移
定位 定位模式 边偏移 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）_又菜又爱玩的程序猿的博客-CSDN博客_粘性定位粘性定位可以被认为是相对定位和固定定位的混合（即元素子再跨越特定阈值前为相对定位，之后为固定定位）例如：.div{ position: sticky; top: 10px; }在 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下一、应用场景：1、粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上2、当用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体.https://blog.csdn.net/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]
光标样式
cursor 光标样式
值：1）default 默认 白箭头
2）text 默认 文本工字型
3）wait 等待状态
4）help 帮助状态
5）pointer 链接样式 小手状
6）url("图片路径"),auto 自定义光标样式（图片过大或格式问题可能不成功）更多光标样式
这篇关于盒子模型——网页布局、定位、光标样式、背景不透明度、格式化列表（ul、ol）样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
