绝对定位元素布局
水平布局
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right
当开启决定定位后，水平方向的布局等式就会加上left，right两个值
此时规则和之前一样，只是多添加了两个值
当发生过度约束时
1:如果9个值中没有auto，则自动调整right值以使等式满足
2:如果有auto，则自动调整auto的值以使等式满足
可设置auto的值
margin width left right
四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,
若width left right都为0，margin会均分四个方向值
---两个auto的情况
margin 和width为auto，
margin 和left，right其中一个值为auto，
width 和left，right其中一个值，
left，right都为auto
---三个auto的情况
margin width left ===>
margin width right ===>
width left right ===>
---四个值auto的情况
总结：
1、优先级排序：right>left>width>margin
2、在绝对定位情况下，如何使元素水平垂直居中
四边偏移量为相同的固定值，margin为auto
面试题： 如何使一个元素水平垂直居中
1、开绝对定位的情况下，四边偏移量为相同的固定值，margin为auto
2、开绝对定位的情况下，left:50%;top: 50%;使用margin，使元素回退一半自身大小
3、开绝对定位的情况下，left:50%;top: 50%;使用平移，使元素回退一半自身大小
4、父元素转成单元格，设置水平垂直居中，同时将子元素设置为行内块元素
5、使用弹性盒子，设置主轴justify-content: center;居中，侧轴居中align-items: center;
css
.box1 {
width: 400px;
height: 400px;
background-color: palegreen;
/* position: relative; */
/* 将元素转成单元格 */
/* display: table-cell;
vertical-align: middle;
text-align: center; */
/* 情况五：通过父元素控制子元素的位置 */
display: flex;
justify-content: center;
align-items: center;
}
.box2 {
width: 100px;
height: 100px;
background-color: orange;
/* 情况一 */
/* position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto; */
/* 情况二 */
/* position: absolute;
left:50%;
top: 50%;
margin-top: -50px;
margin-left: -50px; */
/* 情况三 */
/* display: inline-block; */
/* 情况四 */
/* position: absolute;
left:50%;
top: 50%;
transform: translate(-50%,-50%); */
html
<body>
<div class="box1">
<div class="box2">11</div>
</div>
<table border="1">
<tr>
<td style="width: 100px; height: 100px; text-align: center; vertical-align: middle">1222</td>
</tr>
</table>
</body>层级
1.如果定位元素的层级是一样，则下边的元素会盖住上边的
2.通过z-index属性可以用来设置元素的层级
3.可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
4.层级越高，越优先显示
注意：
- 对于没有开启定位的元素不能使用z-index
2.父元素的层级再高，也不会盖住子元素
css
.box1 {
width: 200px;
height: 200px;
background-color: red;
/* position: relative; */
z-index: 99;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
left: 100px;
top: -100px;
/* 设置层级 */
z-index: 1;
}
.box3 {
width: 200px;
height: 200px;
background-color: yellowgreen;
position: relative;
left: 200px;
top: -200px;
/* 设置层级 默认值为0*/
z-index: 2;
}
.box4 {
width: 200px;
height: 200px;
background-color: orange;
position: relative;
z-index: 999;
}
.box5 {
width: 100px;
height: 100px;
background-color: skyblue;
position: relative;
z-index: 0;
}
html
<body>
<!-- <div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div> -->
<div class="box4">
4
<div class="box5">5</div>
</div>
</body>透明效果
设置元素的透明背景
opacity [əu'pæsiti] 可以用来设置元素背景的透明，
它需要一个0-1之间的值
0 表示完全透明
1 表示完全不透明
0-1之间 表示透明度
面试题：如何设置透明，他们的区别是什么？
rgba(255, 165, 0, 0) / transparent / opacity: 0;
1、rgba/transparent是样式值，必须跟在固定的样式名后，
opacity是样式名，可以设置在任意元素的样式
2、rgba/transparent没有继承，opacity有继承性
css
.box {
width: 200px;
height: 200px;
background-color: red;
}
.box1 {
width: 100px;
height: 100px;
background-color: orange;
/* background-color: rgba(255, 165, 0, 0); */
/* background-color: transparent; */
/* opacity: 0.5; */
}
html
<body>
<!-- <div class="box">
<div class="box1"></div>
</div> -->
<!-- 用opacity设置透明度 -->
<p style="background-color: red; opacity: 0.6">
（3）这是一个p标签，颜色red，opacity值为0.6
<span style="background-color: green"> 这是一个span标签，颜色green，opacity未设置 </span>
</p>
<!-- 用rgba设置透明度 -->
<p style="background-color: rgba(255, 0, 0, 0.6)">
3）这是一个p标签，颜色red，透明度为0.6
<span style="background-color: green">（这是一个span标签，颜色green，透明度未设置）</span>
</p>
</body>lable的使用
- <label>标签的作用是为鼠标用户改进了可用性，
2.当用户点击<label>标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；
3.< label> 标签的 for 属性应当与相关元素的 id 属性相同。
轮播图
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- 1.1、引入css文件 -->
<link rel="stylesheet" href="./swiper1/swiper-bundle.min.css" />
<!-- 1.2、引入js文件 -->
<script src="./swiper1/swiper-bundle.min.js"></script>
<style>
/* 3、设置轮播图的大小，默认是整个页面大小 */
.swiper {
width: 600px;
height: 300px;
border: 10px solid red;
}
.swiper img {
width: 100%;
height: 100%;
}
.swiper-button-next, .swiper-button-prev{
color: #000;
background-color: red;
}
.swiper-button-next:after, .swiper-button-prev:after{
font-size: 30px;
}
.swiper-pagination-bullet{
width: 15px;
height: 15px;
background-color: #000;
}
</style>
</head>
<body>
<!-- 2、引入swiper轮播图的html结构 -->
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/1.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="./img/2.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="./img/3.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="./img/4.jpg" alt="" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- 4、初始化swiper，启动js，注意，js需要放到结构的下方 -->
<script>
var mySwiper = new Swiper(".swiper", {
// 属性：属性值，属性：属性值，
// direction: "horizontal", // 垂直切换选项
loop: true, // 循环模式选项
// autoplay: true,//自动播放
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
// effect: "cards", //设置切换动画
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true,//点击分页器，控制切换
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>