# 行内元素和块级元素
`HTML`可以将元素种类分为行内元素、块级元素和行内块级元素三种，在使用过程中可以通过`CSS`的`display`属性相互转换。

## 行内元素
行内元素对应的`CSS`样式设置为`display: inline;`。

### 特点
* 元素排在一行。
* 封闭后不会自动换行。
* 不能指定高度与宽度。
* 可以使用`line-height`来指定高度。
* 外边距对于水平方向有效，垂直方向无效。
* 内边距对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响。

### 示例
```html
<span>行内元素1</span> <!-- 排列在一行 -->
<span>行内元素2</span> <!-- 排列在一行 -->
<span>行内元素3</span> <!-- 排列在一行 -->
<style type="text/css">
    span{
        width: 1000px; /* 指定宽度无效果 */
        height: 1000px; /* 指定高度无效果 */
        color: #333;
        background: #eee;

        padding: 100px 20px; /* padding对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响 */
        margin: 100px 20px; /* margin水平方向有效，垂直方向无效 */
    }
</style>
```

### 常见行内元素
`<a>`、`<span>`、`<b>`、`<big>`、`<i>`、`<small>`、`<tt>`、`<abbr>`、`<acronym>`、`<cite>`、`<code>`、`<dfn>`、`<em>`、`<kbd>`、`<strong>`、`<samp>`、`<var>`、`<bdo>`、`<br>`、 `<img>`、`<iframe>`、`<map>`、`<object>`、`<q>`、`<script>`、`<sub>`、`<sup>`、`<button>`、`<input>`、`<label>`、`<select>`、`<textarea>`。


## 块级元素
块级元素对应的`CSS`样式设置为`display: block;`。

### 特点
* 独占一行。
* 封闭后自动换行。
* 默认宽度为`100%`。
* 可以指定宽度和高度。
* 内外边距对于四个方向有效。

### 示例
```html
<div>块级元素1</div> <!-- 独占一行 -->
<div>块级元素2</div> <!-- 自动换行 -->
<style type="text/css">
    div{
        width: 100px; /* 不指定则默认宽度100% */
        height: 100px; /* 可以指定高度 */
        color: #333;
        background: #eee;

        padding: 10px 20px; /* padding的设置在四个方向都有效 */
        margin: 10px 20px; /* margin的设置在四个方向都有效 */
    }
</style>
```

### 常见块级元素
`<div>`、`<address>`、`<article>`、`<aside>`、`<audio>`、`<blockquote>`、`<canvas>`、`<dd>`、`<dl>`、`<fieldset>`、`<figcaption>`、`<figure>`、`<footer>`、`<form>`、`<h1>~<h6>`、`<header>`、`<hgroup>`、`<hr>`、`<noscript>`、`<ol>`、`<output>`、`<p>`、`<pre>`、`<section>`、`<table>`、`<tfoot>`、`<ul>`、`<video>`。

## 行内块级元素
行内块级元素对应的`CSS`样式设置为`display: inline-block;`。

### 特点
* 可以指定宽度和高度。
* 内外边距对于四个方向有效。
* 元素排在一行，但是会有空白缝隙。

### 示例
```html
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<input /><!-- 排列在一行 -->
<style type="text/css">
    input{
        width: 100px; /* 可以指定宽度 */
        height: 100px; /* 可以指定高度 */

        padding: 10px 20px; /* padding的设置在四个方向都有效 */
        margin: 100px 20px; /* margin的设置在四个方向都有效 */
    }
</style>
```
### 常见行内块级元素
`<input>`、`<img>`、`<button>`、`<iframe>`、`<textarea>`、`<select>`。

## 代码示例

```html
<!DOCTYPE html>
<html>
<head>
    <title>行内元素与块级元素</title>
    <style type="text/css">
        div{
            width: 100px; /* 不指定则默认宽度100% */
            height: 100px; /* 可以指定高度 */
            color: #333;
            background: #eee;

            padding: 10px 20px; /* padding的设置在四个方向都有效 */
            margin: 10px 20px; /* margin的设置在四个方向都有效 */
        }

        span{
            width: 1000px; /* 无法指定宽度 */
            height: 1000px; /* 无法指定高度 */
            color: #333;
            background: #eee;

            padding: 100px 20px; /* padding对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响 */
            margin: 100px 20px; /* margin水平方向有效，垂直方向无效 */
        }

        input{
            width: 100px; /* 可以指定宽度 */
            height: 100px; /* 可以指定高度 */

            padding: 10px 20px; /* padding的设置在四个方向都有效 */
            margin: 100px 20px; /* margin的设置在四个方向都有效 */
        }


    </style>
</head>
<body>

    <section>
        <div>块级元素1</div> <!-- 独占一行 -->
        <div>块级元素2</div> <!-- 自动换行 -->
    </section>


    <section >
        <span>行内元素1</span> <!-- 排列在一行 -->
        <span>行内元素2</span> <!-- 排列在一行 -->
        <span>行内元素3</span> <!-- 排列在一行 -->
    </section>

    <section >
        <input /><!-- 排列在一行 -->
        <input /><!-- 排列在一行 -->
        <input /><!-- 排列在一行 -->
    </section>


</body>
</html>
```


## 每日一题
```
https://github.com/WindrunnerMax/EveryDay
```

## 参考

```
https://developer.mozilla.org/zh-CN/docs/Web/HTML
https://blog.csdn.net/zhanglir333/article/details/79178370
https://www.jeffjade.com/2015/06/24/2015-06-24-css-block-inline/
```