定位与几个常用的属性
定位分两部分
定位模式：
静态定位:static
(具备标准流的条件)
相对定位：relative 自恋狂 1.相对于自己原来的位置进行移动
2.不脱离标准流,占有原来的位置
绝对定位：absolute
1.如果没有父元素或者没有给父元素设置定位那么就会以浏览器定位
2.如果父元素以及之上的前辈(固定 相对 绝对关系)，则以最近一级有定位的父元素来作为参考
3.脱离标准流，不再占有原来的位置
固定定位：fixed
1.相对与浏览器的可视窗口来决定的
2.脱离标准流,不再占有原来的位置
固定定位的方式 小算法：先让可视窗口的百分之50，然后版心盒子的margin-left一半使小盒子到版心的右边的位置
粘性定位：sticky
1.以浏览器的可视窗口移动元素 2.占有原先的位置3.必须添加top left right bottom其中一个才有效
边偏移上下左右：确定该元素的最终的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位两部分组成 定位模式+边偏移上下左右</title>
<style>
/*body {*/
/* height: 3000px;*/
/*}*/
.box1{
position: relative;
top: 100px;
left: 50px;
width: 100px;
height: 100px;
background-color: deeppink;
}
.box2 {
width: 100px;
height: 50px;
background-color: #a180ff;
}
.father {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: #ff6b75;
}
.son {
/*父元素相对定位 子元素绝对定位 子绝父相*/
position: absolute;
left: 50px;
bottom: 50px;
width: 100px;
height: 100px;
background-color: #b9ffa7;
}
.dj {
position: fixed;
top: 0;
right: 0;
}
.box3 {
position: fixed;
left: 50%;
margin-left: 405px;
margin-top: 200px;
width: 50px;
height: 100px;
background-color: #ff171d;
}
.box4 {
width: 800px;
height: 500px;
margin: 0 auto;
background-color: magenta;
}
.box5 {
/* 粘性定位 */
position: sticky;
top: 0;
width: 800px;
height: 50px;
background-color: #84ffd2;
margin: 100px auto;
text-align:center ;
}
.box {
position: absolute;
top: 0;
left: 0;
}
.xiongda {
width: 200px;
height: 200px;
background-color: magenta;
z-index: 1;
}
.xionger {
width: 100px;
height: 100px;
background-color: lime;
z-index: 2;
}
.qiangge {
width: 50px;
height: 50px;
background-color: blue;
}
.boxes {
position: absolute;
left: 50%;
margin-left: -100px;
top:50%;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="father">
<div class="son"></div>
</div>
<div class="dj">
<img src="background-img-repeat.png" alt="">
</div>
<div class="box3"></div>
<div class="box4">版心的盒子 固定定位</div>
<div class="box5">粘性定位</div>
<div class="box xiongda">熊大</div>
<div class="box xionger">熊二</div>
<div class="box qiangge">光头强</div>
<p>怎么让绝对定位的盒子水平居中和垂直居中</p>
<div class="boxes"></div>
</body>
</html>
隐藏与显示的几个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示隐藏可见性</title>
<style>
.box1, .box2{
width: 100px;
height: 100px;
background-color: #ff5ab4;
}
.box1 {
/*隐藏 不占用原来的位置*/
/*display: none;*/
/*隐藏 但是要占用原来的位置*/
/*visibility: hidden;*/
/*溢出操作 会发生的情况*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="box1">
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。</div>
<div class="box2">2</div>
</body>
</html>
浙公网安备 33010602011771号