21.HTML 浮動(dòng)、定位和顯示屬性

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

浮動(dòng)（Float）

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

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

使用場(chǎng)景

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

注意事項(xiàng)

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

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

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

定位（Position）

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

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

使用場(chǎng)景

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

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

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

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

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

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

粘性定位（Sticky Positioning）：元素基于用戶的滾動(dòng)位置在相對(duì)和固定定位之間切換。

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

注意事項(xiàng)

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

顯示（Display）

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

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

使用場(chǎng)景

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

.block-element {
  display: block;
}

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

.inline-element {
  display: inline;
}

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

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

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

.flex-container {
  display: flex;
}

網(wǎng)格（Grid）：display: grid;創(chuàng)建了一個(gè)網(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)代布局提供了更多控制，通常比浮動(dòng)和定位更優(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;
}

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

結(jié)語(yǔ)

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

言

下拉列表select在表單中應(yīng)該算是使用頻率比較高的一個(gè)元素，而我們也知道頁(yè)面上默認(rèn)的select標(biāo)簽樣式是很難看的。基本所有的團(tuán)隊(duì)都會(huì)選擇使用Bootstrap或者自己封裝一個(gè)下拉列表的組件，今天我們也試著使用CSS3新特性來(lái)寫(xiě)一個(gè)帶動(dòng)畫(huà)效果的下拉列表樣式吧。

CSS3

感興趣的可以自行去github上學(xué)習(xí)源碼，github地址如下。

https://github.com/zhouxiongking/article-pages/blob/master/articles/dropdown/dropdown.html

頁(yè)面效果

首先，我們來(lái)看看帶動(dòng)畫(huà)效果的下拉列表效果是什么樣的，如下圖所示。

效果圖

頁(yè)面組成

這里我們簡(jiǎn)單分析下頁(yè)面的構(gòu)成，實(shí)際上非常的簡(jiǎn)單，主要包含以下三個(gè)元素。

表示外層容器的div元素
上面是一個(gè)span元素
下面是一個(gè)ul元素，每個(gè)li表示一個(gè)列表項(xiàng)

在整個(gè)下拉列表中，主要有兩個(gè)動(dòng)畫(huà)。

下拉菜單旁邊的小三角圖標(biāo)，在鼠標(biāo)懸浮和離開(kāi)時(shí)動(dòng)態(tài)變換
下方的列表，在鼠標(biāo)懸浮和離開(kāi)上面的span元素時(shí)，列表會(huì)有動(dòng)畫(huà)顯示和消失的效果。

代碼構(gòu)成

下面我們來(lái)看看整個(gè)頁(yè)面的代碼構(gòu)成。

HTML

首先是頁(yè)面的HTML代碼，正如上一部分所講，頁(yè)面主要為一個(gè)外層容器div，內(nèi)部是一個(gè)span和ul元素，每個(gè)列表項(xiàng)li內(nèi)包含一個(gè)a元素，所有HTML部分代碼如下所示。

HTML代碼

CSS部分的代碼才是整個(gè)實(shí)現(xiàn)效果的核心，我們具體來(lái)分析。

首先是頁(yè)面的全局基本配置樣式。

全局配置

然后是外層容器的樣式。

外層容器樣式

然后是span元素的樣式，旁邊的上三角形通過(guò)偽元素::after來(lái)實(shí)現(xiàn)，在::after偽元素中通過(guò)border-color屬性來(lái)控制三角形的朝向，然后通過(guò)transition屬性設(shè)置變換樣式。

span元素以及上三角形

當(dāng)鼠標(biāo)停留在span元素上時(shí)，span元素背景色會(huì)改變，上三角會(huì)變成下三角。

鼠標(biāo)停留后span的樣式

緊接著是下面的ul以及l(fā)i元素的樣式，都是一些很普通的屬性。

ul與li樣式

然后是li下的a元素的樣式。

li下a元素樣式

