html中块级元素和行内元素

块级元素和行内元素的三个区别

1.行内元素与块级元素直观上的区别:

　　行内元素会在一条直线上排列,都是同一行,水平方向排列

　　块级元素独占一行,垂直方向排列.块级元素从新行开始结束接着一个断行

2.块级元素可以包含行内元素和块级元素, 行内元素不能包含块级元素

3.行内元素和块级元素属性的不同,主要是盒模型属性上

　　行内元素设置width无效,height无效(可以设置line-height),

　　行内元素margin上下无效,padding上下无效

行内元素转换块级元素,用css实现

　　display:block(字面意思表现形式设为块级)

块级元素

常用的块级元素

<div>定义文档中的分区或节点

<h1>到<h6>标题

<p>定义段落

<ul>无序列表

<ol>有序列表

<li>列表项

<dl>自定义列表

<dt>自定义列表项标题

<dd>自定义列表项

<form>创建HTML表单

<tabel>定义HTML表格

<caption>表格标题

<thead>表格表头

<tbody>表格主题

<tfoot>表格页脚

<th>表头单元格

<td>表格中的标准单元格

<tr>定义表格中的行

<pre>预格式话文本

<hr/>

行内元素

<a>锚点标签

<abbr>表示一个缩写形式

<span>组合文档中的行内元素

<b>加粗标签

<strong>语义更强烈的加粗标签

<i>斜体文本效果

<em>斜体但是语义更强烈

<img>向页面中插入图片

<input>输入框

<label for="">标签为 input 元素定义标注（标记）

<small>呈现小号字体效果

<select>创建单选和多选菜单,下拉菜单

<sub>下标文本

<sup>上标文本

<textarea>多行可控文本输入框

行内块级元素inline-block

<img>向页面插入图片

<input>输入框

<button>按钮