- A+
所属分类：前端
元素特性
块级元素block特性
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度width、高度height、内边距padding和外边距margin都可控制。
行内元素inline特性
和相邻的行内元素在同一行;宽度width、高度height、内边距的top/bottom/padding-top/padding-bottom和外边距的top/bottom/margin-top/margin-bottom都不可改变，就是里面文字或图片的大小。
常见块级元素和行内元素
块级元素和行内元素见下表，其中，另有一类可变元素(即根据上下文关系确定该元素是块元素还是行内元素)applet,button,del,iframe，ins，map，object，script。
CSS中块级、行内元素的应用
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
display:block显示为块级元素display:inline显示为行内元素dipslay:inline-block显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。常将ul元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
常见误区
网络有关块级元素和行内元素区别的有关知识，很多是错误的，测试发现：
- 行内元素的
margin-left/margin-right及padding-left/padding-rigtht是可以控制的，所以可以通过这4个属性来控制行内元素的宽度。 - 行内元素的内部也可以放块级元素标签，而且内部的块级元素标签会撑大外部的内联标签，所以可以通过放块元素来控制行内元素的高度(网上介绍的是行内元素只能放文本及其他行内元素)。
col，colgroup，frameset，html，style，table，tbody，tfoot，thead，title，tr，td等几个元素标签是只读的，也就是不能使用innerHTML等进行动态赋值。
例如：
<a>
<div style="width:100px;height:100px;">测试</div>
</a>HTML5
在HTML5中元素按照内容分类。块元素接近Flow content，行内元素接近Phrasing content。
块元素
<address>Contact information. [地址]<article>Article content.[文章]<aside>Aside content.[边栏]<blockquote>Long ("block") quotation.[块引用]<canvas>Drawing canvas.[画布]<dd>Describes a term in a description list.[描述]<div>Document division.[分区]<dl>Description list.[定义列表]<li>Description list term.[条目描述]<fieldset>Field set label.[form控制组]<figcaption>Figure caption.[题图]<figure>Groups media content with a caption (see<figcaption>).[图]<footer>Section or page footer.[脚]<form>Input form.[表单]<h1>,<h2>,<h3>,<h4>,<h5>,<h6>Heading levels 1-6.[标题]<header>Section or page header.[头]<hgroup>Groups header information.[]<hr>Horizontal rule (dividing line).[水平线]<li>List item.[列表条目]<main>Contains the central content unique to this document.[主要]<nav>Contains navigation links.[导航]<noscript>Content to use if scripting is not supported or turned off.[]<ol>Ordered list.[有序列表]<output>Form output.[]<p>Paragraph.[段落]<pre>Preformatted text.[]<section>Section of a web page.[]<table>Table.[表]<tfoot>Table footer.[]<ul>Unordered list.[无序列表]<video>Video player.[]
行元素
<a>Hyperlink.[超链接]<b>Bold.[加粗]<big>Big.[大字体]<i>Italic.[斜体]<small>Small.[小字体]<tt>Teletype Text Element.[]<abbr>Abbreviation.[缩写]<acronym>Acronym.[]<cite>Citation.[引用]<code>Code.[代码]<dfn>Definition.[定义]<em>Emphasis.[强调]<kbd>Keyboard.[键盘]<strong>Strong.[加粗]<samp>Sample.[例]<time>Time.[时间]<var>Variable.[变量]<bdo>Bidirectional Override.[]<br>Break.[换行]<img>Image.[图片]<map>Map.[地图]<object>Object.[]<q>Quotation.[直接引用]<script>Script.[脚本]<span>Span.[]<sub>Lower and smaller.[下标]<sup>Higher and smaller.[上标]<button>Button.[按钮]<input>Input.[]<label>Label.[标签]<select>Select.[选择]<textarea>Textarea.[多行输入]
独角兽驿站
公众号
