首頁 > 開發者 > JavaScript
前端新人學習筆記-------html/css/js基礎知識點（三），學習筆記-------html
這斷時間家裡有點事，上班也有點任務，所以幾天沒看視頻沒來更新了。今天來更新一下了。
一：預設樣式重設
但凡是瀏覽預設的樣式，都不要使用。
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;}
二：塊元素和內嵌元素
塊元素的特徵:
1.預設獨佔一行；
2.沒有寬度時，預設撐滿一排；
3.支援所有css命令；
內嵌元素的特徵：
1.同類的標籤可以在同排顯示；
2.不支援寬高；
3.內容撐開寬度；
4.不支援上下的margin和padding;
5.代碼換行被解析；
三：塊元素和內嵌元素的轉換
display:block 使內嵌元素具備塊屬性標籤的特性；
display:inline 使塊元素具備內嵌元素的特性。
display:inline-block
特性：1.塊在一行顯示；
2.行內屬性標籤支援寬高；
3.沒有寬度的時候內容撐開；
問題：1.代碼換行被解析；
2.ie6,7不支援塊屬性標籤的inline-block;
四：浮動
1.塊在一排顯示；
2.內嵌元素也支援寬高了；
3.預設內容撐開寬度；
4.脫離文檔流；
5.提升層級半層
<div style="float:left;">wo shi div</div>
這個時候div標籤就和裡面的內容位於同一層級了。
<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>
這個時候會出現這樣的現象，這就和提升了半個層級有關。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
