您现在的位置是:首页 > IT分类 > html+js网站首页html+jsCSS:常用CSS总结

CSS:常用CSS总结

  • 蓝天
  • html+js
  • 2020-05-13 10:50:22
简介前言:CSS比较死板,没有什么灵活性,说白了就是纯记,但是这个单词量有点大,所以基本上都只是记一些常用的,不常用的心里有这个印象就行了,剩下的交给百度了,合理的利用复制张贴可以节
前言:CSS比较死板,没有什么灵活性,说白了就是纯记,但是这个单词量有点大,所以基本上都只是记一些常用的,不常用的心里有这个印象就行了,剩下的交给百度了,合理的利用复制张贴可以节省很多事情,当然,我指的是做为一个码农而言是这样的啦,我们不生产代码,我们只做代码的搬运工.....哈哈,言归正传,以下代码在平时编辑中,都有有上的可能。nFn蓝天个人博客-一个自学的好博客
 

1,清除浮动

.clearfix:after {
  content: "";
  display: block;
  clear: both;
  line-height: 0;
}
.clearfix {
  zoom: 1;
}

2,垂直水平居中

.css {
    display: flex;
    align-items: center;
    justify-content: center;
}
以上是FLEX居中,也可以用margin或position居中,可以参考CSS盒子居中六种方法

3,文本末尾省略号

/*单行*/
.txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*多行  3表示3行*/
.txt {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

4,文本的模糊效果

.child {
  color: transparent;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

5,动画实现简洁的加载效果

html
<div class="loading">
    正在加载
 </div>
css
.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;
  }
}
最终效果可以点击在线演示工具进行查看。

6,input修改placeholder默认的样式

input::-webkit-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}
input::-moz-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}
input::-ms-input-placeholder {
  color: green;
  background-color: #f9f7f7;
  font-size: 14px;
}

7,css实现三角形

html
<div style="display: flex;">
    <div class="triangle-up">正三角</div>
    <div class="triangle-down">倒三角</div>
    <div class="triangle-left">左三角</div>
    <div class="triangle-right">有三角</div>
</div>
css
.triangle-up { 
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent; 
  border-bottom: 100px solid red; 
}
.triangle-down { 
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent; 
  border-top: 100px solid red; 
}
.triangle-left { 
  width: 0; 
  height: 0; 
  border-bottom: 50px solid transparent;
  border-right: 100px solid red;
  border-top: 50px solid transparent;
}
.triangle-right {
  margin-left: 10px;
  width: 0; 
  height: 0; 
  border-bottom: 50px solid transparent;
  border-left: 100px solid red;
  border-top: 50px solid transparent;
}

8,移除个别标签去除预设的边框

img,
input,
button,
textarea {
  border: none;
  -webkit-appearance: none;
}
textarea {
  /*textarea 默认不可以放缩*/
  resize: none;
}

9,css换行

/* 强制不换行 */
.css {
  white-space: nowrap;
}
/* 自动换行 */
.css {
  word-wrap: break-word;
  word-break: normal;
}
/* 强制英文单词断行 */
.css {
  word-break: break-all;
}

10,图片上下左右居中

css {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

转载: 感谢您对蓝天个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源蓝天个人博客 http://www.along168.cn”。

文章评论

联系方式