素顯示模式分類

塊元素：一般指該元素自身獨(dú)占一行，如div標(biāo)簽、p標(biāo)簽、ul標(biāo)簽、li標(biāo)簽等。

特點(diǎn)：

自身獨(dú)占一行。

默認(rèn)寬度為父級寬度的100%。

高、寬度、外邊距以及內(nèi)邊距都可以自行設(shè)置。

是一個容器，也是一個盒子，可以容納塊元素或者行內(nèi)元素。

注：p標(biāo)簽和標(biāo)題標(biāo)簽中不可加入塊級元素。

行內(nèi)元素：一般指多個元素共用一行，如a標(biāo)簽、span標(biāo)簽等。

特點(diǎn)：

相鄰行內(nèi)元素在一行上，一行可以顯示多個。

默認(rèn)寬度是元素自身內(nèi)容的寬度。

高、寬直接設(shè)置是無效的。

行內(nèi)元素只能容納文本或其他行內(nèi)元素。

注：鏈接a標(biāo)簽中可以放塊級元素。建議先將行內(nèi)元素轉(zhuǎn)為塊級模式最安全。

行內(nèi)塊元素：一般是指該元素同時(shí)具有塊元素和行內(nèi)元素的特點(diǎn)，如img標(biāo)簽、input標(biāo)簽等。

特點(diǎn)：

和相鄰行內(nèi)塊元素在一行上，以空白縫隙間隔，一行可以顯示多個。

默認(rèn)寬度就是其自身內(nèi)容的寬度。

高度、行高、外邊距以及內(nèi)邊距都可以控制。

總結(jié)：

元素顯示模式轉(zhuǎn)換

將元素轉(zhuǎn)換為塊級元素：

display：block；

將元素轉(zhuǎn)換為行內(nèi)元素：

display：inline；

將元素轉(zhuǎn)換為行內(nèi)塊元素：

display：inline-block；

TML圖像標(biāo)記

常用的圖像格式—GIF，PNG，JPG
圖像標(biāo)記<img />
HTML網(wǎng)頁中任何元素的實(shí)現(xiàn)都要依靠HTML標(biāo)記，要想在網(wǎng)頁中顯示圖像就需要使用圖像標(biāo)記，接下來將詳細(xì)介紹圖像標(biāo)記以及和他相關(guān)的屬性。其基本語法格式如下：

<img src="圖像URL" />

該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標(biāo)記的必需屬性。

相對路徑和絕對路徑

相對路徑
相對路徑不帶有盤符，通常是以HTML網(wǎng)頁文件為起點(diǎn)，通過層級關(guān)系描述目標(biāo)圖像的位置。
例如：

<img src="img/logo.gif" alt="傳智播客-專業(yè)的java培訓(xùn),.net培訓(xùn),php培訓(xùn),網(wǎng)頁培訓(xùn),平面培訓(xùn),iOS培訓(xùn)機(jī)構(gòu)" />

相對路徑設(shè)置分為以下三種：

圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<img src="logo.gif" />。

圖像文件位于html文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<img src="img/img01/logo.gif" />。

圖像文件位于html文件的上一級文件夾：在文件名之前加入“…/” ，如果是上兩級，則需要使用 “…/ …/”，以此類推，如<img src="../logo.gif" />。

絕對路徑

絕對路徑一般是指帶有盤符的路徑。

例如：

“D:\HTML+CSS網(wǎng)頁制作\chapter02\img\logo.gif”，或完整的網(wǎng)絡(luò)地址，例如“http://www.itcast.cn/images/logo.gif”。

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費(fèi)獲取。

原文鏈接：https://blog.csdn.net/dubaiqaq/article/details/103500345

SS中的浮動（Floats）、定位（Positioning）和顯示（Display）屬性是前端工程師掌握頁面布局的關(guān)鍵。本文將深入探討這些屬性的工作原理和使用場景，幫助開發(fā)者更好地理解和運(yùn)用它們來構(gòu)建響應(yīng)式和精確的網(wǎng)頁布局。

浮動（Float）

浮動是CSS中用于實(shí)現(xiàn)元素排列的一種方式，它可以讓元素脫離正常的文檔流，并可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動元素的邊緣。

.element {
  float: left; /* 或者 'right' */
}

使用場景

• 文字環(huán)繞圖片。
• 創(chuàng)建水平導(dǎo)航欄。
• 無網(wǎng)格系統(tǒng)時(shí)的列布局。

注意事項(xiàng)

• 清除浮動（Clearing Floats）：使用clear屬性可以防止元素被浮動元素覆蓋。

.clear-element {
  clear: both; /* 可以是 'left', 'right', 或 'both' */
}

• 包含浮動（Containing Floats）：浮動元素的父容器可能不會擴(kuò)展以包含浮動的子元素，可以通過清除浮動或使用其他技術(shù)（如overflow）來解決這個問題。
• 浮動塌陷（Float Collapse）：浮動元素不占據(jù)空間，可能導(dǎo)致父元素高度塌陷。

