CSS初始化,浮動(dòng)厕倍,外邊距塌陷摧玫,定位

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)頁右邊的回到頂部按鈕遥倦,小廣告框等。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末占锯,一起剝皮案震驚了整個(gè)濱河市袒哥,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌消略,老刑警劉巖堡称,帶你破解...
    沈念sama閱讀 206,482評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異艺演,居然都是意外死亡却紧,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,377評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門胎撤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來晓殊,“玉大人,你說我怎么就攤上這事伤提∥装常” “怎么了?”我有些...
    開封第一講書人閱讀 152,762評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵肿男,是天一觀的道長识藤。 經(jīng)常有香客問我,道長次伶,這世上最難降的妖魔是什么痴昧? 我笑而不...
    開封第一講書人閱讀 55,273評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮冠王,結(jié)果婚禮上赶撰,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好豪娜,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,289評(píng)論 5 373
  • 文/花漫 我一把揭開白布餐胀。 她就那樣靜靜地躺著,像睡著了一般瘤载。 火紅的嫁衣襯著肌膚如雪否灾。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,046評(píng)論 1 285
  • 那天鸣奔,我揣著相機(jī)與錄音墨技,去河邊找鬼。 笑死挎狸,一個(gè)胖子當(dāng)著我的面吹牛扣汪,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播锨匆,決...
    沈念sama閱讀 38,351評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼崭别,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了恐锣?” 一聲冷哼從身側(cè)響起茅主,我...
    開封第一講書人閱讀 36,988評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎土榴,沒想到半個(gè)月后暗膜,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,476評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡鞭衩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,948評(píng)論 2 324
  • 正文 我和宋清朗相戀三年学搜,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片论衍。...
    茶點(diǎn)故事閱讀 38,064評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡瑞佩,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出坯台,到底是詐尸還是另有隱情炬丸,我是刑警寧澤,帶...
    沈念sama閱讀 33,712評(píng)論 4 323
  • 正文 年R本政府宣布蜒蕾,位于F島的核電站稠炬,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏咪啡。R本人自食惡果不足惜首启,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,261評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望撤摸。 院中可真熱鬧毅桃,春花似錦褒纲、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,264評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至读宙,卻和暖如春彻秆,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背结闸。 一陣腳步聲響...
    開封第一講書人閱讀 31,486評(píng)論 1 262
  • 我被黑心中介騙來泰國打工唇兑, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人膀估。 一個(gè)月前我還...
    沈念sama閱讀 45,511評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像耻讽,于是被迫代替她去往敵國和親察纯。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,802評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容