css常见bug

边学边总结:
- 解决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;

你可能感兴趣的:(前端)