定位（Position）

定位屬性允許你控制元素的位置，它可以是相對于它的正常位置、相對于最近的已定位祖先元素、相對于視口或絕對位置。

.element {
  position: static | relative | absolute | fixed | sticky;
}

使用場景

• 相對定位（Relative Positioning）：元素相對于其正常位置進(jìn)行偏移。

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

• 絕對定位（Absolute Positioning）：元素相對于最近的已定位父元素進(jìn)行定位。

.absolute-element {
  position: absolute;
  top: 0;
  right: 0;
}

• 固定定位（Fixed Positioning）：元素相對于視口進(jìn)行定位，即使頁面滾動也不會移動。

.fixed-element {
  position: fixed;
  bottom: 0;
  left: 0;
}

• 粘性定位（Sticky Positioning）：元素基于用戶的滾動位置在相對和固定定位之間切換。

.sticky-element {
  position: sticky;
  top: 10px;
}

注意事項(xiàng)

• 定位元素可能會脫離文檔流，影響周圍元素的布局。
• z-index屬性可以控制堆疊順序。
• 絕對定位元素的容器應(yīng)有position: relative;，以便正確定位。

顯示（Display）

display屬性是CSS中最重要的用于控制布局的屬性之一，它定義了元素如何顯示在頁面上。

.element {
  display: block | inline | inline-block | flex | grid | none;
}

使用場景

• 塊級元素（Block）：display: block;使元素表現(xiàn)為塊級，占據(jù)新的行。

.block-element {
  display: block;
}

• 內(nèi)聯(lián)元素（Inline）：display: inline;使元素在文本行中顯示，不開始新行。

.inline-element {
  display: inline;
}

• 內(nèi)聯(lián)塊元素（Inline-Block）：display: inline-block;允許元素并排排列，同時(shí)擁有塊級元素的寬度和高度屬性。

.inline-block-element {
  display: inline-block;
}

• 彈性盒子（Flex）：display: flex;創(chuàng)建了一個彈性容器，其子元素可以靈活地在容器內(nèi)排列。

.flex-container {
  display: flex;
}

• 網(wǎng)格（Grid）：display: grid;創(chuàng)建了一個網(wǎng)格容器，可以定義行和列以及在網(wǎng)格內(nèi)放置元素。

.grid-container {
  display: grid;
}

• 隱藏元素（None）：display: none;將元素隱藏，且不為元素保留空間。

.hidden-element {
  display: none;
}

注意事項(xiàng)

• 使用display: none;與visibility: hidden;的區(qū)別在于后者仍保留元素占據(jù)的空間。
• display: flex;和display: grid;為現(xiàn)代布局提供了更多控制，通常比浮動和定位更優(yōu)。

示例

HTML結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="header">
  <div class="logo">Logo</div>
  <div class="navigation">Navigation</div>
</div>

<div class="main-content">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<div class="footer">Footer</div>

<div class="fixed-element">Fixed Element</div>

</body>
</html>

CSS樣式

/* Reset some default styles */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Header styles */
.header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  overflow: hidden; /* Clearfix for floated elements */
}

.logo {
  float: left;
  font-size: 24px;
}

.navigation {
  float: right;
  font-size: 18px;
}

/* Main content styles */
.main-content {
  padding: 20px;
}

.sidebar {
  float: left;
  width: 200px;
  background-color: #ddd;
  padding: 10px;
}

.content {
  margin-left: 220px; /* Make space for the sidebar */
  background-color: #eee;
  padding: 10px;
}

/* Footer styles */
.footer {
  background-color: #f8f8f8;
  border-top: 1px solid #e7e7e7;
  text-align: center;
  padding: 10px;
  position: relative; /* For demonstration purposes */
  top: 20px; /* Move the footer down a bit */
}

/* Fixed element styles */
.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  z-index: 1000; /* Ensure it stays on top */
}

/* Clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

在這個例子中，我們創(chuàng)建了一個包含頭部、側(cè)邊欄、主要內(nèi)容和頁腳的基本布局。我們使用浮動來對齊頭部的Logo和導(dǎo)航，以及創(chuàng)建一個側(cè)邊欄。我們還使用了相對定位來稍微下移頁腳，并使用固定定位為頁面添加了一個始終可見的固定元素。最后，我們使用了overflow: hidden;來清除頭部中浮動元素的影響。

結(jié)語

浮動、定位和顯示屬性是CSS中構(gòu)建復(fù)雜布局的強(qiáng)大工具。通過深入理解和正確應(yīng)用這些屬性，前端工程師可以創(chuàng)建出既美觀又功能強(qiáng)大的網(wǎng)頁。隨著Web標(biāo)準(zhǔn)的不斷發(fā)展，我們也需要不斷學(xué)習(xí)和適應(yīng)新的CSS特性，以保持我們技能的前沿性。