前端

1、图片和文字居中显示：

vertical-align:middle

2、图片底部默认有空白区域：

vertical-align：bottom

3、单行文本溢出显示省略号：

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

4、多行文本溢出显示省略号

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;

5、solid单实线 dotted点线
double双实线 dashed虚线
6.当使用magin塌陷时的解决方法：

border:1px solid transparent

7、magin：0 auto在固定定位和绝对定位起不到作用，如果想要在中间的话使用
left：50% margin-left：盒子大小负的一半
或最好的办法是

left:50% ;  transform:translate(-50%)

8、制作等腰三角形

width:0;    height:0;  (必须要有)
border:20px  solid  trasparent;
border-left-color:skyblue;

9、制作直角三角形

width:0 ;  height:0;
border-top:100px solid transparent;
border-right:50px solid orange;
border-bottom:0px solid pink;
border-left:0px solid skyblue;

或

border-color:translparent red transparent transparent
border-style:solid
border-width:100px 50px 0 0

10、文字中间划一条横线

text-decoration:line-through

11、当使用padding和border时不会撑开盒子

box-sizing:border-box

12、filter:blur(15px)模糊图片
13、width:calc(100%-80px)
14、过渡transition:width .5s
15、logo SEO优化
(1)logo里放h1
(2)h1里面放链接
(3)链接里放文字但文字不显示出来
方法一：
text-indent:-9999px; overflow:hidden;
方法二:
font-size:0;
(4)最后给链接一个title属性，这样鼠标放在logo上就可以看到提示文字了。
16.如果是焦点图的话img要放在ul和li里面
17、图片下有一条缝 line-height:0;
18.图片变大效果
html

<div>
    < img src="images/img.png" alt="">
  </div>

css

 div{
      overflow: hidden;
    }
    div img{
      transition: all .4s;
    }
    div img:hover{
      transform: scale(1.1);
    }

19. 2D
    移动位置：transform:translate(20,30);
    旋转:transform:rotate(45deg);
    放大缩小：transform:scale(1.2);
    旋转位置：transform-origin:left bottom;
    过渡：transistion:all 0.4s;
    20.动画
    (1)动画名称:

animation-name:move;

(2)持续时间:

animation-duration:2s;

(3)运动曲线:

animation-timing-function:ease;

(4)何时开始:

animation-delay:1s;

(5)重复次数:

animation-iteration-count:infinite;

(6)反方向播放:

animation-direction:alternate;

(7)播放结束停留:

animation-fill-mode:forwards;

(8)鼠标经过停止:

animation-play-state:running

(9)步数:

animation-timing-function:steps(10)

21.使用flex布局，float、clear、vertical-align属性将会失效
22.(1)设置主轴方向:

flex-direction:row/column

(2)让子元素居中对齐：

justify-content:center

平分剩余空间：

justify-content:space-around

先贴两边，再分配剩余的空间：

justify-content:space-between

(3)设置子元素换行：

flex-wrap:wrap

(4)侧轴居中(单行):

align-items:center

(5)在侧轴中间显示(多行):

align-content:center

(6)子项在侧轴平分剩余空间:

align-content:space-around

(7)子项在侧轴先分布在两头，再平分剩余空间

align-content:space-between

(8)设置主轴方向和是否换行(简写)

flex-flow:column wrap

(9)控制子项在侧轴上的排列方式：

align-self:flex-end

(10)order:-1 越小越靠前
23.固定（固定定位）的盒子要有宽度
width：100%
24.背景渐变：

background:-webkit-linear-gradient(left,red,blue)

25、将common.css文件导入index.css
(1)创建一个index.less
(2)输入 @import “common”;
26、页面元素rem计算公式：
页面元素的px / html 字体大小
27、提权
在后面加 !import;
28、点击文字也可以选中

<label for="man">男</label>
<input type="radio" name="sex" id="man">

29、点击链接另起一个窗口

target="_blank"

30、把<a href>里面文字的下划线去掉

a{
    text-decoration:none;
}

31.把li前面的圆圈去掉
li{
list-style:none;
}
32.使用绝对定位position:absoult时margin起不到作用
33.给边框阴影：

box-shadow：0 2px 4px rgb(0,0,0,.2)

34.文本阴影效果：

text-shadow:1px 1px rgb(0,0,0,.2)

35.边框圆角

border-radius:5px

36.效果图: >

div::after{
      content: '';
      position: absolute;
      top: 0px;
      right: 9px;
      width: 10px;
      height: 10px;
      border-top: 1px solid skyblue;
      border-right: 1px solid skyblue;
      transform: rotate(135deg);
    }

37.（1）段落标签：<p></p>
（2）换行标签：

（3）加粗：<strong></strong> 或 <b></b>
（4）倾斜：<em></em> 或<i></i>
（5）删除线：<del></del> 或者 <s></s>
（6）下划线：<ins></ins> 或者 <u></u>
38.文本缩进：

p{
      text-indet:2em
}

39.快速格式化代码：shift+alt+f
40.背景图像固定

background-attachment:scroll 或 fixed

41.背景半透明

background:rgba(0,0,0,.3)

42.去掉轮廓线

input{
    outline:none
}

43.防止拖拽文本域

textarea{
    resize:none
}

44.当我们鼠标经过button按钮的时候，鼠标变成小手
button{
cursor:pointer
}
45.清除浮动

.clearfix:before,.clearfix:after{
      content: '';
      display: table;
  }
  .clearfix:after{
      clear: both;
  }
  .clearfix{
      *Zoom:1;
  }