css常见bug

版权声明：属本人原创内容，转载需声明。 https://blog.csdn.net/JJandYY135/article/details/83904586

边学边总结：
- 解决margin-top塌陷，清除父类浮动以及支持IE浏览器（非标浏览器），综合写法:

/* 塌陷，浮动共有方法 */
.clearfix:before,.clearfix:after{
	content: "";
	display: table;
}
/* 清除父类浮动 */
.clearfix:after{
	clear: both;
}
/* 解决IE不支持问题，固定网页不缩放 */
.clearfix{
	zoom:1;
}

使用的时候吧clearfix加到class中就可以了。

---

- 定位元素设置居中的方法：

/* 水平居中 */
left: 50%;
margin-left: -盒子width/2;
/* 垂直居中 */
top: 50%;
margin-top: -盒子height/2;

---

- 自身带有margin和padding的元素：

• body本身带有8px的margin，设置body{margin：0}来清除。
• h元素默认带有margin属性
• ul元素有margin和padding属性

---

- background-position 设置背景图片的位置:

• background-position: 水平方向 垂直方向;

• background-position后面的两个值分别表示水平方向和垂直方向

  • 水平方向：left、center、right
  • 垂直方向：top、center、bottom、

• 也可以直接写数值：

  • background-position: 20px 10px；