css的那些疑惑

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设置后会脱离文档流
解决：父元素设置固定宽度