前端新人學習筆記第三波來襲,你準備好了么?不知道前兩節(jié)的知識點有沒有記住呢?廢話不多說了,今天小編開始給大家整理,第三篇關于html/css/js基礎知識點。
一:默認樣式重置
但凡是瀏覽默認的樣式,都不要使用。
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.默認獨占一行;
2.沒有寬度時,默認撐滿一排;
3.支持所有css命令;
內(nèi)聯(lián)元素的特征:
1.同類的標簽可以在同排顯示;
2.不支持寬高;
3.內(nèi)容撐開寬度;
4.不支持上下的margin和padding;
5.代碼換行被解析;
三:塊元素和內(nèi)嵌元素的轉(zhuǎn)換
display:block 使內(nèi)聯(lián)元素具備塊屬性標簽的特性;
display:inline 使塊元素具備內(nèi)嵌元素的特性。
display:inline-block
特性:
1.塊在一行顯示;
2.行內(nèi)屬性標簽支持寬高;
3.沒有寬度的時候內(nèi)容撐開;
問題:
1.代碼換行被解析;
2.ie6,7不支持塊屬性標簽的inline-block;
四:浮動
1.塊在一排顯示;
2.內(nèi)聯(lián)元素也支持寬高了;
3.默認內(nèi)容撐開寬度;
4.脫離文檔流;
5.提升層級半層
<div style="float:left;">wo shi div</div>
這個時候div標簽就和里面的內(nèi)容位于同一層級了。
<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>
這個時候會出現(xiàn)這樣的現(xiàn)象,這就和提升了半個層級有關。好了,今天就分享到這里,希望匯仁智杰小編整理的筆記能夠?qū)ο雽W習的您有所幫助。