块元素(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)表示一般的强调文本,这个标签具有语义。该标签中的内容在搜索引擎中更受重视,一些语音阅读器也会根据它在阅读时加强语气。