CSS- 3.1 盒子模型-塊級元素、行內元素、行內塊級元素和display屬性

本系列可作為前端學習系列的筆記，代碼的運行環境是在HBuilder中，小編會將代碼復制下來，大家復制下來就可以練習了，方便大家學習。

HTML系列文章?已經收錄在前端專欄，有需要的寶寶們可以點擊前端專欄查看！

點贊關注不迷路！您的點贊、關注和收藏是對小編最大的支持和鼓勵！

系列文章目錄

CSS- 1.1 css選擇器

CSS- 2.1 實戰之圖文混排、表格、表單、學校官網一級導航欄

CSS- 3.1 盒子模型-塊級元素、行內元素、行內塊級元素和display屬性

CSS- 4.1 浮動（Float）

CSS- 4.2 相對定位（position: relative）

系列文章目錄

前言

一、理論部分?

1. 塊級元素（Block-level Elements）

2. 行內元素（Inline Elements）

3. 塊級元素與行內元素的區別總結

4. 行內塊級元素（Inline-block Elements）

5. 元素類型的轉換

6. 實際應用中的選擇

7. 注意事項

8. 總結

?二、實戰部分

總結

前言

小編作為新晉碼農一枚，會定期整理一些寫的比較好的代碼，作為自己的學習筆記，會試著做一下批注和補充，如轉載或者參考他人文獻會標明出處，非商用，如有侵權會刪改！歡迎大家斧正和討論！

一、理論部分?

在CSS中，元素根據其默認的顯示方式可以分為塊級元素（Block-level Elements）和行內元素（Inline Elements）。理解這兩者的區別對于網頁布局和樣式設計至關重要。下面將從定義、特點、常用元素、布局影響及轉換方法等方面進行全面介紹。

1. 塊級元素（Block-level Elements）

? ? ? ? 塊級元素在頁面中默認獨占一行，會從新的一行開始顯示，并且會盡可能地占據其父元素的全部寬度。塊級元素通常用于構建頁面的結構，如標題、段落、列表等。

（1）特點

獨占一行：塊級元素前后會自動換行，不會與其他元素在同一行顯示。
可設置寬高：可以通過CSS的width和height屬性設置塊級元素的寬度和高度。
可設置內外邊距：支持margin和padding屬性，且這些屬性會對周圍元素產生影響。
默認寬度為父元素的100%：如果不設置寬度，塊級元素會默認占據父元素的全部寬度。

（2）常用塊級元素

<div>：通用的塊級容器，用于布局。
<p>：段落。
<h1>?到?<h6>：標題。
<ul>、<ol>、<li>：無序列表、有序列表和列表項。
<table>：表格。
<form>：表單。
<header>、<footer>、<section>、<article>：HTML5語義化標簽。

(3)示例

html

<div>這是一個塊級元素</div>
<p>這是另一個塊級元素</p>

css

div {background-color: lightblue;width: 200px;height: 100px;margin: 10px;padding: 10px;
}
p {background-color: lightgreen;width: 300px;margin: 10px;
}

效果：

<div>和<p>會各自占據一行，并且可以設置寬高和邊距

2. 行內元素（Inline Elements）

(1)定義

行內元素不會獨占一行，而是與其他行內元素在同一行顯示，直到空間不足時才會換行。行內元素通常用于包裹文本或其他行內內容，如鏈接、強調文本等。

(2)特點

不獨占一行：行內元素會與其他行內元素在同一行顯示，直到空間不足。
不能直接設置寬高：默認情況下，行內元素的寬度和高度由其內容決定，不能通過width和height屬性直接設置。
內外邊距的垂直方向可能無效：margin和padding的水平方向（左右）會生效，但垂直方向（上下）可能不會影響周圍元素的布局。
默認寬度由內容決定：行內元素的寬度取決于其內容，不會自動擴展到父元素的全部寬度。

(3)常用行內元素

<span>：通用的行內容器，用于樣式化文本。
<a>：超鏈接。
<strong>、<em>：強調文本。
<img>：圖片（雖然<img>是行內元素，但可以通過CSS設置為類似塊級元素的行為）。
<input>、<button>：表單控件（某些情況下表現為行內塊級元素）。

(4)示例

html

<span>這是一個行內元素</span>
<a href="#">這是一個鏈接</a>

css?

span {background-color: yellow;padding: 10px;margin: 10px; /* 水平方向生效，垂直方向可能無效 */
}
a {background-color: pink;padding: 5px;
}

效果：

<span>和<a>會在同一行顯示，且無法直接通過CSS設置寬高。

3. 塊級元素與行內元素的區別總結

特性	塊級元素	行內元素
默認顯示方式	獨占一行	與其他行內元素同行顯示
寬度和高度	可通過CSS設置	默認由內容決定，不能直接設置
內外邊距	水平和垂直方向均生效	水平方向生效，垂直方向可能無效
默認寬度	父元素的100%	由內容決定
常用場景	構建頁面結構	包裹文本或小范圍內容

4. 行內塊級元素（Inline-block Elements）

CSS還提供了一種混合模式——行內塊級元素（Inline-block Elements），它結合了行內元素和塊級元素的特點：

不獨占一行：可以與其他行內塊級元素或行內元素在同一行顯示。
可設置寬高：可以通過CSS設置寬度和高度。
內外邊距均生效：水平和垂直方向的margin和padding都有效。

(1)如何將元素設置為行內塊級

通過CSS的display: inline-block;屬性可以將元素設置為行內塊級。

(2)示例

html

<span class="inline-block">行內塊級元素1</span>
<span class="inline-block">行內塊級元素2</span>

css

.inline-block {display: inline-block;width: 100px;height: 50px;background-color: coral;margin: 5px;padding: 5px;
}

效果：

兩個<span>元素會在同一行顯示，并且可以設置寬高和邊距。

5. 元素類型的轉換

CSS的display屬性可以改變元素的默認顯示方式：

display: block;：將元素設置為塊級元素。
display: inline;：將元素設置為行內元素。
display: inline-block;：將元素設置為行內塊級元素。
display: none;：隱藏元素（不占據空間）。
display: flex;、display: grid;：用于現代布局方式。

(1)示例

html

<a href="#" class="block-link">將鏈接設置為塊級元素</a>
<div class="inline-div">將div設置為行內元素</div>

css

.block-link {display: block;width: 200px;height: 50px;background-color: lightblue;margin: 10px;
}
.inline-div {display: inline;background-color: lightgreen;padding: 5px;
}

效果：

<a>元素會獨占一行，并可以設置寬高。
<div>元素會與其他行內元素同行顯示，且無法設置寬高。

6. 實際應用中的選擇

使用塊級元素：
- 當需要構建頁面的結構（如導航欄、內容區域、頁腳）時。
- 當需要設置元素的寬高、邊距時。
- 當需要元素獨占一行時。
使用行內元素：
- 當需要包裹文本或小范圍內容（如鏈接、強調文本）時。
- 當需要元素與其他元素在同一行顯示時。
使用行內塊級元素：
- 當需要元素在同一行顯示，但又能設置寬高和邊距時（如導航菜單項、按鈕組）。

7. 注意事項

默認樣式的重置：
- 不同瀏覽器對元素的默認樣式可能有所不同，建議使用CSS重置（如normalize.css）或手動重置默認樣式。
語義化：
- 在HTML5中，應盡量使用語義化的標簽（如<header>、<section>、<article>）來替代<div>，以提高代碼的可讀性和SEO效果。
布局的靈活性：
- 現代CSS布局方式（如Flexbox、Grid）可以更靈活地控制元素的排列，但在某些情況下，理解塊級和行內元素的基本概念仍然很重要。

8. 總結

塊級元素：獨占一行，可設置寬高和邊距，常用于構建頁面結構。
行內元素：與其他行內元素同行顯示，不能直接設置寬高，常用于包裹文本或小范圍內容。
行內塊級元素：結合了兩者的特點，可在同一行顯示且可設置寬高和邊距。
display屬性：可以靈活地改變元素的顯示方式，滿足不同的布局需求。

?二、實戰部分

