css's People
css's Issues
4. 不定高度使用transition实现动画展开
.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 使用足够安全的最小值,这样,收起时即使有延迟,也 会因为时间很短,很难被用户察觉,并不会影响体验。
2. 实现凹凸效果
<div class="ao"></div>
.ao {
display: inline-block;
width: 0;
}
.ao:before {
content: "love你love";
outline: 2px solid #cd0000;
color: #fff;
}
原理
- 利用英文字符和中文字符的换行效果,这里
.ao
的width: 0
让每一行都换行,然后在before
里使用中英文的占位效果来实现凹凸效果,要使用凸的时候,before
里面的content: "我love你"
- 这里让
before
里面的color: #fff
来实现文字的在页面中不显示。
3. 非定位元素的宽高百分比计算不会将 padding 计算在内
<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
的距离
1. 文字少的时候居中显示,文字超过一行的时候居左显示
<div class="box">
<p class="content">文字内容-新增文字-新增文字-新增文字</p>
</div>
// style
.box {
padding: 10px;
background-color: #cd0000;
text-align: center;
}
.content {
display: inline-block;
text-align: left;
}
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.