绝对定位的盒子居中算法
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了绝对定位的盒子居中算法相关的知识，希望对你有一定的参考价值。
常见场景有单个盒子在浏览器窗口居中，子绝父相盒子嵌套居中。
代码描述：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
.box {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
.box_1 {
position: absolute;
left: 50%;
margin-left: -25px;
top: 50%;
margin-top: -25px;
width: 50px;
height: 50px;
background-color: rgb(69, 22, 240);
/* margin: 0 auto; */
}
</style>
</head>
<body>
<div class="box">
<div class="box_1">
</div>
</div>
</body>
</html>
场景描述：
此算法的优点是：
- 随着网页页面的大小，不变的是位置一直居中
- 对于一些行内元素加上 position就直接可以设置高度和宽度
- 块级元素添加绝对位置或者固定定位，盒子大小以内容多少为依据
- 浮动的元素，绝对定位（固定定位）的元素都不会触发外边距合并（塌陷）的问题
- 浮动的盒子会压住标准流下的盒子，但是不会把标准流里面的内容给压住，但是绝对定位（固定定位）会压住下面标准流的的所有内容（因为浮动最初的目的就是产生文字环绕效果）
综合案例
淘宝焦点图制作案例
代码描述：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: relative;
width: 520px;
height: 280px;
background-color: pink;
margin: 100px auto;
}
.box img {
width: 520px;
height: 280px;
}
.left,
.right {
position: absolute;
top: 50%;
margin-top: -15px;
width: 20px;
height: 30px;
background-color: rgba(0, 0, 0, .3);
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
}
.left {
left: 0;
border-radius: 0px 15px 15px 0;
}
.right {
right: 0;
border-radius: 15px 0px 0px 15px;
}
.bottom {
position: absolute;
left: 50%;
bottom: 10px;
margin-left: -35px;
width: 70px;
height: 13px;
background-color: rgba(255, 255, 255, .3);
border-radius: 7px;
}
li {
list-style: none;
}
.bottom li {
float: left;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fff;
margin: 3px;
}
.bottom .first {
background-color: #ff5000;
}
</style>
</head>
<body>
<div class="box">
<img src="images/TB.jpg" alt="">
<a href="#" class="left">
<</a>
<a href="#" class="right">
></a>
<ul class="bottom">
<li class="first"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
注意：层叠，优先级，属性集合定义，定位算法
以上是关于绝对定位的盒子居中算法的主要内容，如果未能解决你的问题，请参考以下文章