1.代碼如下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子模型-塊級元素，行內元素</title><style type="text/css">/* 塊級元素的特點1.塊級元素獨占一行，標準文檔流2.寬和高可以設置3.margin可以取負數，padding不可以取負數，padding和margin可以相加4.塊級元素margin取同一空間值時，會出現塌陷，就是取最大值而不是相加 */div{border: 1px solid black;}.div1{width: 200px;height: 100px;/* margin: 10px;上下左右margin: 10px 30px;上下 左右margin: 10px auto;盒子在瀏覽器頁面居中，上下留10pxmargin: 10px 20px 30px;上 左右 下margin: 10px 20px 30px 40px;上 右 下 左 */margin-left: 50px;padding-left: 20px;margin-bottom: 20px;/* display:inline-block; */  /* 通過CSS的display: inline-block;屬性可以將元素設置為行內塊級。 */}.div2{width: 100px;height: 50px;margin-left: 20px;}.div3{width: 100px;height: 100px;margin-top: 50px;/* display: inline-block; */}.div4{width: 200px;height: 100px;margin-top: 50px;/* display: inline-block; */}/* 行內元素特點：除span a是行內元素外，其余都是塊級元素1.不獨占一行2.不可以設置寬高，寬高由內容決定3.margin和padding上下設置無效，左右有效4.margin不會在行內元素里出現塌陷 */span{border: 1px solid black;}#sp1{width: 100px;height: 100px;margin-top: 100px;margin-left: 50px;padding-left: 50px;padding-top:50px ;margin-right: 50px;/* display:block; */  /* display: block;：將元素設置為塊級元素 */}#sp2{margin-left:50px ;}</style></head><body><h1>塊級元素</h1><div class="div1">div1<div class="div2">div2</div></div><div class="div3">div3</div><div class="div4">div4</div><h1>行內元素</h1><br><br><span id="sp1">span1span1</span><span id="sp2">span2</span><a href="../個人主題網站/index.html"><h3 align="center">返回首頁</h3></a></body>
</html>

2.代碼運行如下

3.修改塊級元素為行內快寄元素，行內元素變為塊級元素

在塊級元素div 的CSS樣式中添加：display:inline-block;??屬性可以將元素設置為行內塊級。

在行內元素span 的CSS樣式中添加：display: block;：將元素設置為塊級元素

修改后的代碼如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子模型-塊級元素，行內元素</title><style type="text/css">/* 塊級元素的特點1.塊級元素獨占一行，標準文檔流2.寬和高可以設置3.margin可以取負數，padding不可以取負數，padding和margin可以相加4.塊級元素margin取同一空間值時，會出現塌陷，就是取最大值而不是相加 */div{border: 1px solid black;}.div1{width: 200px;height: 100px;/* margin: 10px;上下左右margin: 10px 30px;上下 左右margin: 10px auto;盒子在瀏覽器頁面居中，上下留10pxmargin: 10px 20px 30px;上 左右 下margin: 10px 20px 30px 40px;上 右 下 左 */margin-left: 50px;padding-left: 20px;margin-bottom: 20px;display:inline-block;  /* 通過CSS的display: inline-block;屬性可以將元素設置為行內塊級。 */}.div2{width: 100px;height: 50px;margin-left: 20px;}.div3{width: 100px;height: 100px;margin-top: 50px;display: inline-block;}.div4{width: 200px;height: 100px;margin-top: 50px;display: inline-block;}/* 行內元素特點：除span a是行內元素外，其余都是塊級元素1.不獨占一行2.不可以設置寬高，寬高由內容決定3.margin和padding上下設置無效，左右有效4.margin不會在行內元素里出現塌陷 */span{border: 1px solid black;}#sp1{width: 100px;height: 100px;margin-top: 100px;margin-left: 50px;padding-left: 50px;padding-top:50px ;margin-right: 50px;display:block;  /* display: block;：將元素設置為塊級元素 */}#sp2{margin-left:50px ;}</style></head><body><h1>塊級元素</h1><div class="div1">div1<div class="div2">div2</div></div><div class="div3">div3</div><div class="div4">div4</div><h1>行內元素</h1><br><br><span id="sp1">span1span1</span><span id="sp2">span2</span><a href="../個人主題網站/index.html"><h3 align="center">返回首頁</h3></a></body>
</html>

代碼運行：