摘要：二块级元素块级元素占据其父元素容器的整个空间，因此创建了一个块。而块级元素可以包含行内元素和其他块级元素。格式默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
一、行内元素
一个行内元素只占据它对应标签的边框所包含的空间。二、块级元素
块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。三、行内元素示例
HTML
CSS
Example
四、块级元素示例HTML
CSS
Example
五、行内元素的特点 5.1 和其他元素都在同一行上 5.2 高，行高及外边距和内边距不可改变 5.3 宽度就是它的文字或图片的宽度，不可改变 5.4 行内元素只能容纳文本或者其他行内元素 5.5 设置行内元素，需要注意如下（1）设置宽度 width 无效。
（2）设置高度 height 无效，但可以通过 line-height 来设置。
（3）设置 margin 只有 左右有效，上下无效。
（4）设置 padding 只有 左右有效，上下无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
六、块级元素的特点 6.1 总是在新一行开始 6.2 高度，行高以及外边距和内边距都可改变 6.3 若宽度没有设置，则默认宽度为容器的100%，除非设定一个宽度 6.4 块级元素可以容纳行内元素和其他块级元素 七、行内元素和块级元素对比 7.1 内容（1）一般情况下，行内元素只能包含数据和其他行内元素。
（2）而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
7.2 格式默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
7.3 宽高（1）行内元素不可以设置宽高
（2）块级元素可以设置宽高
7.4 内边距和外边距（1）行内元素水平方向的 margin 和 padding 可以生效。但竖直方向的 margin 和 padding 不能生效。
（2）块级元素可以设置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 | 下划线 |
| 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 | 无序列表 |
可变元素为根据上下文语境决定该元素为行内元素或者块级元素。
| applet | java applet |
| button | 按钮 |
| del | 删除文本 |
| iframe | inline frame |
| ins | 插入的文本 |
| map | 图片区块(map) |
| object | object对象 |
| script | 客户端脚本 |
（1）行内元素 display:inline
（2）块级元素 display:block
（3）行内块元素 display:inline-block
（4）行内元素转换块级元素 display:block
（5）块级元素转换行内元素 display:inline
11.2 float若设置行内元素 float:left/right，则该行内元素转换为块级元素 ，且具有浮动特性。
11.3 position若为行内元素进行定位，position:absolute 或者 position:fixed 都会把行内元素转换为块级元素。
阅读更多
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115890.html
摘要：二块级元素块级元素占据其父元素容器的整个空间，因此创建了一个块。而块级元素可以包含行内元素和其他块级元素。格式默认情况下，行内元素不会以新行开始，而块级元素会新起一行。 一、行内元素 一个行内元素只占据它对应标签的边框所包含的空间。 二、块级元素 块级元素占据其父元素（容器）的整个空间，因此创建了一个块。通常浏览器会在块级元素前后另起一个新行。 三、行内元素示例 HTML showIm...
摘要：面试题总结现将我整理的一些前端笔试题分享一下，希望对大家有所帮助。中常见行内元素和块级元素有哪些行内元素块级元素行内块元素常见的有的和有什么区别和的值为时，都会使显示出来的文本框不能输入文字，不能更改更改表单域中的内容。 2018面试题总结 现将我整理的一些前端笔试题分享一下，希望对大家有所帮助。 html中常见行内元素和块级元素有哪些?行内元素：a,b,strong,span,im...
摘要：面试题总结现将我整理的一些前端笔试题分享一下，希望对大家有所帮助。中常见行内元素和块级元素有哪些行内元素块级元素行内块元素常见的有的和有什么区别和的值为时，都会使显示出来的文本框不能输入文字，不能更改更改表单域中的内容。 2018面试题总结 现将我整理的一些前端笔试题分享一下，希望对大家有所帮助。 html中常见行内元素和块级元素有哪些?行内元素：a,b,strong,span,im...
摘要：面试题总结现将我整理的一些前端笔试题分享一下，希望对大家有所帮助。中常见行内元素和块级元素有哪些行内元素块级元素行内块元素常见的有的和有什么区别和的值为时，都会使显示出来的文本框不能输入文字，不能更改更改表单域中的内容。 2018面试题总结 现将我整理的一些前端笔试题分享一下，希望对大家有所帮助。 html中常见行内元素和块级元素有哪些?行内元素：a,b,strong,span,im...
摘要：标签规定独立的流内容图像图表照片代码等等。元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。如果使用该属性，则样式仅仅应用到元素的父元素及其子元素。中元素表现为一个超链接，支持任何行内元素和块级元素。 1. 是正确的HTML5标签吗？ 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。是正确的HTML5标签。 2. 标签是否可以改...
阅读 1285·2021-11-09 09:45
阅读 1596·2021-11-04 16:09
阅读 1285·2021-10-14 09:43
阅读 1604·2021-09-22 15:24
阅读 1341·2021-09-07 10:06
阅读 1496·2019-08-30 14:15
阅读 809·2019-08-30 12:56
阅读 1470·2019-08-29 17:22
