前端新人學(xué)習(xí)筆記第三波來(lái)襲，你準(zhǔn)備好了么？不知道前兩節(jié)的知識(shí)點(diǎn)有沒(méi)有記住呢？廢話不多說(shuō)了，今天小編開(kāi)始給大家整理，第三篇關(guān)于html/css/js基礎(chǔ)知識(shí)點(diǎn)。
一：默認(rèn)樣式重置
但凡是瀏覽默認(rèn)的樣式，都不要使用。
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
二：塊元素和內(nèi)嵌元素
塊元素的特征:
1.默認(rèn)獨(dú)占一行；
2.沒(méi)有寬度時(shí)，默認(rèn)撐滿一排；
3.支持所有css命令；
內(nèi)聯(lián)元素的特征：
1.同類的標(biāo)簽可以在同排顯示；
2.不支持寬高；
3.內(nèi)容撐開(kāi)寬度；
4.不支持上下的margin和padding;
5.代碼換行被解析；
三：塊元素和內(nèi)嵌元素的轉(zhuǎn)換
display:block 使內(nèi)聯(lián)元素具備塊屬性標(biāo)簽的特性；
display:inline 使塊元素具備內(nèi)嵌元素的特性。
display:inline-block
特性：
1.塊在一行顯示；
2.行內(nèi)屬性標(biāo)簽支持寬高；
3.沒(méi)有寬度的時(shí)候內(nèi)容撐開(kāi)；
問(wèn)題：
1.代碼換行被解析；
2.ie6,7不支持塊屬性標(biāo)簽的inline-block;
四：浮動(dòng)
1.塊在一排顯示；
2.內(nèi)聯(lián)元素也支持寬高了；
3.默認(rèn)內(nèi)容撐開(kāi)寬度；
4.脫離文檔流；
5.提升層級(jí)半層
<div style="float:left;">wo shi div</div>
這個(gè)時(shí)候div標(biāo)簽就和里面的內(nèi)容位于同一層級(jí)了。
<style>
body{ font-size:20px;}
.box1{ width:100px;height:100px;background:red; float:left;}
.box2{ width:200px;height:200px;background:blue;}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
這個(gè)時(shí)候會(huì)出現(xiàn)這樣的現(xiàn)象，這就和提升了半個(gè)層級(jí)有關(guān)。好了，今天就分享到這里，希望匯仁智杰小編整理的筆記能夠?qū)ο雽W(xué)習(xí)的您有所幫助。
