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的目的是為了樣式統(tǒng)一,解決谷歌瀏覽器和IE瀏覽器兼容性問題
清除浮動(dòng)代碼和簡單的初始化代碼:
.clearfix:after{/*偽元素是行內(nèi)元素 正常瀏覽器清除浮動(dòng)方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮動(dòng)的方式 *號(hào)只有IE6-IE7執(zhí)行绑青,其他瀏覽器不執(zhí)行*/
}
當(dāng)上面盒子沒有設(shè)定高度時(shí)诬像,必須清除浮動(dòng),否則下面的盒子就會(huì)自動(dòng)浮動(dòng)上去闸婴。
margin和padding的細(xì)節(jié)問題坏挠,padding需要計(jì)算邊框的寬度,寫了padding如果不修改寬或者高就會(huì)溢出邪乍,所以必須把寬或者高修改小一點(diǎn)降狠。比如padding-top: 10px;height就得減少10px;
外邊距塌陷:當(dāng)父盒子和子盒子,給子盒子設(shè)置margin-top/bottom的時(shí)候庇楞,父盒子會(huì)被子盒子帶下來榜配,這種情況就叫外邊距塌陷,解決方式就是給父盒子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>
文字居中蛋褥,垂直居中,讓高等于行高睛驳,適用于常見的行內(nèi)塊元素烙心,如p,h1到h6乏沸,span淫茵,img,input蹬跃,textarea匙瘪,a標(biāo)簽等。
text-align: center;
height: 10px;
line-height:10px;
固定定位,絕對(duì)定位和相對(duì)定位區(qū)別是什么丹喻,它們的基準(zhǔn)分別是什么算灸?
絕對(duì)定位是以瀏覽器的邊框?yàn)榛鶞?zhǔn)的,也就是根元素的body驻啤,而相對(duì)定位是它的上一級(jí)父盒子為基準(zhǔn),在父盒子css里寫relative荐吵,子盒子css里寫absolute骑冗,寫上top,left,right,bottom值,也可以寫其中2個(gè)值先煎。
固定定位也是以瀏覽器的body為基準(zhǔn)贼涩,固定的定在那,盒子里寫fixed薯蝎,使用場景一般為網(wǎng)頁右邊的回到頂部按鈕遥倦,小廣告框等。