css初始化代码
body {margin:0; padding:0; font:12px/1.5 "微软雅黑",\5b8b\4f53,Arial,sans-serif; color: #3b3b3b;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
ol,ul {list-style:none;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:normal;}
address,cite,code,em,th,i{font-weight:normal; font-style:normal;}
.clearfix{*zoom:1;}
.clearfix:after{display:block; overflow:hidden; clear:both; height:0; visibility:hidden; content:".";}
a {color:#252525; text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {color:#ba2636;text-decoration:underline;}
a:active {color:#ba2636;}
初始化css的目的是为了样式统一,解决谷歌浏览器和IE浏览器兼容性问题
清除浮动代码和简单的初始化代码:
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
当上面盒子没有设定高度时,必须清除浮动,否则下面的盒子就会自动浮动上去。
margin和padding的细节问题,padding需要计算边框的宽度,写了padding如果不修改宽或者高就会溢出,所以必须把宽或者高修改小一点。比如padding-top: 10px;height就得减少10px;
外边距塌陷:当父盒子和子盒子,给子盒子设置margin-top/bottom的时候,父盒子会被子盒子带下来,这种情况就叫外边距塌陷,解决方式就是给父盒子css添加over:hidden。
<style>
*{
margin: 0;
}
.out{
width: 200px;
height: 200px;
background: pink;
overflow:hidden;
}
.in{
width: 100px;
height: 50px;
margin: 30px auto;
background: #ccc;
}
</style>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
文字居中,垂直居中,让高等于行高,适用于常见的行内块元素,如p,h1到h6,span,img,input,textarea,a标签等。
text-align: center;
height: 10px;
line-height:10px;
固定定位,绝对定位和相对定位区别是什么,它们的基准分别是什么?
绝对定位是以浏览器的边框为基准的,也就是根元素的body,而相对定位是它的上一级父盒子为基准,在父盒子css里写relative,子盒子css里写absolute,写上top,left,right,bottom值,也可以写其中2个值。
固定定位也是以浏览器的body为基准,固定的定在那,盒子里写fixed,使用场景一般为网页右边的回到顶部按钮,小广告框等。