块级元素
块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。
通常浏览器会在块级元素前后另起一个新行。
块级元素只能出现在<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
网友评论