CSS必会技巧

清除浮动

浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦,其中我觉得最方便也是兼容性最好的一种是....

    // 清除浮动
    .clearfix{
      zoom: 1;
    }
    .clearfix:after{
      display: block;
      content: '';
      clear: both;
    }

垂直水平居中

在css的世界里水平居中比垂直居中来的简单一些,经过了多年的演化,依然没有好的方式来让元素垂直居中(各种方式各有优缺点,但都不能达到兼容性好,破坏力小的目标),以下是几种常见的实现方式

绝对定位方式且已知宽高

position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -7em;
width: 14em;
height: 6em;

绝对定位 + 未知宽高 + translate

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
//需要补充浏览器前缀

flex 轻松搞定水平垂直居中( 未知宽高)

display: flex;
align-items: center;
justify-content: center;

文本末尾添加省略号

当文本的内容超出容器的宽度的时候,我们希望在其默认添加省略号以达到提示用户内容省略显示的效果。

宽度固定,适合单行显示...

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

宽度不固定,适合多行以及移动端显示

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

制造文本的模糊效果

当我们希望给文本制造一种模糊效果感觉的时候,可以这样做

color: transparent;
text-shadow:0 0 2px rgba(0,0,0,.5);

动画实现简洁loading效果

我们来实现一个非常简洁的loading效果

.loading:after{
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  content: '\2026';
  -webkit-animation: ellipsis 2s infinite;
}

// 动画部分
@-webkit-keyframes ellipsis{
  from{
    width: 2px;
  }
  to{
    width: 15px;
  }
}

自定义文本选中样式

默认情况下,我们在网页上选中文字的时候,会给选中的部分一个深蓝色背景颜色(可以自己拿起鼠标试试),如果我们想自己定制被选中的部分的样式呢?

// 注意只能修改这两个属性 字体颜色 选中背景颜色

element::selection{
  color: green;
  background-color: pink;
}
element::-moz-selection{
  color: green;
  background-color: pink;
}

移动端可点击元素去处默认边框

在移动端浏览器上,当你点击一个链接或者通过Javascript定义的可点击元素的时候,会出现蓝色边框,说实话,这是很恶心的,怎么去掉呢?

-webkit-tap-highlight-color: rgba(255,255,255,0);

首字下沉

要实现类似word中首字下沉的效果可以使用以下代码

element:first-letter{
  float:left;
  color:green;
  font-size:30px;
}

小三角

在很多地方我们可以用得上小三角,接下来我们画一下四个方向的三角形

.triangle{
  /* 基础样式 */
  border:solid 10px transparent;
}
/*下*/
.triangle.bottom{
 border-top-color: green;
}
/*上*/
.triangle.top{
 border-bottom-color: green;
}
/*左*/
.triangle.top{
 border-right-color: green;
}
/*右*/
.triangle.top{
 border-left-color: green;
}

可以看出画一个小三角非常简单,只要两行样式就可以搞定,对于方向只要想着画哪个方向则设置反方向的样式属性就可以

鼠标手型

一般情况下,我们希望在以下元素身上添加鼠标手型

  • a
  • submit
  • input[type="iamge"]
  • input[type="button"]
  • button
  • label
  • select
    a[href],input[type='submit'], input[type='image'],input[type='button'], label[for], select, button {
      cursor: pointer;
    }

屏蔽Webkit移动浏览器中元素高亮效果

在访问移动网站时,你会发现,在选中的元素周围会出现一些灰色的框框,使用以下代码屏蔽这种样式

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

上面是我在项目中收藏的一些技巧,希望对大家有用。

Web最新资讯,请关注我的微信公众号“一起玩前端”或扫描二维码关注.

CSS必会技巧_第1张图片
qrcode_for_gh_7a765c30aeb7_258.jpg

你可能感兴趣的:(CSS必会技巧)