先区分内敛标签、块级标签、内联块级标签
块级标签特点:
1、使元素变成块元素,元素独自占一行,在不设置自己的宽度的时候 ,默认占满父元素的宽度。
2、能够改变元素的height,width的值。
3、可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果。
内敛标签的特点:
1、使元素变成内联元素,元素横向排列,没有宽度和高度,宽度和高度为自己包裹内容的大小。 2、不能够改变元素的height,weight的值。
3、可以设置padding的垂直方向属性值,和margin的水平方向的属性值。
内敛块级标签的特点:
1、使元素变成内联元素,元素独自占一行。
2、能够改变元素的height,width的值。
3、可以设置padding,margin的各个属性值,top,left,bottom,right都能产生边距效果。
几种可以水平居中的方式
1、子元素为内联元素,从父元素上居中 ;先看父元素是不是块级元素,如果是直接在父元素上添加:text-align:center 如果父元素不是块级元素先转换为块级元素,然后再添加:text-align:center。
2、子元素为块级元素,分为定宽度和不定宽度:当宽度给定的情况下,可从自己居中;margin:{0 auto;}当子元素的默认宽度和父元素一样时,我们可以把子元素转换成为内联元素,然后转换成1的做法。
3、使用flex布局,这种布局不需要考虑宽度,只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;
几种可以垂直居中的方式
1、要居中的子元素为单行的内联元素,可以让他的行高等于他的高度就可以了。
2、要居中的子元素为多行的内联元素时,可以在他的父元素上设置display:table,子元素上设置display:table-cell;和vertical-align:middle
3、要居中的子元素为块级元素时,可以使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;
小特效
1.摇动
css部分
.zwyShake {
background-color: red;
width: 40px;
height: 40px;
transform-origin: center bottom;
animation: zwyShake 2s 0.5s ease-out infinite;
}
@keyframes zwyShake {
0% {
transform: rotate(0deg);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
}
10% {
transform: rotate(-12deg);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
}
20% {
transform: rotate(12deg);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
}
28% {
transform: rotate(-10deg);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
}
36% {
transform: rotate(10deg);
transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
}
42% {
transform: rotate(-8deg);
transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
}
48% {
transform: rotate(8deg);
transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
}
52% {
transform: rotate(-4deg);
transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
}
56% {
transform: rotate(4deg);
transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
}
60% {
transform: rotate(0deg);
transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
}
100% {
transform: rotate(0deg);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
}
}
2.闪烁
@keyframes zwyHover1 {
0% {
transform: scale(1);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
.zwyHover1 {
display: flex;
--count: infinite;
width: 60px;
height: 30px;
background-color: blue;
align-items: center;
justify-content: center;
color: white;
border-radius: 50%;
animation: zwyHover1 .3s var(--count);
}
3、鼠标放入旋转
.img img {
transition: all 0.5s ease-out;
opacity: 1;
}
.img img:hover {
transform: rotate(720deg) scale(0);
opacity: 0;
}
效果图