然后是css中最核心的地方，ul的動(dòng)畫(huà)效果，通過(guò)translate3d屬性改變ul所處的位置，再以transform屬性添加動(dòng)畫(huà)效果。

ul初始狀態(tài)

至此，所有代碼講解完畢，如果運(yùn)行成功后，會(huì)得到文章開(kāi)始時(shí)的下拉列表效果。

結(jié)束語(yǔ)

本篇文章主要給大家介紹了如何使用CSS編寫(xiě)一個(gè)帶動(dòng)畫(huà)的下拉列表效果，你學(xué)會(huì)了嗎？

天這篇文章我們來(lái)說(shuō)一下css的浮動(dòng)屬性（float），給塊狀元素添加float屬性可以使其轉(zhuǎn)變?yōu)樾袃?nèi)元素，也就是我們所說(shuō)標(biāo)簽對(duì)象浮動(dòng)居左靠左（float:left）和浮動(dòng)居右靠右(float:right)。

（1）float使用語(yǔ)法

css的float主要有3個(gè)屬性值none、left、right，默認(rèn)為none；具體的使用如下所示：

float:none; （不使用浮動(dòng)）

float:left; （靠左浮動(dòng)）

float:right; （靠右浮動(dòng)）

（2）float使用案例

我們通過(guò)案例來(lái)實(shí)際演練一下float元素的使用技巧。

1、float:left的使用練習(xí)

我們這里創(chuàng)建一個(gè)導(dǎo)航條，導(dǎo)航條包含首頁(yè)、關(guān)于我們、新聞中心、案例展示等欄目名稱。具體的網(wǎng)頁(yè)代碼以及顯示效果就如下圖所示：

由上圖可以看出默認(rèn)的樣式是豎排顯示的，但是我們常見(jiàn)的網(wǎng)頁(yè)導(dǎo)航條都是橫排顯示的，這時(shí)候我們就可以使用float屬性來(lái)使塊狀元素轉(zhuǎn)變?yōu)樾袃?nèi)元素，并讓居左顯示。

這里我們創(chuàng)建一個(gè)寬度為980px的導(dǎo)航條，給子元素（li）添加float的屬性并對(duì)齊進(jìn)行填充（padding）以及外間距（margin）的潤(rùn)色。具體的網(wǎng)頁(yè)代碼以及顯示效果就如下圖所示：

網(wǎng)頁(yè)中的顯示效果：

2、float:right的使用練習(xí)

float:right顧名思義用于元素靠右對(duì)齊，我們來(lái)看下面的一個(gè)例子，我們隨意寫(xiě)一篇文字，然后文字中插入一張圖片并使圖片右對(duì)齊。

我們?cè)倬W(wǎng)頁(yè)中可以看到圖片已經(jīng)浮動(dòng)到網(wǎng)頁(yè)的右側(cè)中去了。

好了，本篇文章就給大家說(shuō)到這里，大家可以注意看下我們使用float之后會(huì)出現(xiàn)什么問(wèn)題，下邊文章我們會(huì)給大家講解如何清除float帶來(lái)的負(fù)面影響。

每日金句：你不能拼爹的時(shí)候，你就只能去拼命！喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。

在線咨詢

上一篇：每天一個(gè)CSS小技巧 - 菱形圖片
下一篇：Web前端開(kāi)發(fā)基礎(chǔ)知識(shí)，設(shè)置網(wǎng)頁(yè)背景圖，如何在網(wǎng)頁(yè)中插入圖片

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

21.HTML 浮動(dòng)、定位和顯示屬性

浮動(dòng)（Float）

使用場(chǎng)景

注意事項(xiàng)

定位（Position）

使用場(chǎng)景

注意事項(xiàng)

顯示（Display）

使用場(chǎng)景

注意事項(xiàng)

示例

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

CSS樣式

結(jié)語(yǔ)

言

頁(yè)面效果

頁(yè)面組成

代碼構(gòu)成

結(jié)束語(yǔ)

（1）float使用語(yǔ)法

（2）float使用案例

您的項(xiàng)目需求