#前端开发避坑技巧003# 【三】（ertical-align + inline-block、路由跳转问题、html各种分割线、鼠标点击事件、透明度、密码框表单、绑定输入框输入类型、下划线）

#前端开发避坑技巧

ertical-align + inline-block、透明度、密码框表单、绑定输入框的输入类型、下划线、css继承性问题、伪类选择器、去掉边框默认样式、悬浮阴影

（1）如何让行内元素居中，一般不建议用定位以及浮动，
因为会造成元素脱离文档流，带来麻烦，
所以一般使用ertical-align + inline-block 这两个来设置，也可以使用flex布局
给每个行内元素都添加样式：

p {
display: inline-block;
vertical-align: top;
}

（2）在移动盒子的时候，尽量使用padding，不用magian
加了下面这些代码，就可以在padding里面随意移动

在父盒子里面加入这些代码

box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

然后子盒子就可以随意移动，
切记，子盒子的尺寸大小要小于父盒子，不然就会超出

（3）透明度

 opacity：0.5

作用：设置元素的透明背景

取值
(1) 取值范围0~1
(2) 0表示完全透明，1表示完全不透明，0.5表示半透明

（4）密码框表单
js
设置密码框表单
语法
需要写form.变量名


（5）绑定输入框的输入类型
:type=“pwdType”
样式绑定

<div :class="{ 'active': isActive }"></div>

（6）下划线
鼠标经过时
字体变色，以及加了一条下划线

.link-left :hover {
    border-bottom: 1px solid red;
    color: red;
}

（7）css继承性问题、伪类选择器

比如写
.learn-top div {
样式}
那么.learn-top 下面所有的div都会继承父级的样式
所以为了避免排版错误，最好是给div都加上类名

<div class="join">
            <div class="learn-top" v-for="item in newList">
                <div >
                    <img :src="item.src" alt="">
                    <div class="mask-img"></div>
                </div>

（8）去掉边框默认样式
去掉css边框点击时的颜色以及边框

输入框：

 input {
       
        border: 0;  // 去除未选中状态边框
        outline: none; // 去除选中状态边框
        background-color: rgba(0, 0, 0, 0);// 透明背景
 
    }

表格：
table{
 2     text-align:center;/*文本居中*/
 3     border-collapse:collapse; /*表格的边框合并，如果相邻，则共用一个边框*/
 4     border-spacing:0; /*设置行与单元格边框的间距。当表格边框独立
 5     border-collapse:separate;）此属性才起作用*/
 6 }
 7 
 8 table td{
 9     word-break: break-all; /*允许在字内换行,即单词可分*/
10     word-wrap:break-word;/*允许长单词或URL地址换行*/
11     border-right:1px solid #999;
12     border-bottom:1px solid #999; 

按钮
  <button style="border: none;"></button>

（9）悬浮阴影
只需要在该位置的hover加入动画效果就可以了

.shadow-drop-center {
	-webkit-animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

```css
/* ----------------------------------------------
 * Generated by Animista on 2021-5-31 14:45:48
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shadow-drop-center
 * ----------------------------------------
 */
@-webkit-keyframes shadow-drop-center {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
            box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  }
}
@keyframes shadow-drop-center {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
            box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  }
}