smileTan

导航

css笔记

1.清除浮动：

在同级目录下再创建一个<div style="clear:both;"></div>；不过这样会增加很多无用的代码。此时我们用:after这个伪元素来解决浮动的问题，如果当前层级有浮动元素，那么在其父级添加上 clearfix 类即可。

 1 // 清除浮动
 2 .clearfix:after {
 3   content: "\00A0";
 4   display: block;
 5   visibility: hidden;
 6   width: 0;
 7   height: 0;
 8   clear: both;
 9   font-size: 0;
10   line-height: 0;
11   overflow: hidden;
12 }
13 .clearfix {
14   zoom: 1;
15 }
16

2.垂直居中

1）绝对定位方式且已知宽高

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

2)绝对定位 ＋ 未知宽高 ＋ translate

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

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

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

3.手写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;
  }
}

4.多余文本省略号

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

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

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

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

5.文字选中效果

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

 

posted on 2020-06-05 16:42  smileTan  阅读(74)  评论(0)  编辑  收藏  举报