本文共 1321 字，大约阅读时间需要 4 分钟。

一、块元素 block element

块元素的特性

1. 独霸一行，总是在新行上开始
2. 宽度缺省是它父级元素的100%，除非设定一个宽度
3. 高度、行高、外边距、内边距都可以设置
4. 可以容纳其他内联元素或者其他块元素

常见的块元素

• address – 地址
• blockquote – 块引用
• center – 举中对齐块
• dir – 目录列表
• div – 常用块级容易，也是CSS layout的主要标签
• dl – 定义列表
• fieldset – form控制组
• form – 交互表单
• h1 – 大标题
• h2 – 副标题
• h3 – 3级标题
• h4 – 4级标题
• h5 – 5级标题
• h6 – 6级标题
• hr – 水平分隔线
• isindex – input prompt
• menu – 菜单列表
• noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
• noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
• ol – 有序表单
• p – 段落
• pre – 格式化文本
• table – 表格
• ul – 无序列表

二、行内元素 inline element

行内元素的特性

1. 和其他元素都在一行上，遇到父级元素边界会自动换行
2. 高、行高以及内外边距都不可以改变
3. 宽度与内容一样宽，且不可改变
4. 行内元素只能容纳文本或者其他行内元素
   对于行内元素，需要注意的是：设置宽度width无效，设置高度无效，可以通过设置line-height来设置，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效

常见的行内元素

• a – 锚点
• abbr – 缩写
• acronym – 首字
• b – 粗体(不推荐)
• bdo – bidi override
• big – 大字体
• br – 换行
• cite – 引用
• code – 计算机代码(在引用源码的时候需要)
• dfn – 定义字段
• em – 强调
• font – 字体设定(不推荐)
• i – 斜体
• img – 图片
• input – 输入框
• kbd – 定义键盘文本
• label – 表格标签
• q – 短引用
• s – 中划线(不推荐)
• samp – 定义范例计算机代码
• select – 项目选择
• small – 小字体文本
• span – 常用内联容器，定义文本内区块
• strike – 中划线
• strong – 粗体强调
• sub – 下标
• sup – 上标
• textarea – 多行文本输入框
• tt – 电传文本
• u – 下划线

行内元素的间距问题

两个行内元素在一起，会出现一定的间距，即使将border、padding、margin都设置为零也无济于事，那么怎么才能去除这些间距呢？

1.重设字体

将行内元素的直接父级设置font-size=0px;再给行内元素设置字体大小就可以解决。

2.借助HTML注释

在两个行内元素之间加入HTML注释，告诉浏览器这中间不是换行也不是空格，而是连接在一起的，这样也可以解决。

三、行内块元素

行内块元素的特性

1. 元素排列在一行
2. 宽度默认由内容决定
3. 元素间默认有间距
4. 支持宽高、外边距、内边距的所有样式的设置

转载地址：https://blog.csdn.net/weixin_40612082/article/details/80472807 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！