块级元素

特点：

可以设宽高，
独占一行，
可以容纳其他内行元素，行内块元素或者其他块元素

块元素的例子：

<h1>
<p>

<div>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素区别</title>
<style>
p,img{
  width:200px;
  height:100px;
}
</style>
</head>
<body>
<div>
  <p>P:我是块级
     <span>span:我是行内元素</span>
  </p> 
</div>
<div>
   <img src="1.jpg">
</div>
</body>
</html>

注：DTD（文档类型定义，是一套为了进行程序间的数据交换而建立的关于标记符的语法规则）中规定了块级元素是不能放在<p>里面的

<p><div>div放到里面会怎么样呢</div></p>

放到里面会移除出来，如图

行内元素

特点：

行内元素设置width和height无效,
不独占一行，默认排列方式是在同行排列

行内元素的例子：

<span>

<a>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素区别</title>
</head>
<body>
<span>我是行内元素1</span>
<span>我是行内元素2</span>
<span style="border:1px solid purple;width:200px;height:100px;">行内元素设置宽高无效</span>
</body>
</html>

看图，我们可以看出来，span这个行内元素没有独占一行，而在同一行显示，且设的宽高也无效

3.不能内嵌块级元素,但可以内嵌行内块标签

若内嵌的块级元素，块级元素还是会独占一行，如下图

行内标签内嵌行内块标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML点击图片跳转页面示例</title>
<style>
   img{
  width: 80px  ;
  height: 80px;
}
</style>
</head>
<body>
<a href="http://www.php.cn"><img src="http://www.5imoban.net/view/demoimg/1.jpg"> </a>
</body>
</html>

View Code

行内块元素

在行内元素中就有那么几个特殊标签，比如img,input可以给他们设置宽高、对齐属性，我们把这样特殊的一类标签称为行内块元素

特点：

可以设宽高，但不独占一行
不能内嵌块级元素和行内元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 input{
 6   width:100px;
 7   height:100px;
 8 }
 9 </style>
10 </head>
11 <body>
12 <input type="submit" value="点击">
13 
14 </html>

View Code

Display 转变元素为块级元素或者行内元素：

下面的示例把span元素作为块元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Display元素</title> 
<style>
span
{
    display:block;
    width:100px;
    height:50px;
}
</style>
</head>
<body>
<span>我变成块级元素啦</span>
</body>
</html>

跟上面一样，块级元素也可以显示为行内元素：

li {display:inline;}

转换成行内块元素

li{display: inline-block;}

块元素，行内块元素，行内元素的区别