自己的日常笔记！

图片相关问题

图片居中相关问题：

div:block父类元素        img:图片

方法一：（无缺陷）

div{
    text-align:center;/*图片水平居中*/
    line-height:...;
}
img{ 
    vertical-align:middle;
}

方法二：（有缺陷,会改变block父类元素类别）

div{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}

图片的间隙问题：

方法一：改变图片类型

img{display:block;}

方法二：垂直定位 （上 中 下 均可）

img{vertical-align:top;}

方法三：给父元素图片大小的宽度和高度

father{width: ;height:;}

方法四：加浮动

img{float:left;}

---

高度塌陷问题：

在子元素浮动后，父元素高度为零。

方法一：子元素后面添加一个空白标签

element {clear:both;}

方法二：在父元素加后伪类元素 不显示伪类元素

.clearfix：:after {
    			content:"";
				display:block;
    			clear:both;
    			/*visbility：hidden；*/
				}

方法三：前后都添加伪类元素(用最多的方法)

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

方法四：给父元素添加高度。

---

标签位置问题

方法一：改变标签类型（推荐使用这个）

a {display:inline-block;}/*a{display:block;}*/

方法二：添加浮动

a {float:left;}

---

重复渐进问题：

重复渐进只会重复渐进区域

---

动画相关问题：

1. 一定要给元素高度、宽度。
2. X、Y、Z轴书写顺序有影响。
3. 覆盖问题一定记住。

---

设置元素不可见方法：

方法一：

element {
    display：none；
}

方法二：

element{
    opacity: 0; 
}

方法三：

element{
    transform:scale(0);
}