88 lines
3.4 KiB
HTML
88 lines
3.4 KiB
HTML
<!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>Document</title>
|
|
<style>
|
|
/* 最终的宽 = 宽(100) + 左右边框(20) + 左右内边距(20)=140
|
|
注意:margin是外边距,并不影响实际宽高,也只有它不影响宽高
|
|
|
|
但每次计算都很麻烦能不能不自己手动计算,让电脑自动计算?
|
|
答案是有的,添加box-sizing:border-box,比如你设置一个盒子宽高为100*100,无论你再怎么加padding,border,他的实际宽高都是100*100
|
|
他会根据你输入的padding和margin自动减内容*/
|
|
.a{
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: red;
|
|
border: 10px solid blue;
|
|
margin: 10px;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="a"></div>
|
|
|
|
|
|
---------------------------------------
|
|
<!-- flot设计的初衷就是环绕文字的,所以文字不会被压在底下 -->
|
|
|
|
定位:1.相对定位 position: relative;
|
|
元素会脱离标准流,保留原来的位置不会被删除
|
|
在移动元素的时候,参照点是自己原来的位置
|
|
|
|
2.绝对定位 position: absolute;
|
|
元素会脱离标准流,不保留原来的位置
|
|
绝对定位在移动元素的时候,是看看父元素是否有定位,有就以该元素为参照点去移动,
|
|
没有就向上一级去查找,有就以该元素为参照点去移动,还没有在往上查找,如果上面都没有,就以body为参照点去移动
|
|
|
|
总结:相对定位 position: relative;是当爹的一个过程.而绝对定位 position: absolute;是找爹的过程,没找到爹就以body为爹
|
|
一般实际开发中,都是子元素绝对定位,父元素相对定位
|
|
|
|
3.固定定位 position: fixed;
|
|
固定在可视区域的摸个地方
|
|
|
|
层级 z-index:数值
|
|
注意:该数值越大,就越往上,值越小可以越往下,可以是负值哦,而且z-index是会相互影响的
|
|
|
|
思考?现在是否可以实现把红色盒子夹在俩个盒子中间?答案是不行的,
|
|
最初的想法是给a3的z-index数值最大,其次是a1的z-index数值第二大,最后是a2的z-index的数值最小
|
|
但结果是不行的,最后是以父盒子a2为准,子盒子a3继承了父盒子a2.
|
|
<style>
|
|
.a1{
|
|
width: 100px;
|
|
height: 100px;background-color: red;
|
|
float: left;
|
|
position: relative;
|
|
left: 30px;
|
|
|
|
}
|
|
.a2{
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: blue;
|
|
float: left;
|
|
position:relative;
|
|
}
|
|
.a3{
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: pink;
|
|
float: left;
|
|
position: absolute;
|
|
left: 10px;
|
|
}
|
|
</style>
|
|
<div class="a0">
|
|
<div class="a1">a1</div>
|
|
<div class="a2">a2
|
|
<div class="a3">a3</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |