行內元素和塊級元素
行內元素和塊級元素
講講行內元素和塊級元素
在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> 視訊
參閱:塊級元素