块级元素、内联元素

块元素(block level element)：

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

高度、宽度都是可控的。

宽度没有设置时，默认为100%。

块级元素常见的有下列几种：

    <div id="div1"></div>
    <p>helloWorld!</p>
    <h1>helloWorld</h1>
    <h2>helloWorld</h2>
    <h3>helloWorld</h3>
    <h4>helloWorld</h4>
    <h5>helloWorld</h5>
    <h6>helloWorld</h6>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

 运行结果：

内联元素（inline element）

内联元素在显示时通常不会以新行开始。

高度、宽度以及内边距都是不可控的。

宽高就是内容的高度，依靠自身字体大小和图形支撑结构的，不可以改变。

内联元素常见的有下列几种：

    <span>helloWorld</span>
    <img src="./css3/image/a.jpg" alt="图片a">
    <img src="../css3/image/b.jpg" alt="图片b">
    <a href="www.baidu.com">百度</a>
    <b>helloWorld</b>
    <em>helloWorld</em>
    <i>helloWorld</i>

运行结果：

 

 

其中<i></i>与<em></em>的区别：

<em>是基于内容的样式，<i>一个是基于物理的样式。

< i > 是视觉要素（presentationl elements），分别表示无意义的加粗，无意义的斜体，仅仅表示样式上是粗体或斜体，而没有强调的语义。

< em > 是表达要素(phrase elements)。 < em > （emphasized text）表示一般的强调文本，这个标签具有语义。该标签中的内容在搜索引擎中更受重视,一些语音阅读器也会根据它在阅读时加强语气。