這是我參與 8 月更文挑戰的第 8 天，活動詳情查看： 8月更文挑戰css

感激相遇你好我是阿kenhtml

做者：請叫我阿ken
連接：juejin.cn/user/109118…
來源：掘金
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。markdown

🌊🌈關於前言：

文章部份內容及圖片出自網絡，若有問題請與我本人聯繫(主頁介紹中有公衆號)網絡

本博客暫適用於剛剛接觸HTML以及很久不看想要複習的小夥伴oop

🌊🌈關於內容：

6.4_元素的類型與轉換

接下來，咱們將對元素的類型與轉換進行詳細講解。佈局

6.4.1_元素的類型

HTML 標記語言提供豐富的標記，用於組織頁面結構。爲了使頁面結構的組織更加輕鬆、合理，HTML 標記被定義成了不一樣的類型，通常分爲塊標記和行內標記，也稱塊元素和行內元素。瞭解它們的特性能夠爲使用 CSS 設置樣式和佈局打下基礎，具體以下：post

1. 塊元素

塊元素在頁面中以區域塊的形式出現，其特色是，每一個塊元素一般都會獨自佔據一整行或多整行，能夠對其設置寬度、高度、對齊等屬性，經常使用於網頁佈局和網頁結構的搭建。
_
常見的塊元素有 < h1> ~ < h6>、< p>、 < div>、< ul>、< ol>、< li> 等，其中< div>標記是最典型的塊元素。學習

2. 行內元素

_
行內元素也稱內聯元素或內嵌元素，其特色是，沒必要在新的一行開始，同時，也不強迫其餘元素在新的一行顯示。一個行內元素一般會和它先後的其餘行內元素顯示在同一行中，它們不佔有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，通常不能夠設置寬度、高度、對齊等屬性，經常使用於控制頁面中文本的樣式。
_
常見的行內元素有 < strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< a>、 < span> 等，其中 < span> 標記是最典型的行內元素。字體

