HTML区别块级元素和行内元素

HTML区别块级元素和行内元素

块级元素

块级元素：
html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address…
特点：
（1）独占一行空间。
（2）默认宽度为100%。
（3）高度由子元素或内容决定。
（4）可以通过css指定其宽度。

元素	作用	已有的css效果
div	无意义的块元素
h1~h3	标题	margin font-size font-weight
p	段落	margin
ul,li	无序列表	margin padding list-style
ol,li	有序列表	margin padding list-style
dl,dt,dd	定义列表	dl - margin dd - margin
html	段落	mhtmlp
body		margin
header	H5新增的语义化标签<br>(样式与div类似)	<div class="header"></div>
footer	H5新增的语义化标签<br>(样式与div类似)	<div class="footer"></div>
nav		<div class="nav"></div>
article		<div class="article"></div>
section		<div class="section "></div>
aside		<div class="aside "></div>
address		<div class="address "></div>

行内元素

行内元素：
span、a、img、strong、b、i、em、sub、sup…
特点：
（1）与其他行内元素共享一行空间。
（2）宽高由自身决定。
（3）由于不用来搭建网页结构，所以也无需通过css指定其宽度。
（4）行内元素中不可以嵌套块元素。

块级元素和行内元素的效果图对比

明显看出块级元素div占100%宽度独占一行

接下来看看行内元素span标签

明显看出行内元素span没有独占一行的空间。
我们再给span加宽高试试看。
没有一点的改变，因为行内元素不能用css指定其宽高






我们写多几个span标签
可以看出span标签没有一个独占一行，而是几个一起写在了一行之中。