css

一、清除浮动

法1：使用用伪元素

    <div class="parent clearfix">
      <div class="left">1</div>
      <div class="right">2</div>
    </div>
    <div class="brother">3</div>

.left{
  width: 200px;
  height:200px;
  float:left;
  border:1px solid red;
}
.right{
  width: 200px;
  height: 200px;
  float:right;
  border: 1px solid blue;
}
.clearfix::after{
  content: '';
  clear: both;
  display: block;
  line-height: 0;
}
.brother{
  width: 100%;
  height: 100px;
  border: 1px solid;
}

法2：使用兄弟节点清除

    <div class="parent">
      <div class="left">1</div>
      <div class="right">2</div>
    </div>
    <div class="clearfix" />
    <div class="brother">3</div>

.left{
  width: 200px;
  height:200px;
  float:left;
  border:1px solid red;
}
.right{
  width: 200px;
  height: 200px;
  float:right;
  border: 1px solid blue;
}
.clear{
  clear: both;
}
.brother{
  width: 100%;
  height: 100px;
  border: 1px solid;
}

未清除浮动效果：

image.png

清除浮动后效果：

image.png

二、盒子垂直水平居中

    <div class="m-contianer">
      <div class="parent">
        <div class="child">1</div>
      </div>
    </div>

法1、弹性盒子 （可以未知需要居中盒子child的宽高）

