块级元素和行内元素的区别

前言：本文转载自原文。为了更好的理解相关概念，本文在原文的基础上做出了部分补充和修改。

一、概论

本部分内容先从整体上概括的阐述块级元素和行内元素的区别，主要从三个不同的角度介绍。

1. 元素排列位置

行内元素会在一行上显示，当此行上剩余的空间无法承载当前的行内元素时，此行内元素才会在新的一行上显示。每个元素是水平排列的

每个块级元素各占据一行。每个元素时竖直方向排列的。

2. 元素包含内容

块级元素可以包含行内元素和块级元素，宽度默认100%，即和浏览器同宽。行内元素不能包含块级元素，宽度无法设置，只和包含的内容有关。

3.盒子模型

行内元素设置width无效，height无效(可以设置line-height)，margin上下无效。
块级元素都可以设置。

二、详细说明

一、显示元素

（一）块级元素

div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre

HTML5：header、section、article、footer等等，还有一些没有列举的是在日常代码中不是非常常用

通过图片能够得到块级元素的几个特点：

1.块级元素独占一行，当没有设置宽高时，它默认设置为100%

2.块级元素允许设置宽高，width、height、margin、padding、border都可控制

3.块级元素可以包行内元素、块级元素

（二）、行内元素（内联函数）及行内块元素

（1）

span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u

button（display：inline-block）

 

通过图片可以得知：

1.行内元素不能独占一行，与其他行内元素排成一行

2.行内元素不能设置width、height、margin、padding

3.行内元素默认宽度为其content宽度

4.行内元素只能包括文字或行内元素、行内块元素，不能包括块级元素

5.display：inline-block：行内块元素与行内元素属性基本相同即不能独占一行，但是可以设置width及height

（2）有一些特别的行内元素可以设置宽高

替换元素：<img>、<input>、<textarea>、<select>、<object>

这些元素与其他行内元素不同的是，它有内在尺寸。因为它像是一个框，比如img元素，他能显示出图片是由于src的值，在审查元素时就不能直接看到图片，而input是输入框或是复选框也是因为其type的不同。

这种需要通过属性值显示的元素，其本身是一个空元素，像一个空的框架。

 

二、将行内元素分行显示或将块级元素同行显示

 

 

    display:block  -- 显示为块级元素（块级元素默认样式）
    display:inline  -- 显示为行内元素（行内元素默认样式）
    display:inline-block -- 显示为行内块元素，表现为同行显示并可修改宽高内外边距等属性（行内块元素默认属性）

 

    我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

三、其他小知识点

（1）关于行内元素和块级元素的嵌套问题

一般情况下块级元素可以包含行内元素行内块元素块级元素，行内元素不能包含块级元素，只能包含行内元素及行内块元素。

eg：下图为正确的嵌套

<div>

<span>

            <p></p>

        </span>

<p></p>

<input type="text">

</div>

有些特殊的块级元素不能包含块级元素,只能包含行内元素：h1~h6、p、dt

eg：当运行下图代码，审查元素时会发现div自动跑出p的内容

 

<p style="background-color:bisque;">

<div style="background-color: blue;height:20px;"></div>

</p>

（2）

两个小知识点，可以自己试一下：

img.big { height:50%;}

/* 当img作为body的直接子节点时，高度百分比是以body为标准的，

当设为50%时将下面的div挤出body范围 */

 

当img同时有内联样式，内部样式时，内联样式失效以内部样式为准