block element and inline element

Posted 2021-01-13 bingw

1. html 块级元素（block element）

块级元素总是在新的行上开始，并尽可能地占据本行全部可用的宽度。

下面是咱学过的和没学过的块级元素的集合：
<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>

1. HTML 行内元素（inline element）

相反，行内元素不会另起一行，它也只占用必要的宽度。

一言以蔽之：块级元素讲究排场，行内元素勤俭节约！（当然，也不是说谁好谁坏，元素无贵贱，存在即合理）

下面是咱学过的和没学过的行内元素的集合：
<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>

2. 行内元素与块级元素对比

一般情况下，行内元素只能包含数据和其他行内元素。

而块级元素可以包含行内元素和其他块级元素。

这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。


3. 为什么要将内容分为块级和行内？

多敲几行代码的朋友可能就会发现，无论你在 p 元素中敲了多少个空格和换行，在浏览器上都只显示一个：

 1 ……
 2     <p>黑夜给了我黑色的          
 3 
 4 
 5 
 6 
 7 
 8         <span>眼睛</span>，</p>
 9     <p>我却用它寻找     <span>光明</span>。</p>
10 ……

 

这是因为 HTML 要求浏览器将连续的空白字符合并为一个空格，这种做法其实很有道理，因为这样可以把 HTML 文档的布局和文档内容自身的布局给区别开来。

相当于你文档中使用空格换行来达到所谓的美观需求的布局，HTML 是不予理会的，如果你想要内容在网页上以美美哒的形式展现出来，那好，请使用 HTML 的语法来实现。