常用技巧

一.文字缩进

文章首段落的空格

text-indent: 2em;

二.隐藏方法

1.transform: rotateY(90deg);
2.opcity：0;
3.display:none
4.z-index:-1
5.visibility: hidden;
6.html5新标签hidden 直接添加在标签上
例:

<p hidden> </p>

三.vertical-align设置元素的垂直对齐方式。

把元素的顶端与行中最高元素的顶端对齐:
vertical-align:top

四.重叠

1.子绝父相（父盒子设置相对定位（可选），子盒子设置绝对定位（必须））

2.z-index值越大排序越靠前

五.元素等比例缩放

1.图片父盒子设置弹性布局垂直居中，设置宽100%，高；图片设置max-width:100%;

• 父盒子

img_f{
  display: flex;
    justify-content: center;
    align-items: center;
}   
  

• 图片

img{
  max-width:100%;
}

2.scole缩放

   transform: scale();

六.p标签超出显示省略号

1.单行显示

p{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

2.多行显示
*-webkit-line-clamp: 3;表示超出三行显示省略号

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
//当p标签中有数字使多行显示失效时：
  word-wrap: break-word;
  word-break: break-all;
}
//如果是span标签有数字使多行显示失效

display:block;
overflow-wrap:break-word;

七.disblok ：table

disblok:table实现基于子元素在父盒子上显示

前提：给distable父元素添加绝对定位 且都为零 祖先元素相对定位

上代码

1.html

                               <div class="text">
                                  <div class="distable">
                                      <div class="discell">
                                        <h4>单芯线</h4>
                                        <p>（80℃,100℃,105℃,120℃,
                                            125℃,150℃,180℃,200℃）</p>
                                      </div>
                                  </div>
                                <div>

2.css

.text{
    positive:absolute;
    left:0;
    bottom:0;
    top:0;
    right:0;
    height: 100%;
}
.distable{
    display: table;
    margin:auto;
}
.discell{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

八.阴影

1.文本阴影（text-shadow）

• 语法:

text-shadow：h-shadow  v-shadow  blur  color；

• 例子：

 p{
  color:white; 
  text-shadow:2px 2px 4px #000;
} 

2.边框阴影（box-shadow）

• 语法:

 box-shadow: h-shadow v-shadow blur spread color inset;

• 例子：

box-shadow:4px 4px 5px 3px #999; 

box-shadow:0 0 9px 3px #999;   

九.vh与vw

1.介绍：vw和vh是前端开发中的一个动态单位，是一个相对于网页视口的单位
2.理解：系统会将视口的宽度和高度分为100份，1vw占用视口宽度的百分之一，1vh占用视口高度的百分之一。
3.结论：vw、vh是一个动态的单位，会随着视口的变化而变化（相对单位）。
4.使用场景：保证移动开发中屏幕旋转之后尺寸不变。

十.常用颜色统计

1.透明色

//文字会透明
background: #000;
opacity: 0.4;

//文字不会透明
//偏白
background: rgba(255, 255, 255, 0.3);
//偏黑
background:rgb(10 10 10 / 15%) !important;

//浅灰适合边框
border: 1px solid #efefef;
border: 1px solid #eee;

十一.css3图片模糊

.blur{
    filter: url(blur.svg#blur);/* FireFox, Chrome, Opera */
    filter: blur(5px);/* Chrome, Opera */
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
    /* IE6~IE9 */
}
/*设置模糊玻璃效果*/
	backdrop-filter: blur(5px);

十二.a链接悬浮显示小手：

//默认：
style="cursor:default"
//小手：
style="cursor:pointer "
//加载条：
style="cursor:progress"

十三.cellspacing与cellpadding

//规定单元格之间的空间。
cellspacing="10" 
//表格单元边界与单元内容之间的间距
 cellpadding="20"  

十四.超链接点击不起作用

position: relative;
        z-index: 99;

十五.html页面右侧空白去除

html {
    width: 100%;
    overflow-x: hidden;
}

十六.居中

水平居中

margin:0 auto;

文字的水平居中方法

p{
/*垂直居中关键*/
  line-height: 200px;
  text-align:center;
  height: 200px;
}

padding填充

.children {
   width: 100px;
   height: 100px;
   padding: 50px;
   background-color: black;
   background-clip:content-box;/*居中的关键*/

translate(-50%,-50%)

#content{
  left:50%; top:50%; 
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  background-color:gray; 
  color:white; 
  position:absolute;
   }

绝对定位居中

前提是父容器元素：

position: relative

#content{
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

注意：高度必须定义，建议加 overflow: auto，防止内容溢出。

absolute定位

.children {

 position:absolute; 

 left:50%; 

 top:50%; 

 margin:-25px 0 0 -25px ;

 height:50px;

 width:50px;

 background-color: black;

}

flex居中

.parent {

 display:flex;

 align-items: center;/*垂直居中*/

 justify-content: center;/*水平居中*/

 width:100%;

 height:100%;

 background-color:red;

}

十七.text-decoration

//定义文本上的一条线。
text-decoretion：overline
//定义穿过文本下的一条线。
text-decoretion：line-through
//定义文本下的一条线。
text-decoretion：underline

十八.对ie浏览器的兼容

	<meta http-equiv="x-ua-compatible" content="IE=edge">

十九.动画无过渡效果

animation: turn 5s infinite cubic-bezier(0.37, 0.34, 0.74, 0.73);

二十.元素点击时去除蓝色背景

//1.移动/ipad端设置
cursor: none;

//2.设置user-select: none
				-moz-user-select: none; 
				/* 火狐 */
				-webkit-user-select: none;
				/*webkit浏览器*/
				-ms-user-select: none;
				/*IE10*/
				-khtml-user-select: none;
				/*早期浏览器*/
				user-select: none;
				 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

二十一.input，button变成圆角后,鼠标点击任有矩形边框解决

//设置轮廓
outline: none;

二十二.多媒体音频视频自动播放

autoplay="autoplay"

二十三.设置input输入框中placeholder字体颜色

input::-webkit-input-placeholder{
  color:#fff;
}

二十四.背景渐变

background-image: linear-gradient( 角度 , 颜色);

例子：
蓝色渐变：background-image: linear-gradient(to right , #7A88FF, #7AFFAF);

二十五.设置文本输入框中字体的颜色

input::-webkit-input-placeholder{
    color: #fff;
}

二十六.背景图片铺满屏幕

    body {

        margin: 0px;
        padding: 0px;
    }

    div.bg {
        background: url(./img/img3.jpg) repeat center;
        background-size: cover;
        position: fixed;
        inset: 0;
        z-index: -1;
    }

二十七.inset

inset=0;
//相等于
position:fiexd;
left:0;
bottom:0;
top:0; 
right:0;

二十八.防止审查时页面抖动

html, body {height:100%;overflow:auto;margin: 0;}
html{overflow-y:scroll;}

二十九.手机端点击标签有背景

.el-checkbox{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

二十九.取消a链接点击背景有背景色

 -webkit-tap-highlight-color:rgba(0,0,0,0);

三十.字体渐变

//从上到下
.style1{
	background: linear-gradient(to bottom,#f0610e, #e8771a, #fff34a);
  	-webkit-background-clip: text;
  	color: transparent;
} 
//从左到右
.style2{
	background: linear-gradient(to right,#f0610e, #e8771a, #fff34a);
  	-webkit-background-clip: text;
  	color: transparent;
}