盒子的显隐及布局方法

一、盒子的隐藏的三种方式

style{
.div1{
width:100px;
height:100px;
background:red;
#盒子隐藏的第一种方式：
#display:none;(将盒子的显示设置为none,盒子消失，也不会占位，盒子中的文本也会随之消失)

}
#盒子隐藏的第二种方式:
.div1{
background:rgba(0,0,0,0)(将盒子透明度设置为0，盒子消失，但盒子原有的位置还会存在，若盒子中存在文本，文本不会隐藏，透明度只是对盒子的背影色进行控制)
}
#盒子隐藏的第三种方式：
.div1{
opacity:0;(隐藏盒子及盒子中的文本信息，隐藏后的盒子还会占位,不会对其他的盒子产生影响，需采用动画处理)
}
.div2{
width:100px;
height:100px;
background:pink;
}
}
<div class="div1"></div>
<div class="div2"></div>

二、盒子显示的方式

style{
.inner{
	width:100px;
	height:100px;
	background:red;
	display:none;
}
.bottom{
width: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{
      width:100px;
      height:100px;
      position:relative;
      #top:50px;
      #bottom:50px;
      #left:50px;
      #right:50px;(左右取左，上下取上)
			#left=-right;
			#top=-bottom;
}

}
<div class="box">
  
</div>
#参考系：自身原有位置，上下左右各自参照是的盒子自己的上下左右边界

style{
      .box1{
      width:100px;
      height:100px;
      background:red;
      position:relative;
      left:300px;
      top:1000px;
}
      .box2{
      width:100px;
      height:100px;
      background:pink;
}
}
<div class="box1">
  
</div>
<div class="box2">
</div>
#对box1进行相对定位后，box2不会上移动,因为还占有位置，所以并没有脱离文档流

3、绝对定位

1）脱离文档流(参考系：参考最近的设置了定位的父集)

<style>
  .outer{
    width:100px;
    height:100px;
    background:red;
  }
  .inner{
    width:50px;
    height:50px;
    background:pink;
    position:absolute;#如果父集没有设置定位，就参考页面定位
  }
</style>
<div class="outer">
<div class="inner">
  
  </div>  
</div>

<style>
  .outer{
    width:100px;
    height:100px;
    background:red;、
    position:relative;
  }
  .inner{
    width:50px;
    height:50px;
    background:pink;
    position:absolute;#父集设置了定位，就参考父集定位
  }
</style>
<div class="outer">
<div class="inner">
  
  </div>  
</div>

2）父集必须设置宽度

4、固定定位

1）参考系：页面窗口(应用广告)

<style>
  .box{
    width:100px;
    height:100px;
    background:red;
    position:fixed;
    top:100px;
    left:100px;
  }
</style>
<div class="box">
  
</div>

2)完全脱离文档流

3)相对于页面是静止的

四、z-index

<style>
  .outer{
    width:200px;
    height:200px;
    background:skyblue;
    position:relative;
  }
  .box1{
    width:100px;
    height:100px;
    background:red;
    z-index:20;(默认为1，设置越大，就显示在最外层，当该值大于1，红色覆盖粉色，反之，粉色覆盖红色的)
}
  .box2{
		width: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;
  width:100%;
  height:100%;
  }
  .box{
    width:50%;
    height:50%;
    background:skyblue;
  }
</Style>

<div class="box">
  
</div>

<Style>
  html,body{
	margin:0;
  width:100%;
  height:100%;
  }
  .box{
    width:50%;
    height:50%;
    background:skyblue;
  }
  .box1{
    width:50%wv;(widthview)#参考窗口
    height:50hv;(heightview)
    background:red;
    #流式布局限制条件(最小只能600px,最大只能是800px)
    max-width:800px;(最大的宽度)
    min-width:600px;(最小的宽度)
  }
</Style>

<div class="box"></div>
<div class="box1"></div>

通过em | rem进行流失布局

#rem只跟html的字体大小有关
<style>
  .box{
    width:1rem;
    height:1rem;
    background:red;
  }
</style>

<div class="box1">
  
</div>