成为VIP
这节课 我们讲解 html 块级元素和内联元素的概念 学习 div 和 span 两个重要的标签
每个HTML元素都有一个默认的显示值 (display value)行内元素与块级元素的区别，这个显示值有两个，分别是 block 和 inline行内元素与块级元素的区别，翻译过来就是块和内联。元素显示默认采用哪个值，取决于它是什么类型。
对应显示值，元素分为两种类型：一种是 block-level 元素，译为块级元素，简称块元素；一种是 inline 元素，译为内联元素，也称行内元素。
块级元素总是从新行开始，浏览器会自动在元素前后添加一些边距。块级元素总是占据可用的全部宽度，尽可能向左和向右伸展。p () 就是一个常用的块元素。
我们来实际观察一下。
打开编辑器，新建一个 block_inline.html 文件，准备好基本代码，在 body 里添加 p 标签，在 p 标签里填写一点文本。保存。
在浏览器中打开页面，段落显示了。由于 p 元素是添加到 body 元素里，根据块级元素的特点，它应该横向伸展到可视窗口的边界。
按下键盘 F12，打开浏览器开发者工具，点击元素选取按钮，我们看到这里提示了这个段落的实际宽度和高度。虽然段落的文字很少，但浏览器会让 p 元素拉伸铺满一行。
除了 p 元素，还有一个非常重要的块级元素，就是 div 元素。我们来看个例子。
回到编辑器，删除这个段落。在 body 里使用 h1 标签定义一个标题，写一点内容。再定义两个段落，填好段落的文本。保存。
在浏览器中打开页面，审查一下三个元素，全部独占一行。
现在有个新需求，实现每个元素在浏览器视口中居中对齐。
返回编辑器，一个笨办法就是给 h1 标签和两个 p 标签，都定义 align 属性，值为 center。保存。
回到浏览器，刷新，三个元素都居中对齐了。有没有更简洁一点的方法呢？
返回编辑器，我们可以想到：把三个元素用一个标签包裹起来，在这个标签上定义居中属性。 (演示的时候使用空标签对) 用哪个标签呢？目前只能用 p 标签，似乎更合适一些。接下来给它定义 align 等于 center。保存。
回到浏览器，刷新，恩？效果没有实现。这是为什么呢？可以仔细想一下，p 标签是专门用于定于段落的，它包裹的内容显然不是一个段落。所以浏览器认为，你标签没有写完整，给你补充完整了，所以你看多了一个p标签。那就没有简洁一点的方法吗？实际上，这里使用 div 元素再合适不过了。
div，是 division 的缩写，译为”分块” ，引申为”盒子”、”容器”。用于定义HTML文档中的一个分块或一个部分，是典型的块级元素。定义它的语法是：尖角号 div，尖角号 /div，标签里面包含分块的内容。
返回编辑器，把外层的 p 标签替换 为 div 标签。保存。
回到浏览器，刷新，居中效果实现了。选中 div 元素，整个容器横向铺满了视口。
块级元素有很多，梳理一下我们学过的：
h1 到 h6 标题元素 –
p 段落元素
ol、ul、li、dl、dt、dd 等列表元素
限时特惠：本站每日持续更新海量展厅资源，一年会员只需29.9元，全站资源免费下载
站长微信：zhanting688
