HTML/CSS - 块级非块级 & 替换非替换

块级元素

块级元素的特点:

• 在浏览器显示时，独占一行,默认情况下，其宽度自动填满其父元素宽度；

• 可以设置width，height属性；

• 可以设置margin和padding属性；

• 对应于display:block

块级元素包含：

元素	描述
<address>	定义地址
<caption>	定义表格标题
<dd>	定义列表中定义条目
<div>	定义文档中的分区或节
<dl>	定义列表
<dt>	定义列表中的项目
<fieldset>	定义一个框架集
<form>	创建表单元素
<h1> - <h6>	标题元素
<hr>	水平线
<legend>	给fieldset元素定义标题
<li>	定义列表项目
<noframes>	为那些不支持框架的浏览器显示文本，放置于frameset标签内
<noscript>	为那些不支持脚本的浏览器显示文本
<ol>	有序列表
<ul>	无序列表
<p>	定义段落
<pre>	定义预格式化文本
<table>	定义表格
<tbody>	定义表格主体
<td>	表格中的标准单元格
<tr>	表格中的行
<tfoot>	表格中的页脚
<th>	定义表头单元格
<thead>	定义表格的表头

内联元素

内联元素的特点：

• 相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
• 行内元素设置width，height属性无效
• 行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。
• 对应于display:inline；

内联元素包含：

元素	描述
<a>	可定义锚以及超链接
<abbr>	表示一个缩写形式
<acronym>	表示只取title中首字母的缩写形式
<b>	字体加粗
<bdo>	可覆盖默认的文本方向
<big>	大号字体加粗
<br>	换行
<cite>	引用进行定义
<code>	定义计算机代码文本
<dfn>	定义一个定义项目
<em>	定义为强调的内容
<i>	斜体文本效果
<img>	向网页中嵌入一张图像
<input>	输入框
<kbd>	定义键盘文本
<label>	为input进行标记/标注
<q>	定义短的引用
<s>	表示不准确不相关，却不应当给予删除的内容
<samp>	定义样本文本
<select>	定义单选或者多选菜单
<small>	呈现小号字体效果
<span>	组合文档中的行内元素
<strong>	语气更强的强调内容
<sub>	定义下标文本
<sup>	定义上标文本
<textarea>	多行文本输入控件
<tt>	打字机或者等宽的文本效果
<var>	定义变量

块级元素和内联元素比较记忆

块级元素	行内元素
独占一行,默认情况下，其宽度自动填满其父元素宽度	相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
可以设置width，height属性	行内元素设置width，height属性无效
可以设置margin和padding属性	行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。
对应于display:block	对应于display:inline；

我们在刷题的时候会遇到一个这样的题：

eg1: 浏览器天生默认inline-block元素有哪些？（拥有内在尺寸，可以设置高度，但是不会自动换行。）

input     button     img     label    texterea

eg2: 请选出所有的置换元素（）

正确答案: A B C D   你的答案: A B C D (正确)
A. img
B. input
C. textarea
D. select

这就引出了我们接下来要讲的替换元素和不可替换元素

替换元素

替换元素浏览器根据元素的标签和属性，来决定元素的具体显示内容。

替换元素一般有内在尺寸，所以具有width和height。

所以替换元素也可增加行框高度，但不影响line-height,内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。 要想替换元素居中，可以设置line-height = height， vertral-align = middle。

常见的替换元素有html中的<img>、<input>、<textarea>、<select>、<object>。

eg1: <input type="submit" name="submit" value="提交"/>

<input>标签是根据type属性来决定是显示输入框，还是提交按钮等等。

type属性值	描述
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

eg2: <img src="helloWord.jpg"/>

<img>元素通过src属性的值来读取图片信息并显示出来，而如果查看html代码，却看不到图片的实际内容，而且<img>元素的内容通常会被src属性指定的图像替换掉；

eg3:<object> 元素

<object> 元素（或者称作 HTML嵌入对象元素）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。

属性	描述
data	一个合法的 URL 作为资源的地址，，需要为 data 和 type 中至少一个设置值。
type	data 指定的资源的 MIME 类型，需要为 data 和 type 中至少一个设置值。
usemap	指向一个
width	资源显示的宽度，单位是 CSS 像素。
height	资源显示的高度，单位是 CSS 像素。
name	浏览上下文名称（HTML5），或者控件名称（HTML 4）。

也有某些元素只在一些特殊情况下表现为可替换元素，例如<video>、<audio>、 <picture>和 <canvas>。 通过 CSS content 属性来插入的对象被称作匿名可替换元素（anonymous replaced elements）。

非替换元素

html 的大多数元素是不可替换元素，即其内容直接表现给用户端

<p>不可替换元素</p>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

• 行内非替换元素

width和height在行内非替换元素中无效。行内非替换元素框的宽度是它的内容渲染后（在任何子元素相对偏移之前）的宽度，它的高则是基于字体。

如<a>、<span>是行内非替换元素 ，但是浮动后的行内非替换元素可以使用width和height。