前端常用样式笔记

早期的前端布局大多通过浮动 + 定位 实现

现在由于旧版本浏览器被大家弃用  推荐使用flex布局

flex布局可以移步阮一峰老师的日记  新手必看 

1.单行超出显示...

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

2.多行文本超出显示...

display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2; // 2是行数 多行就改成对应数字
-webkit-box-orient: vertical;
text-overflow: ellipsis;
word-break: break-all;

3.class伪类 选中第几个元素  或者某个标签

ul li:nth-child(3n)   3的倍数的元素
ul li:nth-child(3)    第三个元素
ul li:first-child     ul里面第一个li
ul li:last-child      ul里面最后一个li
.selectAll + span     class为selectAll后面的span 标签
.selectAll > span     class为selectAll里面的span 标签

4.css阴影

box-shadow:0 10px 5px #000;//Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9

说明
0px 阴影向右偏移量，为0
10px 阴影向下偏移量，为10px
5px 阴影的过渡距离，为5px
#000阴影颜色，为黑色

5.颜色渐变

background: linear-gradient(to right, #2D9AFF, #85C8FD);
第一个值说明
to right 从左到右
45deg 渐变轴为45度
to left top 从右下到左上

从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束
linear-gradient(0deg, blue, green 40%, red);

6.transition属性 div宽度/高度 缓慢变化 常用于收起 展开

.class1 {
    width: 256px;
    transition: width 1s;
}
.class2 {
    width: 0;
}
点击按钮class2加上去时  div宽度就会在1秒内变成0  不会突然消失  有个动画效果

7.缩放元素 多少倍  transform: scale(倍数)

缩放1.2倍
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
transition: .6s ease;  // 加transtion会有动画效果

8.动画效果  可以循环 也可以几秒

.div{animation: mymove 10s linear 5s 1}
@keyframes mymove
{
from{-webkit-transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg)}
}
名称为mymove的动画

动画执行时间10秒

linear 匀速进行
/ 可选值 
linear:表示动画从头到尾的速度都是相同的。
ease-in:表示动画以低速开始。
ease-out:表示动画以低速结束。
ease-in-out:表示动画以低速开始和结束。

动画延迟执行时间5秒（推荐不写 默认值是0秒 也就是动画立即执行）

infinite 动画次数 infinite是无限次 一直动

9.在某个标签内用::after做线条或者 小红点

.div {
  ::after {
    content: ' ';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: red;
  }
}