行內元素和塊級元素

摘要： 行內元素和塊級元素 講講行內元素和塊級元素 在HTML中標籤元素大都是“塊級”元素或行內元素。 塊級元素 HTML <div class="wrap"> <div class="fluid"&g...

行內元素和塊級元素

講講行內元素和塊級元素

在HTML中標籤元素大都是“塊級”元素或行內元素。

塊級元素

HTML

<div class="wrap">
<div class="fluid">
我是div

</div>
</div>

CSS

.wrap{
width: 200px;
height: 200px;
background-color: #eee;
position: relative;

}
.fluid{
width: auto;
height: auto;
padding: 10px;
background-color: #ef4321;
position: absolute;
left: 10px;
right: 10px;

}

塊級元素的特徵

• 塊級元素內嵌塊級元素和行內元素
• 預設情況下，塊級元素會新起一行
• 預設情況下，塊級元素佔滿父級元素的width
• 塊級元素的width、height、padding、margin、line-height正常設定（可以達到想要的結果）

行內元素特徵

• 行內元素只能包含資料和其它行內元素
• 預設情況下，行內元素不會以新行開始
• 預設情況下行內元素width預設為元素內容的寬度
• 不能設定width、height、padding-top、padding-bottom、margin-top、margin-bttom、line-height(就算設定了也達不到想要的效果)

行內元素

列舉幾個常見的行內元素

• b,i,small,tt
• abbr,code,em,
• a,br,img,q,span,sub,sup
• button,input,label,select,textarea

參閱：行內元素

塊級元素

列舉幾個常見的塊級元素

• <div> 文件分割槽
• <form> 表單
• <address> 聯絡方式資訊
• <article> 文章內容
• <audio> 音訊播放
• <aside> 伴隨內容
• <canvas> 繪製圖形
• <dl> 定義列表
• <footer> 區段尾或頁尾
• <h1>,<h2>,<h3>,<h4>,<h5>,<h6> 標題級別 1-6
• <header> 區段頭或頁頭
• <ol> 有序列表
• <p> 行
• <section> 一個頁面區段
• 表格
• <ul> 無序列表
• <video> 視訊

參閱：塊級元素