fedono / css Goto Github PK

.element {
height: 0;
overflow: hidden; transition: height .25s;
}
.element.active {
height: auto; /*没有transition效果，只是生硬地展开*/ }

所以可以使用max-height，这里使用max-height 来超出height ，这样这时候就会自动展开到元素的高度。

.element {
max-height: 0;
overflow: hidden; transition: max-height .25s;
}
.element.active {
max-height: 666px; /* 一个足够大的最大高度值 */ }

注意
但是，使用此方法也有一点要注意，即虽然说从适用范围讲，max- height 值越大使用 场景越多，但是，如果 max-height 值太大，在收起的时候可能会有“效果延迟”的问 题，比方说，我们展开的元素高度是 100 像素，而 max-height 是 1000 像素，动画时间 是 250 ms，假设我们动画函数是线性的，则前 225 ms 我们是看不到收起效果的，因为 max-height 从 1000 像素到 100 像素变化这段时间，元素不会有区域被隐藏，会给人动 画延迟 225 ms 的感觉，相信这不是你想看到的。

因此，我个人建议 max-height 使用足够安全的最小值，这样，收起时即使有延迟，也 会因为时间很短，很难被用户察觉，并不会影响体验。

<div class="ao"></div>

.ao {
    display: inline-block;
    width: 0;
}
.ao:before {
    content: "love你love";
    outline: 2px solid #cd0000;
    color: #fff;
}

原理

1. 利用英文字符和中文字符的换行效果，这里.ao的 width: 0让每一行都换行，然后在before里使用中英文的占位效果来实现凹凸效果，要使用凸的时候，before 里面的content: "我love你"
2. 这里让before 里面的color: #fff来实现文字的在页面中不显示。

<div class="box">
    <div class="child"></div>
</div>

.box {
    height: 160px;
    padding: 30px;
    box-sizing: border-box; background-color: #beceeb;
    position: relative;
}
.child {
    height: 100%;
    width: 100%;
    background-color: #cd0000;
    /*position: absolute;*/
}

在child 中，如果没有position: absolute; 那么child 显示的时候是在box 中，占据了除padding 的所有内容
但是在有position: absolute; 的时候，那么child 就会显示和box 一样大小，然后在box 中距离顶部和左边30px的距离