- 作者：老汪软件技巧
- 发表时间：2024-01-09 17:00
- 浏览量：
一、显示模式：
网页中HTML的标签多种多样，具有不同的特征。而我们学习盒子模型、使用定位和弹性布局把内容分块，利用CSS布局使内容脱离文本流，使用定位或弹性布局让每块内容摆放在想摆放的位置，让网站页面布局更合理、有条理。
1.1 标签分类 1.1.1 块状元素(block-level)
通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建
~、
、
、、、- 等，其中标签是最典型的块元素。
独占一行且自由设定
块级元素的特点：
（1）总是从新行开始【独占一行】
（2）高度，行高、外边距以及内边距都可以控制。【可以自由设定】
（3）宽度默认是容器的100% 【即可来源于父级】
（4）可以容纳内联元素和其他块元素
1.1.2 行内元素 (又叫内联元素)
一行共存多个;默认尺寸由内容撑开;加宽高生效
行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。 常见的行内元素有
、、、、、、、、、等，
其中标签最典型的行内元素。
行内元素的特点：
一行共存多个;默认尺寸由内容撑开;加宽高生效
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的和可以设置，垂直方向的无效。
【不可自由赋值宽高】
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊）
1.1.3 行内块状元素（-block）
宽高属性生效;宽高默认由内容撑开
在内联元素中有几个特殊的标签
、、
可以对它们设置宽高和对齐属性，称它们为内联块状元素。 内联块状元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
有间隙
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。
宽高属性生效;宽高默认由内容撑开
1.1.4 转换
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。
三者是可以互相转换的，使用属性能够将三者任意转换：
(1):;转换为行内元素
(2):block;转换为块状元素
(3):-block;转换为行内块状元素
例如：
块状元素也可以通过代码:将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
div{
display:inline;
}
......
我要变成内联元素
