transition的那些事儿
注意点
1. 属性值由0-auto时,动画过渡是实现不了的
2. display属性无法实现动画过渡效果
height 固定值-auto
/* 过渡动画实现不了 */
li{
height:10px;
overflow:hidden;
transition:height 2s;
}
li{
height:auto;
}
/* 解决方式
方式一:使用max-height,使max-height大一些
方式二:使用js获取实时高度
下方代码采用方式一的解决方法
*/
li{
height:10px;
max-height:10px;
overflow:hidden;
transition:height 2s;
}
li{
height:auto;
max-height:1000px;
}
伪元素
:first-child 用于匹配父元素下的第一个子元素,若不是第一个子元素,则无效
:first-of-type 用于定位父元素下的某个类型的第一个子元素【指定了元素类型】
其他
div disabled无效,鼠标事件失效
// disabled针对div无效,是针对表单的
// 鼠标样式
div {
cursor: not-allowed;
}
// 鼠标事件失效
div {
pointer-events: none; // 让鼠标事件失效
}
// 若两个样式同时使用,则鼠标样式会失效变为默认样式
input focus边框
// input focus对应高亮的边框不是border,而是outline
input:focus {
outline: none
}
css position:absolute作为子元素无法撑起父元素
原因:position:absolute设置后会脱离文档流
解决:父元素设置固定宽度