CSS——定位
布局方式：盒模型，浮动，定位，弹性盒子····
一、定位简介
定位是一种布局方式 ，是一种高级的布局方式，可以将元素放在页面的任意位置
- 注意
定位不能滥用，定位只做一些特殊位置的调整，
大的布局还是得以盒模型、浮动、弹性盒子为主
二、定位的特点
1、都是配合偏移量使用
2、相对定位、粘滞定位不会改变元素的性质，
绝对定位、固定定位会脱离文档流，改变元素的性质
3、都可以提高元素的层级
4、偏移原点不一样：相对定位是自己，绝对定位是包含块，粘滞和固定是整个页面
三、开启定位
开启定位：position：；
- 可选值
（1）不开启定位：static 默认值
（2）开启定位：
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘滞定位
四、偏移量
left：元素偏移原点左侧的距离，正值：元素向右，负值：元素向左
right：元素偏移原点右侧的距离，正值：元素向左，负值：元素向右
top：元素偏移原点上侧的距离，正值：元素向下，负值：元素向上
bottom：元素偏移原点下侧的距离，正值：元素向上，负值：元素向下
五、各种定位不同的特点
（一） 开启相对定位：position：relative；
1、开启相对定位后，需要配合偏移量去移动元素的位置
2、相对定位的偏移原点：在元素原来在文档流中的位置
3、相对定位并不会改变元素的性质
4、开启相对定位后，元素的层级会提高
（二）开启绝对定位：position: absolute;
- 特点：
1、绝对定位，也需要配合偏移量移动位置
2、绝对定位下，元素会脱离文档流，元素的性质发生了变化，不再区分块、行内、行内块
3、元素的层级提高了
4、绝对定位的偏移原点:是其包含块
一般情况下，我们给子元素开了绝对定位，就会同时给父元素开相对定位，这叫：“子绝父相”，但具体还是要看开发需要
- 为什么开相对定位：
相对定位，只要你不写偏移量，开不开，对当前元素没有影响
- 包含块的概念：
不开定位：包含块就是其父元素
开启定位：包含块是离它最近的，开了定位的，祖先元素，
如果其祖先元素都没开定位，包含块就是根标签，即整个页面
- 注意：
定位需要配合偏移量移动位置，如果偏移量是一个比较大，难算的值，
首先得考虑是否是偏移原点没找好
如果偏移量都是比较大得绝对值，后期很可能会出bug
（三）开启固定定位: position：fixed;
- 特点：
1、 固定定位需要配合偏移量使用
2、固定定位后，元素脱离文档流，元素得性质发生变化
3、元素得层级提高
4、 固定定位后，不会随着滚动条得滚动而滚动
5、偏移原点 :整个页面
- 应用场景：
导航、广告，侧边导航等位置
（四）开启粘滞定位:position：sticky;
- 特点：
1、元素位置:需要配合偏移量使用，监测偏移量
当元素没有到达偏移量时。会随着滚动条的滚顶而滚动
到达设置的偏移量后，就固定不动了
2、元素的性质没有发生变化
- 注意：
粘滞定位只在当前父元素内生效，当页面超过当前父元素，元素还是会随着滚动条滚动
- 应用场景：
导航、侧边导航
六、元素水平垂直居中的6种方式
1、方式一：绝对定位+ margin: auto（子元素需固定宽高）
原理：绝对定位将子元素拉伸至与父容器相同大小，margin: auto 让浏览器自动分配剩余空间，实现居中。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box1 {
width: 400px;
height: 400px;
background-color: palegreen;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
</style>
</head>
<body>
<div class="box1">
<div class="box2">你好</div>
</div>
</body>
</html>
2、方式二：绝对定位 + 负 margin（子元素需固定宽高）
原理：left: 50% 让子元素左上角位于父容器中心，再通过负边距拉回自身宽高的一半，达到精确居中。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box1 {
width: 400px;
height: 400px;
background-color: palegreen;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">你好</div>
</div>
</body>
</html>
3、方式三：绝对定位+设置变形：平移
原理：translate(-50%, -50%) 相对于元素自身宽高进行偏移，无需知道子元素具体尺寸，是最常用的方法之一。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box1 {
width: 400px;
height: 400px;
background-color: palegreen;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">你好</div>
</div>
</body>
</html>
4、方式四：利用单元格
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box1 {
width: 400px;
height: 400px;
background-color: palegreen;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
display: inline-block;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">你好</div>
</div>
</body>
</html>
5、方式五：Flex 布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box1 {
width: 400px;
height: 400px;
background-color: palegreen;
display: flex;
justify-content: center;
align-items: center;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">你好</div>
</div>
</body>
</html>
6、方式六：利用网格
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.box1 {
width: 400px;
height: 400px;
background-color: palegreen;
display: grid;
justify-content: center;
align-items: center;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">你好</div>
</div>
</body>
</html>
七、绝对定位元素的水平布局
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=父元素的宽度
当开启绝对定位后，水平方向的布局等式就会加上left，right两个值，此时规则和之前一样，只是多添加了两个值（可设置auto的值margin width left right）
- 当发生过度约束时
1、没有auto
如果9个值中没有auto，则自动调整right值以使等式满足
2、一个auto
如果有auto，则自动调整auto的值以使等式满足 -
3、两个auto
margin 和width为auto， 调整width
margin 和left，right其中一个值为auto，调整的是left/right
width 和left，right其中一个值，调整的是left/right
left，right都为auto ，调整的是right
4、三个auto
margin width 和left，right其中一个值为auto，调整left/right
width left right ，调整的是right
5、四个值auto
调整的是right
- 优先级：
right>left>width>marign
如果四个值中，width left right top bottom都为固定值，
margin为auto，会均分四个方向值，使元素水平垂直居中
八、图标字体（iconfont）
在网页中经常需要使用一些图标，可以通过图片来引入图标，但图片本身比较大，也不灵活
所以使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入
这样我们就可以通过使用字体的形式来使用图标
1、第一种方式 ： 转义字符形式
<div class="iconfont">购物车</div>
<div class="iconfont">个人中心</div>2、第二种方式 ： 类名形式 （常用）
<div class="box"><i class="iconfont icon-cart s1"></i>购物车</div>
<div><i class="iconfont icon-icon-person-renwu"></i>个人中心</div>3、第三种方式 ：伪类 （了解）
.location::before {
content: "\e651";
font-family: "iconfont";
}
<div class="location">定位</div>九、层级
z-index: ;
- 可选值：
是正整数，值越大，层级越高，默认是0
- 注意：
1、使用前提：要开启定位
2、父元素的层级再高，也不会覆盖子元素
3、如果定位元素的层级一样，则下边的元素会盖住上边的
十、设置透明效果
- 面试题：设置透明方式有哪些？他们的区别是什么？
三种方式设置透明
1、opacity用来设置元素的不透明级别，从 0.0 （完全透明）到 1.0（完全不透明）。
2、transparent是颜色的一种，这种颜色叫透明色。
3、rgba(r,g,b,a)稍复杂一点，r：红色值；g：绿色值；b：蓝色值；a：alpha透明度。
取值0~1之间。0表示完全透明的像素，1表示完全不透明的像素。
区别：
1、transparent、rgba(r,g,b,a)是样式值，opacity是样式名
2、opacity可以给任意元素设置，transparent、rgba(r,g,b,a)只能在设置颜色的时候使用
3、opacity有继承，transparent、rgba(r,g,b,a)不能继承
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
15
0- 0
已为社区贡献3条内容
所有评论(0)