/*这是已知要居中盒子child宽高的情况*/
.m-contianer{
  width: 100%;
  height: 100%;
}
.parent{  
  height: 100%;  /*这个大盒子占比body的全部*/

  display: flex;
  align-items: center;
  justify-content: center;
}
.child{
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

这是未知child的宽高

.m-contianer{
  width: 100%;
  height: 100%;
}
.parent{
  height: 100%;  /*这个大盒子占比body的全部*/

  display: flex;
  align-items: center;
  justify-content: center;
}
.child{
  border: 1px solid red;
}

法2、绝对定位 + translate（可以未知需要居中盒子child的宽高）
这是已知child的宽高

.m-contianer{
  width: 100%;
  height: 100%;
}
.parent{
  height: 100%;
}
.child{
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid red;
}

未知child的宽高

.m-contianer{
  width: 100%;
  height: 100%;
}
.parent{
  height: 100%;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid red;
}

法3、绝对定位 + margin：auto（需要已知居中的盒子child宽高）

.m-contianer{
  width: 100%;
  height: 100%;
}
.parent{
  height: 100%;
  position: relative;
}
.child{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

法4、绝对定位 + margin 盒子的一半宽高（需要已知居中的盒子child宽高）

.m-contianer{
  width: 100%;
  height: 100%;
  position: relative;
}
.parent{
  width: 500px;
  height: 500px;
  border: 1px solid blue;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.child{
  width: 150px;
  height: 150px;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -75px 0 0 -75px;
}

未知要居中盒子的宽高效果：

image.png

已知要居中盒子的宽高效果：

image.png

三、文本末尾溢出省略号

.txt {
    white-space: nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
    overflow: hidden;
    text-overflow: ellipsis;
}

三、只显示n行文本

    <div class="parent">
      <div class="txt">
        正在加载正在加载正在加载正在加载正在加载正在加载正在加载正在加载正在加载正在加载正在加载正在加载正在加载正在加载正在加载正在加载
      </div>
    </div>

未设置显示多少行

.m-contianer{
  width: 100%;
  height: 100%;
}
.parent{
  width: 200px;
  height: 200px;
  margin: 200px auto;
  border: 1px solid red;
}
.txt{
  line-height: 46px;
}

设置显示4行

.txt{
  line-height: 46px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient;必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow:ellipsis;可选属性，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

未设置显示多少行

image.png

设置显示4行，其他溢出隐藏

image.png

四、文本的模糊效果

.txt{
  line-height: 46px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

未设置前

image.png

设置后

image.png

五、自定义文本选中样式

只有pc端有选中；只能修改这两个属性 字体颜色color; 选中背景颜色background-color

 <div class="m-contianer">
    <div class="txt">正在加载正在加载正在加载正在加载</div>
  </div>

.txt::selection{
  color: red;
  background-color: blue;
}
.txt::-moz-selection {
  color: red;
  background-color: blue;
}

默认选中样式：

image.png

自定义选中效果：

image.png

五、首字下沉

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

六、input 修改placeholder默认的样式

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

image.png

七、input 修改光标的颜色

input{
  color: blue;
}

image.png

八、css实现三角形

 <div class="triangle" />

.triangle{
  width: 0;
  height: 0;

  border-left: 50px solid red;
  border-right: 50px solid yellow;
  border-top: 100px solid blue;
  border-bottom: 100px solid pink;
}

image.png

.triangle{
  width: 0;
  height: 0;

  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid transparent;
  border-bottom: 100px solid pink;
}

image.png

.triangle{
  margin: 100px auto;
  width: 0;
  height: 0;

  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 100px solid transparent;
  border-bottom: 100px solid pink;
}

image.png

九、浏览器禁止选中文本

user-select: none|auto|text|contain|all;

属性值：
none :  元素和子元素的文本将无法被选中

text :  文本可以被选中

auto :  文本将根据浏览器的默认属性进行选择

all  :  当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素

contain、element :  可以选择文本，但选择范围受元素边界的约束，也就是选择的文本将包含在该元素的范围内。只支持Internet Explorer

各浏览器兼容写法
/*firefox浏览器*/
-moz-user-select: none|text|all;
 
/*safari、chrome浏览器*/
-webkit-user-select: none|text|all; /*Safari中不支持该属性值，只能使用none或者text，或者是在html的标签属性中使用*/
 
/*ie浏览器*/
-ms-user-select: none|text|element;

.css {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

十、取消部分浏览器数字输入控件的操作按钮 【input type=‘number’】

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

未取消前

image.png

取消后

image.png

十一、标题两边的小横杠

<div class="title">标题</div>

.title:before,
.title:after {
  content: "";
  width: 40px;
  border-top: 2px solid #e1767c;
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);

}
.title:before {
  margin-left: -60px;
}
.title:after {
  margin-left: 60px;
}

image.png

十二、手动实现内盒子垂直方向溢出滚动

      <div class="scrollCon">
        <p>1222365</p>
        <p>1222365</p>
        <p>1222365</p>
        <p>1222365</p>
        <p>1222365</p>
        <p>1222365</p>
        <p>1222365</p>
        <p>1222365</p>
        <p>1222365</p>
        <p>1222365</p>
        <p>1222365</p>
        <p>1222365</p>
        <p>1222365</p>
        <p>1222365</p>
        <p>1222365</p>
      </div>

.scrollBox{padding: 0 20px; height: 630px;overflow: hidden; z-index: 99;border: 1px solid;}
.scrollCon{width: 100%; height: 100%; z-index: 1;font-size: 20px;overflow-y: auto;border: 1px solid red;}
.scrollCon p{line-height: 46px;}

image.png

十三、隐藏各浏览器自带滚动条

 .scrollCon::-webkit-scrollbar{ // 谷歌浏览器隐藏自带滚动条
    display: none;
  }
  .scrollCon{ // IE浏览器隐藏自带滚动条
    -ms-scroll-chaining: chained;
    -ms-overflow-style: none;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    -ms-overflow-style: none;
    overflow: auto;
  }

image.png

十四、手动实现侧边弹窗 同抽屉【el-drawer】

    <div v-if="filter" class="mask" bindtap="doFilter" />
    <div v-if="filter" class="m-filter">
      <div class="list">list</div>
      <div class="btn">
        <el-button type="primary">取消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </div>

<script>
export default {
  name: 'Box',
  data() {
    return {
      filter: true
    }
  }
}
</script>

.mask{
  position:fixed;
  bottom:0;
  right:0;
  left:0;
  top:0;
  background:rgba(0,0,0,0.2);
  z-index:99;
}
.m-filter{
  width:30%;
  height:100%;
  background:#fff;
  overflow-y:auto;

  position:fixed;
  top:0;
  right:0;

  font-size:24rpx;
  line-height:60rpx;

  display:flex;
  flex-direction:column;
  text-align:left;

  z-index:101;
}
.list{
  flex: 1;
  padding:30rpx 50rpx 30rpx 100rpx;
  margin-bottom:80rpx;
  -webkit-overflow-scrolling:touch;
  border: 1px solid blue;
}
.btn{
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border:1px solid red;
}
.btn button{
  flex: 1;
}

image.png

部分参考自：https://juejin.im/post/5eba4199e51d454db20f4303