级元素：使用时，会自动换行的元素，可以包含行内元素和其他块级元素，可以设置宽，高，上下左右边距，默认 css 属性 display 的值为 block

• 块级元素常用的有哪些

1. div // 块， 经常用来布局的块，类似箱子
2. h1-h6 // 标题，肯定是会换行的啦
3. p // 段落，我们写文章，段落也是换行处理的
4. ul,ol,li // 列表，总不希望你写的列表，表格还跟其他东西掺杂一起吧，
5. from // 表单，输入框总希望能够单独是一块独立的
6. table // 表格，表格要整洁，总希望独立出来
7. hr // 水平分割线，既然要分割，那也是要换行处理吧
8. pre // 预格式化文本，代码按照我们手动编排好的顺序输出，你总不希望他还不给你行吧，不然就没意义了
9. footer // 段尾，类似写作文结尾，都是另起一行
10. article // 文章内容，看书的时候，文章内容都会在合适的位置给换行处理
11. canvas // 绘制图形
12. address // 地址

行内元素：不会自动换行，不可以设置宽高，只能设置左右边距，默认 css 属性 display 的值为 inline

• 块级元素常用的有哪些？

1. b // 加粗
2. big // 定义大字号
3. i //斜体
4. small // 小号文本
5. abbr // 定义缩写，有些国际词语是有缩写的
6. acronym // 定义只取首字母的缩写
7. cite // 引用，文章内容的某一句话可能是引用其他名人说的
8. code // 定义计算机代码
9. dfn // 定义一个定义项目
10. em // 定义强调的本文
11. kbd // 定义键盘文本
12. strong // 定义重要的文本
13. samp // 定义样本文本。
14. var // 定义变量
15. a // 锚点，内容里经常会有几个关键词，可以点击过去查阅更多详细信息
16. bdo
17. br // 换行
18. object // 内嵌对象
19. q // 短的引用
20. script
21. span // 普通文档的节
22. sub // 定义下标文本
23. sup // 定义上标文本
24. button // 按钮，
25. input // 控件
26. label // input 元素定义标注
27. select // 定义选择列表，看起来很多，实际上占位就我们选择的那一个
28. textarea // 定义一个多行的文本输入控件

行内块级元素，拥有行内元素的特性，不换行，也拥有块级元素的特性：既可以设置宽高也可以设置上下左右边距，默认 css 属性 display 的值为 inline-block

常见行内块级元素:

1. img // 图片
2. video // 视频
3. audio // 音频
4. map // 图像映射

块级元素和行内元素如何转换

• 块级元素变成行内元素

display: inline;

• 行内元素变成块级元素

display: block;

• 块级元素、行内元素变成行内块元素

display: inline-block;

其他

• a 标签只允许嵌套非 a 标签的 inline 类型元素。
• 这么多，不要为难自己死记硬背，记住常用的，用常识去记住就可以啦，面试考你的时候，记不住的，用常识去推理，基本都正确。

、CSS的元素显示模式

1.作用：网页标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局页面
2.HTML元素一般分为块元素和行内元素

（一）块元素

1.div为最典型的块元素，还有h1-h6,p,ul,ol,li等
2.特点

• 比较霸道，自己独占一行
• 高度，宽度，外边距以及内边距都可以控制
• 宽度默认是容器（父级宽度）的100%
• 是一个容器及盒子，里面可以放行内或块级元素

3.注意

• 文字类的元素内不能使用块级元素，如：p
• h1-h6等都为文字类的块级标签，里面也不能放其他块级元素

（二）行内元素

1.span为最典型的行内元素，还有a,strong,b,em,i,del,s,ins,u等
2.特点

• 相邻行内元素在一行上，一行可以显示多个
• 高度、宽度直接设置是无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

3.注意

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

（三）行内块元素

1.同时有块元素和行内元素的特点，如：img，input,td等
2.特点

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
• 默认宽度就是它本身内容的宽度（行内元素特点）
• 高度，行高外边距以及内边距都可以控制（块级元素特点）

（四）元素显示模式转换

1.转化为块元素（display:block;）

2.转化为行内元素（display:inline;）

3.转化为行内块（display:inline-block;）

单行文字垂直居中的小技巧

总结

版权声明：本文为CSDN博主「依旧i248」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_65548623/article/details/124192437

文简单介绍如何通过CSS实现常见元素的水平、垂直居中。

水平居中

• 行内元素

这种情况最简单，只需要将行内元素包括在一个display属性为block的父元素中，并且设置父元素text-align为居中即可

.border {
  width: 400px;
  line-height: 100px;
  border: 1px solid red;
  text-align: center;
}

<div class="border">
      <span>行内元素</span>
</div>

• 块状元素

对块状元素设置相应的外边距即可，外边距左、右设置为auto。

.parent {
  width: 400px;
  height: 100px;
  border: 1px solid red;
}
.block-child {
  width: 100px;
  border: 2px solid black;
  margin: 10px auto;
  text-align: center;
}

<div class="parent">
      <div class="block-child">块状元素</div>
</div>

• 多个块状元素①

传统方法，在父元素设置text-align:center; 然后将需要居中的块状元素的display设置为inline-block

.border {
  width: 400px;
  line-height: 100px;
  border: 1px solid red;
  text-align: center;
}
.inline-block {
  display: inline-block;
  border: 1px solid black;
}

 <div class="border">
      <div class="inline-block">块状元素1</div>
      <div class="inline-block">块状元素2</div>
      <div class="inline-block">块状元素3</div>
  </div>

• 多个块状元素②

使用flex布局实现，将父元素display设置为flex，同时设置子元素对齐。

.parent-flex {
  width: 400px;
  border: 1px solid red;
  display: flex;
  justify-content: center;
}

<div class="parent-flex">
      <div style="border: 1px solid black;">块状元素1</div>
      <div style="border: 1px solid black;">块状元素2</div>
      <div style="border: 1px solid black;">块状元素3</div>
</div>

垂直居中

• 单行行内元素

将行内元素的 line-height 属性与其父元素的 height 属性设置为相同值，比如都是40px。

• 多行的行内元素

通过设置父元素display属性为table-cell，及其他相关属性解决。

.parent-table-cell {
  width: 400px;
  height: 100px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: middle;
}

<div class="parent-table-cell">
      <span>行内元素1</span><br>
      <span>行内元素2</span><br>
      <span>行内元素3</span>
</div>

• 已知高度的块状元素

结合元素的position及margin属性，通过定位设置居中，父元素position设置为relative。

.item{
  top: 50%; // 顶部位置位于父元素的50%处
  margin-top: -50px;  // margin-top 值为自身高度的一半
  position: absolute; //position也可以是
}

注意：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持display属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

喜欢就关注支持一下吧。[呲牙][呲牙]