设置最小宽度,以便容器内容为空时仍可显示默认宽度,内容较多时可自动扩展,也可称为安全宽度,默认为1004px
让元素“消失”的方法:
display:none;//隐藏对象
opacity:0//设置透明
overflow:hidden;//隐藏溢出元素
visibility:hidden;//设置元素不可见
width:0;height:0;
input输入框无法添加图片,textArea文本域可以添加背景图片
<div class="mainbox"> <div class="btn">a <div class="title">菜单1</div> </div> <div class="btn">b <div class="title">菜单2</div> </div> <div class="btn">c <div class="title">菜单3</div> </div> <div class="btn">d <div class="title">菜单4</div> </div> </div>
.btn:hover{
background: #900;
}
.btn .title{
height: 50px;
background: #900;
border-radius: 5px;
overflow: hidden;
position: absolute;
top: 0px;
right:50px;
/*1 使用display控制元素是否显示*/
/*width: 80px;*/
/*display:none;*/
/*2 使用动画Transition,一旦width的值变化,就开始动画*/
width: 0px;
/*transition: width 1s;*/
/*3 使用Opaicity透明度*/
/*width: 80px;*/
/*opacity: 0;*/
/*4 使用动画监视多个变量*/
/*width: 0;*/
/*opacity: 0;*/
/*transition: all 1s;*/
}
.btn:hover .title{
/*1 */
/*display: block;*/
/*2 */
width: 80px;
/*3*/
/*opacity: 1;*/
/*4 */
/*width: 80px;
opacity: 1;*/
}