案例：進一步認識塊元素與行內元素，spa

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>塊元素和行內元素</title>
<style type="text/css"> h2 { /*定義h2的背景顏色、寬度、高度、文本水平對齊方式*/ background: #FCC; width: 350px; height: 50px; text-align: center; } p { background: #090; } /*定義P的背景顏色*/ strong { /*定義strong的背景顏色、寬度、高度、文本水平對齊方式*/ background: #FCC; width: 360px; height: 50px; text-align: center; } em { background: #FFO; } /*定義em的背景顏色*/ del { background: #CCC; } /*定義del的背景顏色*/ </style>
</head>
<body>

<h2>h2 標記定義的文本。</h2>
<p>p 標記定義的文本。 </P>
<strong>strong 標記定義的文本。</strong>
<em>em 標記定義的文本。 </em>
<del>del 標記定義的文本。</del>

</body>
</html>
複製代碼

在上述案例中，首先使用塊標記 < h2>、< p> 和行內標記 < strong>、< em>、< del>定義文本，而後對它們應用不一樣的背景顏色，同時，對 < h2> 和 < strong> 應用相同的寬度、高度和對齊屬性。

運行後能夠看出，不一樣類型的元素在頁面中所佔的區域不一樣。塊元素 < h2> 和 < p> 各自佔據一個矩形的區域，雖然 < h2> 和 < p> 相鄰，可是它們不會排在同一行中，而是依次豎直排列，其中，設置了寬高和對齊屬性的 < h2> 按設置的樣式顯示，未設置寬高和對齊屬性的 < p> 則左右撐滿頁面。然而行內元素 < strong>、< em> 和 < del> 排列在同一行，遇到邊界則自動換行，雖然對 < strong> 設置了和 < h2> 相同的寬高和對齊屬性，可是在實際的顯示效果中並不會生效。

值得一提的是，行內元素一般嵌套在塊元素中使用，而塊元素卻不能嵌套在行內元素中。例如，能夠將上述案例中的 < strong>、< em> 和 < del> 嵌套在 < p> 標記中，代碼以下。

<p>
<strong>strong 標記定義的文本。</strong>
<em>em 標記定義的文本。</em>
<del>del 標記定義的文本。</del>
</p>
複製代碼

運行後能夠看出，當行內元素嵌套在塊元素中時，就會在塊元素上佔據必定的範圍，成爲塊元素的一部分。

總結：塊元素一般獨佔一行 ( 邏輯行 )。能夠設置寬高和對齊屬性，而行內元素一般不獨佔一行，不能夠設置寬高和對齊屬性。行內元素能夠嵌套在塊元素中，而塊元素不能夠嵌套在行內元素中。

注意:
_
在行內元素中有幾個特殊的標記 ——— < img /> 和 < input />，能夠對它們設置寬高和對齊屬性，有些資料可能會稱它們爲行內塊元素。

6.4.2_< span> 標記

與 < div> 同樣， < span> 也做爲容器標記被普遍應用在 HTML 語言中。和< div > 標記不一樣的是 < span> 是行內元素，< span> 與 < /span>之間只能包含文本和各類行內標記，如加粗標記 < strong>、傾斜標記 < em> 等，< span> 中還能夠嵌套多層 < span> 。

< span> 標記經常使用於定義網頁中某些特殊顯示的文本，配合 class 屬性使用。它自己沒有固定的格式表現，只有應用樣式時，纔會產生視覺上的變化。當其餘行內標記都不合適時，就可使用 < span> 標記。

案例：演示 < span> 標記的使用，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>span 標記</title>
<style type="text/css"> #header { /*設置當前div中文本的通用樣式*/ font-family: "黑體"; font-size: 14px; color: #FFA500; } .huanzhi { /*控制第1個span中的特殊文本*/ color: #515151; font-size: 20px; padding-right: 20px; } .course { /*控制第2個span中的特殊文本*/ font-size: 18px; color: #87CEEB; } </style>
</head>
<body>

<div id="header">
<span class="huanzhi">阿ken的CSDN</span>
歡迎光臨
<span class="course">點擊進入</span>，歡迎光臨!
</div>

</body>
</html>
複製代碼

上述代碼中使用 < div> 標記定義一些文本，而且在 < div> 中嵌套兩對 < span>，用於控制某些特殊顯示的文本，而後使用 CSS 分別設置它們的樣式。

運行後特殊顯示的文本都是經過 CSS 控制 < span> 標記設置的。

運行後能夠看出，< span> 標記能夠嵌套於 < div> 標記中，成爲它的子元素，可是反過來則不成立，即 < span> 標記中不能嵌套 < div> 標記。從 < div> 和 < span> 之間的區別和聯繫，能夠更深入地理解塊元素和行內元素。

6.4.3_元素的轉換 display

網頁是由多個塊元素和行內元素構成的盒子排列而成的。若是但願行內元素具備塊元素的某些特性，如能夠設置寬高，或者須要塊元素具備行內元素的某些特性，如不獨佔一行排列，可使用 display 屬性對元素的類型進行轉換。

display 屬性經常使用的屬性值及含義以下：

inline: 此元素將顯示爲行內元素 ( 行內元素默認的 display 屬性值 )。
block: 此元素將顯示爲塊元素 ( 塊元素默認的 display 屬性值 )。
inline-block：此元素將顯示爲行內塊元素，能夠對其設置寬高和對齊等屬性，可是該元素不會獨佔一行。
none：此元素將被隱藏，不顯示，也不佔用頁面空間，至關於該元素不存在。

案例：演示 display 屬性的用法和效果，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素的轉換</title>
<style type="text/css"> div, span { /*同時設置div和span的樣式*/ width: 200px; /*寬度*/ height:50px; /*高度*/ background: #FCC; /*背景顏色*/ margin: 10px; /*外邊距*/ } .d_one, .d_two { display: inline; } /*將前兩個div轉換爲行內元素*/ .s_one { display: inline-block; } /*將第一個span轉換爲行內塊元素*/ .s_three { display: block; } /*將第三個span轉換爲塊元素*/ </style>
</head>
<body>

<div class="d_one">第一個 div 中的文本</div>
<div class="d_two">第二個 div 中的文本</div>
<div class="d_three">第三個 div 中的文本</div>
<span class="s_one">第一個 span 中的文本</span>
<span class="s_two">第二個 span 中的文本</span>
<span class="s_three">第三個 span 中的文本</span>

</body>
</html>
複製代碼

上述代碼中，定義了三對 < div> 和三對 < span> 標記，爲它們設置相同的寬度、高度、背景顏色和外邊距。同時，對前兩個 < div> 應用 " display:inline; " 樣式，使它們從塊元素轉換爲行內元素，對第一個和第三個 < span> 分別應用 " display：inline-block; " 和 " display:inline; " 樣式，使它們分別轉換爲行內塊元素和行內元素。

運行後能夠看出，前兩個 < div> 排列在了同一行，靠自身的文本內容支撐其寬高，這是由於它們被轉換成了行內元素。而第一個和第三個< span> 則按固定的寬高顯示，不一樣的是前者不會獨佔一行，後者獨佔一行，這是由於它們分別被轉換成了行內塊元素和塊元素。

在上面的案例中，使用 display 的相關屬性值，能夠實現塊元素、行內元素和行內塊元素之間的轉換。若是但願某個元素不被顯示，還可使用 " display: none; " 進行控制。例如，但願上面案例中的第三個 < div> 不被顯示，能夠在 CSS 代碼中增長以下樣式。

.d_three { 
display: none; 
} /*隱藏第三個div*/
複製代碼

運行代碼後能夠看出，當定義元素的 display 屬性爲 none 時，該元素將從頁面消失，再也不佔用頁面空間。

注意:

根據上述案例運行結果能夠發現，前兩個 < div> 與第三個 < div> 之間的垂直外邊距，並不等於前兩個 < div> 的 margin-bottom 與第三個 < div> 的 margin-top 之和。這是由於前兩個 < div> 被轉換成了行內元素，而行內元素只能夠定義左右外邊距，定義上下外邊距時無效。

6.5_階段案例——製做網頁焦點圖

爲了使讀者更好地運用浮動與定位組織頁面，本節將經過案例的形式分步驟製做一個網頁焦點圖。

6.5.1_分析效果圖

今日入門學習暫時告一段落

Peace

🌊🌈往期回顧：

🌊🌈關於後記：

感謝閱讀，但願能對你有所幫助博文如有瑕疵請在評論區留言或在主頁我的介紹中添加聯繫方式私聊我感謝每一位小夥伴不吝賜教

原創不易，「點贊」+「評論」 謝謝支持❤

阿ken的HTML、CSS的入門指南（十一）_浮動與定位