元素的显示与隐藏
1.几种方法

/* 隐藏，不占据屏幕空间 */
display: none;
/* 重新显示出来 */
display: block;
/* 隐藏，同时占据屏幕空间 */
visibility: hidden;
/* 重新显示出来 */
visibility: visible;
/* 隐藏，占据屏幕空间，透明度,取值为0-1之间的值 */
opacity: 0.5;
opacity: 1;

2.溢出处理
产生滚动条的条件：1.元素的高是固定的，因为如果只靠元素自动撑开是永远不会产生特定范围内的滚动条的2.设置overflow：auto；
ps：超出内容隐藏掉
overflow: hidden;

过渡动画效果
transition:过渡的属性 动画时长 时间函数 延迟时间;
eg:
transition: all 3s //属性为all，时长为3S
transition: all 3s linear 5s; //属性为all，时长为3S，匀速，延迟5S后在开始过度动画
1
2
/* 光标悬停在元素上的时候展现的样式 */
div:hover{
width: 300px;
background-color: green;
//在元素里面设置什么属性都会自动动画
}

2.div文字溢出可滑动，不出现滚动条

超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度超出div设定宽度

div{

border:1px solid #000000;

height: 25px;

width: 50px;

overflow-x: auto;

white-space: nowrap;

overflow-y: hidden;


}

div::-webkit-scrollbar {

display: none;    /* 隐藏滚动条 */
}