前端比较实用的CSS

CSS

display: flex; flex-direction: column; align-items: center;css

1.flex布局

{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
 {
   flex:1   /* 全部的子元素平均分配 */
 }
}
复制代码

我写css一定会用到他，自此以后摒弃flaot,毕竟float要清楚浮动，在我看来他彻底能够替代float,并且最大的好处就是对任何不肯定的宽和高，咱们均可以让他垂直居中对齐，想要了解的更深点，能够点击这里 Flex 布局教程：语法篇html

2.移动端1px的实现

.person-infos{
        position: relative;
        &::before{
            content: "";
            pointer-events: none; /* 防止点击触发 */
            box-sizing: border-box;
            position: absolute;
            width: 200%;
            height: 200%;
            left: 0;
            top: 0;
            border-top:1px solid #fff;
            transform:scale(0.5);
            transform-origin: 0 0;
        }
}
复制代码

必定要在改元素上设置position:relative,before内设置position: absoluteweb

3.利用::before,::after设置在元素先后设置border

{
  position: relative;
  &::before{
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   height: 1px;
   background: #f1f1f1;
   }
}
复制代码

4.设置背景图片，并该图片在一个固定区域内，好比该区域是手机全屏区域减去头部的标题栏

{
    background: url(/static/img/login-back.e7b2e5f.jpg) no-repeat;
    position: absolute;
    top: 40px;  /* 顶部标题栏的高度 */
    left: 0;
    width: 100%;
    background-size: 100% 100%;
    height: calc(100% - 40px);
}
复制代码

推荐使用的是calc,加上咱们设置了背景图片的宽和高是100%，100%，这时候咱们就能够看到除去头部的40px,剩下的区域都被背景图片占满了。浏览器

5.一个值得推荐的 css写的阴影效果，我一直都用，感受很是使用大部分场景

{   
    border: none;
    border-radius: 5px;
    box-shadow: 0 12px 5px -10px rgba(0,0,0,0.1), 0 0 4px 0 rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 12px 5px -10px rgba(0,0,0,0.1), 0 0 4px 0 rgba(0,0,0,0.1);
}
复制代码

6.超出长度省略号

/* 1. 单行文本溢出用省略号显示：*/
{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  
  width: 100%;                  /* IE6 须要定义宽度 */ 
  
  -o-text-overflow: ellipsis;    /* Opera */ 
  text-overflow:    ellipsis;    /* IE, Safari (WebKit) */ 
  -moz-binding: url('ellipsis.xml#ellipsis');    /* Firefox */ 
}
/* 2.多行文本溢出用省略号显示： */
{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
复制代码

7.颜色的渐变(right表示渐变的方向)

{
 background: linear-gradient(to right, #f5adc9, #f38eb6, #f977ab);
}
复制代码

8.box-sizing

box-sizing: content-box|border-box|inherit;
复制代码

有时候咱们设置内部的div一个固定的宽高，可是因为受padding,border的影响，会让他的宽高比设置的小，若是不想这样，能够设置box-sizing:content-box,具体看CSS3 box-sizing 属性bash

9.禁用鼠标点击

{ 
  pointer-events: none; 
}
复制代码

10. input,宽改变border,而且聚焦除掉橙色的边框

{
   border:none;
   outline:none;
   border:1px solid #eee  /* 自定义 */
}
复制代码

11.设置透明，并兼容浏览器

{
  filter: alpha(opacity=50); /* internet explorer */
 -khtml-opacity: 0.5; /* khtml, old safari */
 -moz-opacity: 0.5; /* mozilla, netscape */
 opacity: 0.5; /* fx, safari, opera */
}
复制代码

12.除input,textarea以外，让任何标签的内容可编辑，能够在该元素上添加 contenteditable="true"

13.自定义滚动条样式

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-webkit-scrollbar 
{ 
    width: 16px; 
    height: 16px; 
    background-color: #F5F5F5; 
} 
   
/*定义滚动条轨道 内阴影+圆角*/ 
::-webkit-scrollbar-track 
{ 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
    background-color: #F5F5F5; 
} 
   
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb 
{ 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    background-color: #555; 
复制代码

14.实现按钮一边凹陷

.btn{
  display: block;
  width: 100px;
  height: 40px;
  background-color: lightcoral;
  text-align: center;
  line-height: 40px;
  position: relative;
  color: #FFF;
  font-size: 2em;
  margin: 0 auto;
  &::after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background: #fff;
    position: absolute;
    display: block;
    right: -15px;
    top: 5px;
  }
}
复制代码

效果以下图： markdown