字体图标
fa框架: http://fontawesome.dashgame.com/
下载 => 引入css文件
<i class="fa fa-**"></i>
盒子显隐
1.显示效果
display: none;
消失的时候在页面中不占位,显示的时候在页面中占位
2.盒子透明度
opacity: 0;
消失显示在页面中都占位
只要盒子在页面中有占位,就会影响其他盒子布局,所以显隐的盒子都需要中定位处理
opacity可以动画处理,display不能动画处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子显隐</title>
<style>
div {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 10px;
}
.div1 {
display: none;
position: absolute;
transition: 2s;
}
.ctrl:hover ~ .div1 {
display: block;
}
.div2 {
opacity: 0;
position: absolute;
transition: 2s;
}
.ctrl:hover ~ .div2 {
opacity: 1;
}
</style>
</head>
<body>
<div class="ctrl">控制</div>
<div class="div2">002</div>
</body>
</html>
overflow属性
解决: 超出盒子规定的显示区域外的内容的处理方式
/*将超出规定区域的内容隐藏,隐藏掉的内容无法直接查看*/
/*overflow: hidden;*/
/*不超出正常,超出滚动,两种不同的处理方式来处理超出规定区域的内容*/
/*overflow: auto;*/
/*一直以滚动方式处理超出规定区域的内容*/
/*overflow: scroll;*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow属性</title>
<style>
div {
width: 100px;
height: 100px;
background-color: orange;
margin-top