一、html元素分类

html元素：行内元素、块元素、行内块元素

二、块元素

常见的块级元素：< h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >、< dd >、< dt >、< dl >等，其中 < div > 标签是最典型的块元素。

块级元素的特点：
① 比较霸道，自己独占一行。
② 高度，宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%。
④ 是一个容器及盒子，里面可以放行内或者块级元素。
注意：
文字类的元素内不能使用块级元素
< p > 标签主要用于存放文字，因此 < p > 里面不能放块级元素，特别是不能放< div >。同理， < h1 >~< h6 >等都是文字类块级标签，里面也不能放其他块级元素

三、行内元素

常见的行内元素： < a >、< strong >、< b >、< em >、< i >、< del >、< s >、< ins >、< u >、< span >、< img />、< input />、< select >、< textarea >、< br />、等，其中 < span > 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：
① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。
注意：
 链接里面不能再放链接
 特殊情况链接 < a > 里面可以放块级元素，但是给 < a > 转换一下块级模式最安全

四、行内块元素

在行内元素中有几个特殊的标签 —— < img />、< input />、< td >，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点：
① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）

五、替换元素和非替换元素

替换元素：浏览器根据其标签的元素属性来判断显示具体的内容的元素，且元素一般拥有固定的尺寸
非替换元素：html中大多数都是非替换元素，他们直接将内容告诉浏览器，直接显示出来。
常见的替换元素：img, input, select, textarea, object, video等。
非替换元素如div，p，h1-h6，span等大多数元素。

六、元素转换

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display: inline-block;

七、总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含的任何标签
行内元素	一行可以放多个行内元素	不可以设置宽度高度	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽度高度	它本身内容的宽度

HTML基础知识（一）：行内元素，块级元素，行内块元素相关推荐

块级、行内元素水平垂直居中方法
块级.行内元素水平垂直居中方法块级元素水平垂直居中 // 为目标元素设置以下属性 position: absolute; /*top: 0;*/ left: 0; right: 0; bottom: ...
行转换html,块级、行内、行内元素相互转换
块级.行内.行内元素相互转换 html> 块级.行内.行内块元素相互转换 *{margin: 0px;padding: 0px;} body{background: url(images/5.j ...
CSS块级、行级、行级块标签、display、div、span
文章目录块级标签行级标签行级块标签 display div 和span 块级标签无论内容有多少,都会占据一行; 默认宽:与父级标签一致; 默认高:0 :或者与内容高度一致. 但是可以通过 wi ...
block与inline，inline和inline-block，块级和行内元素，行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
css元素显示模式（行内、块级、行内块）
1.块级元素显示特点: 1.独占一行(一行只能显示一个) 2.宽度默认是父元素的宽度,高度默认由内容撑开 3.可以设置宽高代表标签: div.p.h系列.ul.li.dl.dt.dd.form.h ...
html5行级标签,8、html5哪些标签时块级、行内、行内块？2021-01-30
一.块级标签 div.p.h1-h6.form.ul.ol.dl.dt.dd.li.table.tr.td.th.hr.blockquote.address.table.menu.pre HTML5: ...
块级，行内（内联）对比笔记
块级元素: div, p, h1, h2, h3, h4, h5, h6, ul, li, ol, dl,pre,form, table等行内元素: span, td, tr, a, img, in ...
python入门基础知识实例-Python入门教程丨1300多行代码，让你轻松掌握基础知识点...
欢迎关注小编,除了分享技术文章之外还有很多福利,私信学习资料可以领取包括不限于Python实战演练.PDF电子文档.面试集锦.学习资料等. 前言本文适合有经验的程序员尽快进入Python世界.特别地 ...
【java基础知识】java打包后再dos命令行中文显示乱码的问题
参考:https://jingyan.baidu.com/article/d621e8da585c772864913f60.html --------------------------------- ...
零基础入门python3.7 ——基础知识总结(十二) 函数进级
python中的函数调用时除了对位传参. 关键字传参. 默认参数以外还提供了以下传参方式. 一.可变参数顾名思义可变参数就是参数的个数是可变的,可以是任意1个或者多个,由于参数的数量不确定所以我们要 ...

HTML基础知识（一）：行内元素，块级元素，行内块元素

文章目录

一、html元素分类

二、块元素

三、行内元素

四、行内块元素

五、替换元素和非替换元素

六、元素转换

七、总结

HTML基础知识（一）：行内元素，块级元素，行内块元素相关推荐

最新文章

热门文章