CSS入门基础知识（七）——元素显示模式

CSS标签入门基础知识

元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如< div>自己独占一行，比如一行可以放多个< span>
html元素一般分为块元素和行元素

块元素

常见的块元素有< h1>~< h6>、< p>、< div>等等，其中< div>标签是最典型的块元素
1、自己独占一行
2、高度、宽度、内外边距边距都可以控制
3、宽度默认是容器的100%
4、是一个容器及盒子，里面可以放行内或者块级元素

注意：

• 文字类的元素不能使用块元素
• < p>标签主要用于存放文字，因此< p>里面不能放块级元素，特别是不能放< div>
• 同理，< h1>~< h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有< a>、< strong>、< b>等等，其中< span>标签是最典型的行内元素，有的地方也将行内元素称为内联元素。
1、相邻的行内元素可以在一行上
2、宽、高无法总结设置
3、默认宽度是本身内容的宽度
4、行内元素只能容纳文本或者其他行内元素

注意

• 链接里面不能在放链接了
• 特殊情况链接< a>里面可以放块级元素，但是给< a>转换一下块级模式最安全

行内块元素

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

元素显示模式总结

元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一个模式的特性，比如增加链接< a>的触发范围
行内元素转换为块元素：display:block

块元素转换为行内元素 display: inline

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

（ps：引自pink老师~，刚刚开始作为自己的学习笔记写，如有不好请见谅，阿里嘎多）

参考学习链接。[^1]

[^1]：https://www.bilibili.com/video/BV14J4114768?p=1