一、盒子的隐藏的三种方式
style{
.div1{
100px;
height:100px;
background:red;
#盒子隐藏的第一种方式：
#display:none;(将盒子的显示设置为none,盒子消失，也不会占位，盒子中的文本也会随之消失)
}
#盒子隐藏的第二种方式:
.div1{
background:rgba(0,0,0,0)(将盒子透明度设置为0，盒子消失，但盒子原有的位置还会存在，若盒子中存在文本，文本不会隐藏，透明度只是对盒子的背影色进行控制)
}
#盒子隐藏的第三种方式：
.div1{
opacity:0;(隐藏盒子及盒子中的文本信息，隐藏后的盒子还会占位,不会对其他的盒子产生影响，需采用动画处理)
}
.div2{
100px;
height:100px;
background:pink;
}
}
<div class="div1"></div>
<div class="div2"></div>
二、盒子显示的方式
style{
.inner{
100px;
height:100px;
background:red;
display:none;
}
.bottom{
100px;
height:100px;
background:pink;
}
.outer:hover .inner{
display:block;
}
}
<div class="outer">
<div class="inner">
</div>
</div>
<div class="bottom">
</div>
知识点1、
inline标签会继承父集的字体样式
知识点2、
对块级标签的父集进行浮动，父集会脱离文档流，继承子集撑开的宽度
知识点3、
浮动的盒子在没有设置width、height,默认为文本的撑开的高度
三、盒子的相对布局
1、相对定位
position:static(默认静态) | relative(相对定位) | absolute(绝对定位) | fixed(固定定位)
布局方向: left right top bottom
2、相对定位
style{
.box{
100px;
height:100px;
position:relative;
#top:50px;
#bottom:50px;
#left:50px;
#right:50px;(左右取左，上下取上)
#left=-right;
#top=-bottom;
}
}
<div class="box">
</div>
#参考系：自身原有位置，上下左右各自参照是的盒子自己的上下左右边界
style{
.box1{
100px;
height:100px;
background:red;
position:relative;
left:300px;
top:1000px;
}
.box2{
100px;
height:100px;
background:pink;
}
}
<div class="box1">
</div>
<div class="box2">
</div>
#对box1进行相对定位后，box2不会上移动,因为还占有位置，所以并没有脱离文档流
3、绝对定位
1）脱离文档流(参考系：参考最近的设置了定位的父集)
<style>
.outer{
100px;
height:100px;
background:red;
}
.inner{
50px;
height:50px;
background:pink;
position:absolute;#如果父集没有设置定位，就参考页面定位
}
</style>
<div class="outer">
<div class="inner">
</div>
</div>
<style>
.outer{
100px;
height:100px;
background:red;、
position:relative;
}
.inner{
50px;
height:50px;
background:pink;
position:absolute;#父集设置了定位，就参考父集定位
}
</style>
<div class="outer">
<div class="inner">
</div>
</div>
2）父集必须设置宽度
4、固定定位
1）参考系：页面窗口(应用广告)
<style>
.box{
100px;
height:100px;
background:red;
position:fixed;
top:100px;
left:100px;
}
</style>
<div class="box">
</div>
2)完全脱离文档流
3)相对于页面是静止的
四、z-index
<style>
.outer{
200px;
height:200px;
background:skyblue;
position:relative;
}
.box1{
100px;
height:100px;
background:red;
z-index:20;(默认为1，设置越大，就显示在最外层，当该值大于1，红色覆盖粉色，反之，粉色覆盖红色的)
}
.box2{
100px;
height:100px;
background:pink;
float:left;
}
.outer div{
position:absolute;
top:calc(100%-100px);#可以将父集宽度设置成100%，就会虽父集高度变化
}
</style>
<div class="outer">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
五、流式布局
思想：尽可能不用固定的属性值
概念：通过父集获得相应的属性
<Style>
html,body{
margin:0;
100%;
height:100%;
}
.box{
50%;
height:50%;
background:skyblue;
}
</Style>
<div class="box">
</div>
<Style>
html,body{
margin:0;
100%;
height:100%;
}
.box{
50%;
height:50%;
background:skyblue;
}
.box1{
50%wv;(widthview)#参考窗口
height:50hv;(heightview)
background:red;
#流式布局限制条件(最小只能600px,最大只能是800px)
max-800px;(最大的宽度)
min-600px;(最小的宽度)
}
</Style>
<div class="box"></div>
<div class="box1"></div>
通过em | rem进行流失布局
#rem只跟html的字体大小有关
<style>
.box{
1rem;
height:1rem;
background:red;
}
</style>
<div class="box1">
</div>