块级元素与行内元素有什么区别

2017-08-09 本文已影响0人左冬的博客

块级元素

块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。
通常浏览器会在块级元素前后另起一个新行。
块级元素只能出现在<body>内。

通常有哪些块级元素

<div>文档分区
<h1>~<h6>一级标题到六级标题
<p>段落
<hr>水平线
<pre>预格式化文本
<ul>无序列表
<ol>有序列表
<table>表格
<form>表单
<fieldset>表单元素分组
<output>表单输出
<header>页头
<footer>页尾
<section>分区或节
<atrical>文章内容
<aside>侧边栏
<address>联系方式信息
<audio>音频
<video>视频
<blockquote>块引用
<canvas>绘制图形
<dd>定义列表中定义条目描述
<dl>定义列表
<figure>图文信息组
<figcaption>图文信息组标题

行内元素

一个行内元素只占据它对应标签的边框所包含的空间。
包含其自身及其他行内元素。

通常有哪些行内元素

<span>行内容器
<a>定义锚
<b>定义粗体
<i>定义斜体
<abbr>定义缩写
<acronym>定义取得首字母缩写
<cite>定义引用
<big>定义大号文本
<small>定义小号文本
<br>定义折行
<dfn>定义项目
<em>着重阅读
<strong>定义加强
<img>定义图片
<map>定义图像映射
<script>定义脚本
<sub>定义下标文本
<sup>定义上标文本
<button>定义按钮
<input> 定义输入框
<label>定义界面中项目的标题

块级元素与行内元素的区别：

一般行内元素只能包含数据和其他行内元素，块级元素可以包含行内元素和自身及其他块级元素。
默认情况下块级元素占用一整行，而行内元素占据自身宽度空间

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <style>
    h1 {
      background: pink;
    }
    span {
      background: yellow;
    }
    div {
      background: grey;
    }
    strong {
      background: green;
    }
  </style>
<body>
  <h1>这是一个块级元素，占据一整行</h1>
  <span>这是一个行内元素,只占据自身宽度</span>
  <div>
    我是一个块级元素我可以包含下面这个块级元素
    <p>我是被包含的块级元素</p>
    我俩都单独占据一整行
  </div>
    <p>
     <span>这是一个行内元素<strong>我被着重了</strong></span>
    <p>
</body>
</html>

宽高只对块级元素生效。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <style>
    p{
      background: yellow;
      height: 100px;
      width: 300px;
    }
    span {
      background: pink;
      height: 100px;
      width: 300px;
    }
  </style>
<body>
  <p>尝试设置行内元素的宽高<span>只有我没有变高</span></p>
</body>
</html>

注意：如果给行内元素设定绝对定位（如 a{position: absolute;}，脱离正常文档流，绝对定位会隐形的改变a的display为inline-block，此时就可以把a当成块元素一样设置宽高了。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <style>
    a {
      /*position: absolute;*/
      width: 300px;
      height: 300px;
      background: red;
      color: #fff;
    }
  </style>
<body>
<a href="www.baidu.com">百度</a>
<p>此时设置宽高都是无效的</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <style>
    a {
      position: absolute;
      width: 300px;
      height: 300px;
      background: red;
      color: #fff;
    }
  </style>
<body>
<a href="www.baidu.com">百度</a>
<p>此时设置宽高都是有效的</p>
</body>
</html>

注：<a>元素设置绝对定位以后，脱离了正常文档流，同时后面的元素不会为<a>留出位置，如果<a>足够大，会将会面的元素覆盖，图中<p>元素被覆盖，可以设置<a>的透明度为0.3看看<p>是不是占据了<a>之前的位置：

块级元素可设置padding和margin，行内元素只能设置padding及左右margin，且设置padding时左右padding推开距离，上下padding会延申出去，但不会增加上下两行间的距离。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <style>
    p {
      background: pink;
      padding: 20px;
      margin: 5px;
    }
    span {
      background: yellow;
      padding: 10px;
      margin: 100px
      
    }
  </style>
<body>
  <h4>内边距设置成功，左右外边距设置成功，上下外内边距不生效</h4>
  <p>我们来看看效果<span>这是一个行内元素</span></p>
</body>
</html>

参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements
http://www.jianshu.com/p/3937727285db