html中的区块元素和内联元素

html中的区块元素和内联元素

1、html中区块元素和内联元素的区别

区块元素的特点：

• 每个元素独占一行，默认情况下宽度等于父元素的宽度
• 不设置高度时，高度为0，有内容时高度由内容撑开，不解析换行符
• 可以设置width、height、margin、padding属性
• dispaly:block

常用的区块元素有：

• div（盒子）、 address（ 定义地址）
• ul（无序列表）、ol（有序列表）、li（列表的项）
• dl（定义列表）、dd（定义列表中定义条目）、dt（定义列表中的项目）
• p（段落）、h1~h6（网页中的标题，从大到小）
• table（表格）、td（标准单元格)、tr（行）、th(表头单元格)
• form（表单）、pre（预格式化文本）、hr（分割线）
• caption （表格标题）、thead(表格表头)、tbody（表格主体）

内联元素的特点：

• 相邻的元素会排列在同一行，排不下时会自动换行
• 不支持宽高属性，宽高完全由内容撑开，会解析换行符
• 使用部分样式会出错（上下margin和padding等）,只能设置margin-left、margin-right、padding-left、padding-right.(可以出现效果)
• dispaly:inline

常见的内联元素有：

• span（行间元素） 、textarea（多行文本输入控件）
• b（加粗）、strong（加重）、i（斜体）、em（着重）
• sub（下标）、sup（上标）
• ins（插入）、del（删除）、br（换行）、a（定义锚以及超链接）
• img（图片）、input（表单项）、label（表单标记）
• big（大号字体加粗）、small9(呈现小号字体效果）
• code（定义计算机代码文本）、q（定义短的引用）、select（定义单选或者多

虽然input和img都是行内元素，但是它们是可以设置宽和高的。主要是因为它们是内敛块元素。

内敛块元素的特点：
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，即：

• 和其他元素都在一行上；

• 元素的高度、宽度、行高以及顶和底边距都可设置。
  常见的内敛块元素有：

• img(图片)

• input（表单项）

• iframe（框架）

• canvas（画布）

• video（视频）

• audio（音频）

同时也提到了替换元素和不可替换元素，如下：

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容，如img标签，在我们查看代码时图片不显示，但是在窗口可以显示出来

不可替换元素 html 的大多数元素是不可替换元素，即其内容直接表现给用户端，如p标签，标签内的内容在查看代码时会显示出来。

主要用的三个CSS样式有：

• dispaly:block-----块级元素
• dispaly:inline-----内联元素
• dispaly:inline-block–内联块元素、同行显示并可修改宽高内外边距等属性

三个样式可以相互设置转化

~~写在后面的一点个人见解：对于内联元素使用上下margin和padding样式出错的问题的一点解释：W3C标准中讲到padding适用于所有元素，但是给内联元素设置上下padding时为何出错呢？这是由于内联元素不支持宽高，即使设置了上下padding在浏览器中不会显示，但并不会影响其他元素。margin也能用于内联元素，这是规范所允许的，但是margin-top和margin-bottom对内联元素（对行）的高度没有影响，并且由于边界效果(margin效果)是透明的，他也没有任何的视觉影响。这是因为边界应用于内联元素时不改变元素的行高度。