css块级标签、行内标签、行内块标签的特点和相互转换
块级元素
-
常见的块级元素
h1-h6、div、p、ul、ol、li等，div最常用！ -
块级标签的特点
- 独占一行
- 高度、宽度、内外边距都可以设置（重要）
- 宽度默认是容器（父级标签）的100%
- 是一个容器盒子，里面可以放其他行内或者块级元素
注意点：
1.文字类的元素内，不能在放块级元素，比如p标签、h1-h6标签内一般放文字，它们里面一般是不能在放其他块级元素的，会出问题！
行内元素
-
常见的行内元素
span、a、i等等，常见的是span -
行内标签的特点
- 一行可以放多个行内元素
- 行内元素没有宽高
- 行内元素的宽度就是它内容的宽度
- 行内元素内部可以放文字和其他行内元素
注意点：
1.链接里不能放链接了
2.特殊a标签内可以放块级元素，但是我们先需要把a标签转换成块级元素
行内块元素
-
常见的行内块元素
img、input、td这些其实是行内块元素 -
行内块元素标签
- 相邻的行内块元素在同一行上，但是它们之间会有空隙
- 行内块元素可以指定宽高，也可以指定内外边距
- 默认的宽度是它内容的宽度
三种元素的相互转换
- 转换为块级元素：display: block;
- 转换为行内元素：display: inline;
- 转换为块级元素：display: inline-block;