HTML 块级元素和行内元素

HTML元素一般分为两类，一种叫块级元素（block），另外一种叫行内元素（inline）。块级元素的排列，总是另起一行，说形象点，就是块级元素是恶霸，块级元素会自动霸占整个一行。行内元素就比较比较文明，不会霸占整个一行的。

题外话，所谓的这个分类名称嘛，都是从英文翻译到中文的，关于inline元素的翻译就比较多，也有称之为“内联元素”的，反正这都无所谓，大家会意即可。之所以这里我采用“行内元素”这种术语翻译，最主要的是直观。

HTML 块级元素

块级元素（block）在排列上通常会新起一行，且该元素会等同于100%，即占据整行。

DIV元素就是一种块级元素（Block）。

<div style="border:1px solid #46acb6;">
DIV元素就是一种块级元素（Block）。
</div>

运行一下

HTML中默认的块级元素有：<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>

HTML 行内元素

行内元素（inline）在排列上是不需要另起一行的，这不是恶霸而是文明人，会尽可能地利用空间。

比如span元素就是行内元素，不需要另起一行。

<span>你好，</span>
<span>专否！</span>

运行一下

HTML中默认的行内元素有：<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

<div> 元素

div 元素默认情况下是最典型的块级元素，一般来说div元素是用来定义分区和章节的。

讲得狭义与粗俗一些，这就是一个可以装内容的容器。比如设计网页时，可以把网页的头部导航可以当做一个大的容器来独立处理，把网页的中间部分再用一个div来装着；网页的footer页脚部分再搞一个div来装着。div有时并非是必须的，但是为啥经常会故意加上一个div，因为div不仅仅是具有影响页面显示的功能，还具有维持页面源代码的逻辑关系的意义。

<div style="background-color:Tomato;color:White;padding:20px;">
  <h2>专否</h2>
  <p>专否的使命就是干翻所谓的砖家</p>
</div>

运行一下

<span> 元素

span 元素通常默认情况下是行内元素，最典型的应用场景就是对一行中的某一部分文本想要有特殊的样式处理。

<h1>葵花在手 <span style="color:#46acb6;">天下</span>我有</h1>

运行一下