行內元素和塊級元素的具體區別是什麼？inline-block是什麼？（面試題目）

時間 2019-11-18

標籤元素具體區別什麼 inline block 面試題目欄目快樂工作简体版

原文原文鏈接

一，行內元素與塊級元素的區別：css

1.行內元素與塊級元素直觀上的區別2、行內元素與塊級元素的三個區別html

行內元素會在一條直線上排列（默認寬度只與內容有關），都是同一行的，水平方向排列。chrome

塊級元素各佔據一行（默認寬度是它自己父容器的100%（和父元素的寬度一致），與內容無關），垂直方向排列。塊級元素重新行開始，結束接着一個斷行。瀏覽器

2.塊級元素能夠包含行內元素和塊級元素。行內元素不能包含塊級元素，只能包含文本或者其它行內元素。框架

3.行內元素與塊級元素屬性的不一樣，主要是盒模型屬性上：行內元素設置width無效，height無效(能夠設置line-height)，margin上下無效，padding上下無效wordpress

2、行內元素和塊級元素轉換字體

display:block; (字面意思表現形式設爲塊級元素)spa

display:inline; (字面意思表現形式設爲行內元素)code

3、inline-blockorm

inline-block 的元素（如input、img)既具備 block 元素能夠設置寬高的特性，同時又具備 inline 元素默認不換行的特性。固然不單單是這些特性，好比 inline-block 元素也能夠設置 vertical-align（由於這個垂直對齊屬性只對設置了inline-block的元素有效）屬性。
HTML 中的換行符、空格符、製表符等合併爲空白符，字體大小不爲 0 的狀況下，空白符天然佔據必定的寬度，使用inline-block 會產生元素間的空隙。（這句話下面會用例子解釋）

仍是似懂非懂嗎，來看下例子吧，保證就懂了

詳細應用

在瞭解inline-block以前,導航欄一直採用float浮動來達到橫向排列的目的，然而浮動是會產生反作用的，須要清除浮動,相對變得麻煩了。使用inline-block將會變得很方便：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100%;
            background: yellow;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        a{
            color:#fff;
            text-decoration: none;
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            background: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="">我是a1</a>
        <a href="">我是a2</a>
        <a href="">我是a3</a>
        <a href="">我是a4</a>
    </div>
</body>
</html>

效果

有沒有發現，每一個a之間都會有一個空隙，這個空隙是由於塊級元素會換行，就有換行，HTML 中的換行符、空格符、製表符等合併爲空白符.因此換行符會佔據寬度,產生間隙

如何取消inline-block產生的間隙

下面舉例說明2種方法，更多方法請參考張鑫旭文章：去除inline-block元素間間距的N種方法

第一種

使用負值的margin各個瀏覽器的負值也不相同，才能完美貼合

瀏覽器	margin值(左右)
火狐	margin:-4px
chrome	margin:-3px
IE	margin:-2px

第二種

在父元素的css中設置word-spacing負值

瀏覽器	word-spacing
火狐	word-spacing:-8px
chrome	word-spacing:-6px
IE	word-spacing:-4px

效果

兼容性

很遺憾，IE7如下的瀏覽器不支持inline-block，但並不是徹底不支持

解決IE六、IE7兼容性的方法：

一、首先設置inline-block觸發塊元素，具備了layout的特性，而後設置display:inline使塊元素呈現內聯元素，此時layout的特性不會消失。

二、直接設置display:inline，使用zoom:1觸發layout。

兼容全部瀏覽器的方法是：

display:inline-block;

*display:inline;

*zoom:1;

塊級元素列表
<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>	定義變量

可變元素素列表--可變元素爲根據上下文語境決定該元素爲塊元素或者內聯元素
<button>	按鈕
<del>	定義文檔中已被刪除的文本
<iframe>	建立包含另一個文檔的內聯框架（即行內框架）
<ins>	標籤訂義已經被插入文檔中的文本
<map>	客戶端圖像映射（即熱區）
<object>	object對象
<script>	客戶端腳本