博客轉載於：https://blog.csdn.net/swebin/article/details/90405950
塊級元素 block
塊級元素，該元素呈現塊狀，所以他有自己的寬度和高度，也就是可以自定義width和Height，塊元素獨占頁面的一行，可以作為容器使用，可以容納塊級元素和行內元素。塊級元素有以下特點
- 每個塊元素都獨占頁面的一行
- 高度和寬度是可以設置的
- 元素的寬度不設置的話默認為父元素的寬度
常見的塊元素
<address>//定義地址 <caption>//定義表格標題 <dd> //定義列表中定義條目 <div> //定義文檔中的分區或節 <dl> //定義列表 <dt> //定義列表中的項目 <fieldset> //定義一個框架集 <form> //創建 HTML 表單 <h1> //定義最大的標題 <h2> // 定義副標題 <h3> //定義標題 <h4> //定義標題 <h5> //定義標題 <h6> //定義最小的標題 <hr> //創建一條水平線 <legend> //元素為 fieldset 元素定義標題 <li> //標簽定義列表項目 <noframes> //為那些不支持框架的瀏覽器顯示文本，於 frameset 元素內部 <noscript> //定義在腳本未被執行時的替代內容 <ol> //定義有序列表 <ul> //定義無序列表 <p> //標簽定義段落 <pre> //定義預格式化的文本 <table> //標簽定義 HTML 表格 <tbody> //標簽表格主體（正文） <td> //表格中的標准單元格 <tfoot> //定義表格的頁腳（腳注或表注） <th> //定義表頭單元格 <thead> //標簽定義表格的表頭 <tr> //定義表格中的行
行內元素
其不可以設置寬和高，可以與其他行內元素共位於頁面的一行，行內元素一般不可以包含塊級元素。行內元素的的寬度和高度一般被內容撐滿，
行內元素有以下特點：
- 可以和其他行內元素共位於頁面的一行，當放不下時則會換行
- 高度寬度行高底部邊距不可以設置
常見的行內元素：
<a> //標簽可定義錨 <abbr> //表示一個縮寫形式 <acronym> //定義只取首字母縮寫 <b> //字體加粗 <bdo> //可覆蓋默認的文本方向 <big> //大號字體加粗 <br> //換行 <cite> //引用進行定義 <code> // 定義計算機代碼文本 <dfn> //定義一個定義項目 <em> //定義為強調的內容 <i> //斜體文本效果 <img> //向網頁中嵌入一幅圖像 <input> //輸入框 <kbd> //定義鍵盤文本 <label> //標簽為 input 元素定義標注（標記） <q> //定義短的引用 <samp> //定義樣本文本 <select> // 創建單選或多選菜單 <small> //呈現小號字體效果 <span> //組合文檔中的行內元素 <strong> //加粗 <sub> //定義下標文本 <sup> //定義上標文本 <textarea> //多行的文本輸入控件 <tt> //打字機或者等寬的文本效果 <var> // 定義變量
行內塊級元素 inline-block
行內塊級元素，它既具有塊級元素的特點，也有行內元素的特點，它可以自由設置元素寬度和高度，也可以在一行中放置多個行內塊級元素。比如input、img就是行內塊級元素，它可以設置高寬以及一行多個。具體特點如下：
- 和其他行內或行內塊級元素元素放置在同一行上；
- 元素的高度、寬度、行高以及頂和底邊距都可設置。
元素類型轉換display
display：block ，定義元素為塊級元素
display : inline ，定義元素為行內元素
display：inline-block，定義元素為行內塊級元素。