級元素：使用時，會自動換行的元素，可以包含行內元素和其他塊級元素，可以設置寬，高，上下左右邊距，默認 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"。

喜歡就關注支持一下吧。[呲牙][呲牙]