前端之盒模型显隐、定位与流式布局思想
盒模型的显隐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子的显隐</title>
<style type="text/css">
.box, .wrap {
width: 200px;
height: 200px;
background: red;
}
.wrap {
background: orange;
}
/*display: none; 通过控制盒子的显示方式来隐藏盒子*/
/*该隐藏方式在页面中不占位*/
.box {
display: none;
}
/*opacity: 0; 通过控制盒子的透明度来隐藏盒子*/
/*该隐藏方式在页面中占位*/
.box {
/*opacity: 0*/
}
/*注: 一般显隐操作的盒子都是采用定位布局*/
/*悬浮父级显示子级*/
body:hover .box {
display: block;
}
/*将盒子藏到屏幕外: 不能通过盒模型布局, 也不建议通过浮动布局, 可以采用定位布局*/
.box {
/*margin-top: -208px*/
}
</style>
</head>
<body>
<div class="box"></div>
<div class="wrap"></div>
</body>
</html><!DOCTYPE html>
<
