今天是: 2020年09月29日 星期二

您现在的位置是:
首页 » 技术分享 » 教大家一些css技巧和黑科技,写页面会更快更专业

教大家一些css技巧和黑科技,写页面会更快更专业

1、vertical-alignmiddle

有时为了让直线能够在div里居中显示,我们用的最多的可能是行高,那么我们可以用vertical-alignmiddle;这个属性,如下图:

《教大家一些css技巧和黑科技,写页面会更快更专业》

 

2、border-radius

这个border-radius属性,相信做前端的人很熟悉了,让div的脚变圆,这样看起来比较柔和。大多数人应该是这样用法:

.item {
  border-radius4px;
}

牛一点的可能会这样用:

.item {
  border-radius4px 6px 6px 4px;
}
但是这个属性的黑科技用法是这样的:
.item {
  border-radius5px 5px 3px 2px / 5px 5px 1px 3px;
}

ps:斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,各个数字就分别代表四个不一样的方向。

 

3、伪类before和after

这两个伪类用法很多,一般我们会用这两个做清除浮动或者给文字前面添加图标:

.carousel-control .icon-prev:before {
content: ‘\2039’
}

其实我们还用套用更多的方法,比如做一些显示和隐藏的效果,不需要用js,直接用伪类即可:

.btn-default.btn-up:focus:before, .btn-default.btn-up:hover:before {
border-bottom-color: #f3f7f9
}
.btn-default.btn-up.active:before, .btn-default.btn-up:active:before, .open>.dropdown-toggle.btn-default.btn-up:before {
border-bottom-color: #ccd5db
}

 

4、flex属性

如果是pc端和移动端做平均分布效果,那么这个属性是真的非常好用,以下几个属性经常用到:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

       flex-wrap: nowrap | wrap | wrap-reverse; 可换行

      用了flex之后,float、clear、vertical-align就会失效,更多关于flex的用法,可以百度菜鸟教程

 

5、linear-gradient 渐变函数

linear-gradient这个函数最多的用法就是颜色的渐变了:

  • background: linear-gradient(-125deg,#0295f9 0%,#2f49fd 100%);
  •  box-shadow: 0 8px 10px rgba(32,160,255,.3);
  • color: #FFF;

《教大家一些css技巧和黑科技,写页面会更快更专业》

 

6、文字左右对齐,多出文字显示省略号

text-align: justify;
text-justify:inter-ideograph;

display:table-cell;
vertical-align:bottom;

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; (设置行数)
-webkit-box-orient: vertical;

点赞