定位的分类
<style>
.father {
width: 500px;
height: 700px;
border: 3px solid #000;
margin: 100px auto;
/* 设置绝对定位的参照物 */
position: relative;
}
.son1 {
width: 200px;
height: 200px;
background-color: red;
/* 通过position属性添加定位方式 */
/*
添加坐标的方式有： top上 right右 bottom下 left左
*/
/* position: relative;
right: 20px;
bottom: 20px; */
/* 如果绝对定位不加坐标，那么就相对于他原来的位置不变，只是脱标 */
position: absolute;
top: 10px;
right: -30px;
}
.son2 {
width: 300px;
height: 50px;
background-color: blue;
}
.ad {
width: 100px;
height: 300px;
background-color: orange;
position: fixed;
left: 0;
bottom: 0;
}
</style>
</head>
<body>
<!--
定位分为4类
1. static - 静态定位 默认的
2. relative - 相对定位 相对自己原来的位置 没有脱离标准流 开发时相对定位不会单独使用
3. absolute - 绝对定位 脱离标准流
- 如果没有设置参照物，那么绝对定位的参照物就是html根节点
- 设置参照物可以通过relative⭐ / absolute / fixed来设置参照物（离他最近的加了前面几个定位的祖先盒子）
记忆口诀： 子绝父相
4. fixed - 固定定位 相对的是浏览器的视口 脱离标准流
-->
<div class="father">
<div class="son1"></div>
<div class="son2">222</div>
</div>
<div class="ad"></div>
</body>
绝对定位的运用
<style>
aside {
width: 250px;
height: 800px;
background-color: pink;
/* 设置参照物 */
position: relative;
}
span {
background-color: red;
height: 100px;
line-height: 100px;
width: 30px;
text-align: center;
position: absolute;
top: 0;
right: -30px;
}
</style>
</head>
<body>
<aside>
<span> = </span>
</aside>
</body>
绝对定位的参照物
<style>
.one {
width: 800px;
height: 800px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
}
.two {
width: 600px;
height: 600px;
border: 1px solid red;
margin: 20px auto;
position: relative;
}
.three {
width: 100px;
height: 100px;
background-color: blue;
margin: 20px auto;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="one">
<div class="two">
<div class="three"></div>
</div>
</div>
</body>
绝对定位练习
<style>
.box {
width: 100px;
height: 60px;
background-color: pink;
/* 参照物 */
position: relative;
}
.box span {
width: 70px;
position: absolute;
top: -10px;
left: 50%;
/* 如何挪一半？？ */
margin-left: -35px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<span>海量更新</span>
</div>
</body>
定位的层级问题
<style>
.one,
.two,
.three {
width: 200px;
height: 200px;
position: absolute;
background-color: blue;
}
.one {
top: 20px;
left: 20px;
z-index: 1000;
}
.two {
top: 40px;
left: 40px;
background-color: pink;
/*
通过z-index属性提升堆叠层级
*/
z-index: 999;
}
.three {
top: 60px;
left: 60px;
background-color: yellow;
}
/*
只有加了非static定位的盒子，都有堆叠层级 z-index 。默认后面的定位盒子会压住前面的定位盒子
*/
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
定位居中练习
<style>
.father {
width: 400px;
height: 500px;
background-color: pink;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
/* 方法1：计算绝对的距离 */
/* top: 150px;
left: 100px; */
/* 方法2：利用50%和负的margin实现 */
/* top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px; */
/* 方法3：利用50%和位移的50%实现 */
left: 50%;
top: 50%;
/* translate代表平移，-50% 代表盒子宽高的一半，方向为负方向 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
图片和文字垂直居中
<style>
.box {
width: 100px;
height: 30px;
/* 不要设置这个line-height 不然不是绝对的居中 */
/* line-height: 30px; */
font-size: 12px;
background-color: pink;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<img src="./user.png" alt="">xxx
</div>
光标类型
<style>
div {
width: 100px;
height: 10px;
background-color: pink;
/* 光标样式 pointer小手 not-allowed禁止 move可以移动*/
cursor: pointer;
}
</style>
</head>
<body>
<div>
</div>
</body>
圆角
<style>
section {
width: 200px;
height: 100px;
background-color: blue;
/* 通过border-radius 设置圆角的半径 */
/* border-radius: 10px 20px 30px 50px; */
/* 胶囊形状 圆半径设置为高度的一半 */
/* border-radius: 50px; */
/* 回椭圆的圆角 */
border-radius: 50px 50px 50px 50px / 10px 10px 10px 10px;
}
</style>
</head>
<body>
<section></section>
</body>
溢出隐藏
<style>
.box {
width: 100px;
height: 60px;
background-color: pink;
/* 参照物 */
position: relative;
overflow: hidden;
}
.box span {
width: 70px;
position: absolute;
top: -10px;
left: 50%;
/* 如何挪一半？？ */
margin-left: -35px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<span>海量更新</span>
</div>
</body>
隐藏元素
<style>
.one {
width: 100px;
height: 100px;
background-color: pink;
/* visibility: hidden; 隐藏元素 但是元素位置还在 visible 表示显示*/
/* visibility: hidden; */
/* opacity 透明度 取值0-1 0表示全透明 1表示不透明 元素位置还在*/
/* opacity: 0; */
/* display: none; 隐藏元素 元素的位置也不在了 dispaly: block；可以显示元素 */
display: none;
}
.two {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
