有效的应用方法
①使用flex布局white-space失效的问题:在white-space的元素下添加min-width:0;
②使用fixed定位让flex布局失效的解决方法:
在flex布局外添加一个有宽度的盒子,让该父盒子定位。
③去除微信小程序button的默认样式:
button::after {
border: none;
}
button {
border-radius:0;
padding:0;
margin:0;
background-color: transparent;
line-height: 20rpx;
}
④实现左右布局,中间留一段空的缝隙:
<div class="parent">
<div class="child"></div>
</div>
.parent{
display:flex;
flex-warp:warp;
padding:7px;
justify-content:space-between;//分别贴着左右分布
}
.child{
width:49%;
}
⑤解决左右布局高度不一造成的样式混乱:
.item{
display:flex;
flex-direction:column; //改变主轴方向
justify-content:space-between;//分别贴着上下分布
}
⑥触摸卡片向上缓缓抬起。
.item-box {
max-width: 210px;
transition: all 0.4s;
margin-right: 40px; //这行过渡
}
.item-box:hover {
transform: translateY(-30px); //这行抬起
border-top: 4px solid #FFC000;
border-radius: 22px 22px 0 0;
}
⑦绝对定位的文字居中。
.item {
position: relative;
width: 210px;
p {
width:100%; //加上宽度则text-align:center在绝对定位中生效。
text-align:center;
position: absolute;
top: 175px;
left:0;
font-size: 18px;
}
}
⑧下划线效果。
.item-title{
position: relative;
}
.item-title::after {
content: '';
top: 30px;
left: 0px;
position: absolute;
width: 138px;
height: 1px;
background: #FFC000;
transform: scaleX(0);
transform-origin: left;
transition: transform 1.5s;
}
.item:hover .item-title::after {
transform: scaleX(1);
transform-origin: left;
}
⑨第几个子元素。
.item:nth-child(1),item:frist-child{}//第一个
.item:nth-child(odd){}//奇数行
.item:nth-child(even){}//偶数行
.item:last-child{}//最后一个
⑩背景图上画超出他高度的内容:
.form {
height: 780px;//定义比图大的高度
background: url('../../static/images/team/beijing.png') no-repeat bottom center;
margin-bottom: 130px;
margin-top: 80px;
.form-box {
justify-content: flex-start;
padding-top: 54px;
box-sizing: border-box;
width: 920px;
height: 740px;
background: #FFFFFF;
box-shadow: 0px 1px 20px 5px rgba(185, 185, 185, 0.2);
border-radius: 8px;
}
}
谁敢说没效的应用方法
①伪元素的妙用,可以在块级元素周围加颜色横杆或者特殊形状的三角形等。
外链自己的文章…关联表.jpg
.content{
position:relative;
}
.content:before{
content:"";//必须加上这行才能成效
position:absolute;
top:20px;
left:0;
width:10px;
height:2px;
background:#ccc;
}
②禁止textarea拉伸: style="resize:none"
③屏幕自适应缩放。
@media screen and (max-width: 1024px){
div#app {
transform:scale(0.8)
}
}
④main.js中条件判断引入不同的css。
const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); //判断是否是手机端
if (!flag) {
require('styles/reset.css');
} else {
require('styles/reset_mobile.css');
}
⑤一闪一闪的效果。
.active {
animation: hidden 1s infinite;
}
@keyframes hidden {
0% {
transform: scale(1);
}
50% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}