21.HTML 浮動、定位和顯示屬性

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

浮動（Float）

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

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

使用場景

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

注意事項

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

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

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

定位（Position）

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

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

使用場景

相對定位（Relative Positioning）：元素相對于其正常位置進行偏移。

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

絕對定位（Absolute Positioning）：元素相對于最近的已定位父元素進行定位。

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

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

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

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

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

注意事項

定位元素可能會脫離文檔流，影響周圍元素的布局。
z-index屬性可以控制堆疊順序。
絕對定位元素的容器應有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;允許元素并排排列，同時擁有塊級元素的寬度和高度屬性。

.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;
}

注意事項

使用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和導航，以及創(chuàng)建一個側(cè)邊欄。我們還使用了相對定位來稍微下移頁腳，并使用固定定位為頁面添加了一個始終可見的固定元素。最后，我們使用了overflow: hidden;來清除頭部中浮動元素的影響。

結(jié)語

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

.HTML基本標簽

HTML（HyperTextMark-upLanguage）即超文本標記語言或超文本鏈接標示語言，是WWW的描述語言。

HTML文檔的結(jié)構(gòu)

HTML標簽由標簽、屬性、內(nèi)容組成，屬性與內(nèi)容可選。
包含內(nèi)容的標簽以<…>開始，</…>結(jié)束，不包含內(nèi)容的標簽可以是如下格式：<…/>
屬性的值盡量用雙引號或單引號修飾
標簽中的內(nèi)容可以是其他的標簽，稱為原標簽的子標簽，子標簽必須在父標簽結(jié)束之前結(jié)束

2.頁面背景色或背景圖像

<body background="back_image.GIF" >

Hello World！

</body>

（網(wǎng)頁背景圖像）

<body bgcolor="#FFCCFF">

Hello World!

</body>

（網(wǎng)頁背景色彩）

3.文本相關(guān)標簽

標題標簽<h1>－<h6>，<font>標簽。

行的控制

段落標簽<p>，換行標簽<br>。

標題標簽

<h#> ... </h#>，#=1, 2, 3, 4, 5, 6 （說明：<h1>到<h6>字體大小依次遞減）

<sub>下標文字，<sup>上標文字，<del>刪除線。

段落標簽<p>，換行標簽<br>。

內(nèi)容分隔<HR>標簽

<HR> 標簽用于在頁面上繪制水平線。

圖像標簽

圖像的基本語法：<img src=“images/adv_2.jpg” width=“300” height=“150” alt=“在線報名” >

頁面鏈接<A>標簽

要鏈接到同一目錄 (C:\HTML) 下的頁面，可編寫 <A HREF = “Doc1.htm”> 或 <A HREF = “C:\html\Doc2.htm”>

鏈接到本頁面：

圖像鏈接

</a>

滾動<marquee>標簽

滾動文字或圖像

</marquee>

說明：scrolldelay：表示滾動延遲時間，默認值為90；direction：表示滾動的方向，默認為從右向左。

2.HTML/CSS基礎(chǔ)

目標：掌握列表的用法
使用表格的基本結(jié)構(gòu)實現(xiàn)簡單表格
使用表格相關(guān)標簽實現(xiàn)跨行、跨列的復雜表格
會使用表單的基本結(jié)構(gòu)制作表單頁面
會使用各種表單元素實現(xiàn)注冊頁面
能理解post和get兩種提交方式的區(qū)別

無序列表標簽<ul>用于頁面中沒有順序的列舉項。

格式： <ul type=“”>

type屬性設(shè)置標號的類型，值可以取：

1 disc ：實心圓點

2 circle ：空心圓點

3 square ：實心方塊

無序列表

有序列表<ol>用于說明頁面中的某些成分，需要按特定的順序排列。有序列表的每項都有連續(xù)的編號。

格式：<ol type=“” start=“”>

type設(shè)置標號的類型，值可以取：

1 1：顯示數(shù)字

2 A：顯示大寫字母

3 a：顯示小寫字母

4 I：顯示大寫羅馬數(shù)字

5 i：顯示小寫羅馬數(shù)字

有序列表

嵌套列表：一個列表作為另一個列表的一部分，即多層列表。

嵌套列表

表格<table>應用場合

門戶網(wǎng)站應用表格

表格的基本語法

<table>...</ table >定義表格

如何創(chuàng)建表格

創(chuàng)建表格

表格表現(xiàn)

表頭與標題

域名數(shù)量報表的創(chuàng)建

域名數(shù)量報表

什么是跨行跨列的表格

1.跨多列的表格

2.跨多行的表格

3.如何創(chuàng)建跨行跨列的表格

表格的尺寸和邊框

品牌商城表的創(chuàng)建

width用來設(shè)置表格的寬度；height用來設(shè)置表格的高度；border用來設(shè)置表格邊框尺寸大小；bordercolor用來設(shè)置表格邊框顏色。

品牌商城表

背景：background屬性用來設(shè)置表格的背景圖片；bgcolor屬性用來設(shè)置表格、行、列的背景色。

對其方式：align屬性用來設(shè)置表格、行、列的對齊方式。

文本框基本語法

文本框的建設(shè)

文本框

密碼框基本語法

密碼框的建設(shè)

密碼框，22個字符寬度

單選按鈕基本語法

單選按鈕的建設(shè)

單選按鈕框

復選框基本語法

列表框基本語法

多行文本框基本語法

按鈕基本語法

其他表單元素：<input type=“hidden”/>表單隱藏域
<input type=“image”/>表單圖片按鈕
<input type=“file”/>文件瀏覽

<label>標簽

<label>標簽可以綁定某個表單元素，用于擴展可以相應點擊等事件的區(qū)域

如：當點擊復選框右邊的提示文字時，該復選框也可被選中。

內(nèi)容有限，關(guān)于css，div和網(wǎng)頁布局的部分就下次在和大家分享吧！

者：伯樂在線/chokcoco
http://web.jobbole.com/95068/

何為滾動視差

視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。作為網(wǎng)頁設(shè)計的熱點趨勢，越來越多的網(wǎng)站應用了這項技術(shù)。

通常而言，滾動視差在前端需要輔助 Javascript 才能實現(xiàn)。當然，其實 CSS 在實現(xiàn)滾動視差效果方面，也有著不俗的能力。下面就讓我們來見識一二：

認識 background-attachment

background-attachment 算是一個比較生僻的屬性，基本上平時寫業(yè)務樣式都用不到這個屬性。但是它本身很有意思。

background-attachment：如果指定了 background-image ，那么 background-attachment 決定背景是在視口中固定的還是隨著包含它的區(qū)塊滾動的。

單單從定義上有點難以理解，隨下面幾個 Demo 了解下 background-attachment 到底是什么意思：

background-attachment: scroll

scroll 此關(guān)鍵字表示背景相對于元素本身固定，而不是隨著它的內(nèi)容滾動。

background-attachment: local

local 此關(guān)鍵字表示背景相對于元素的內(nèi)容固定。如果一個元素擁有滾動機制，背景將會隨著元素的內(nèi)容滾動，并且背景的繪制區(qū)域和定位區(qū)域是相對于可滾動的區(qū)域而不是包含他們的邊框。

background-attachment: fixed

fixed 此關(guān)鍵字表示背景相對于視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內(nèi)容滾動。

注意一下 scroll 與 fixed，一個是相對元素本身固定，一個是相對視口固定，有點類似 position 定位的 absolute 和 fixed。

可以感受下 3 種不同取值的不同效果：

CodePen Demo — bg-attachment Demo（https://codepen.io/Chokcoco/pen/xJJorg）

使用 background-attachment: fixed 實現(xiàn)滾動視差

首先，我們使用 background-attachment: fixed 來實現(xiàn)滾動視差。fixed 此關(guān)鍵字表示背景相對于視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內(nèi)容滾動。

這里的關(guān)鍵在于，即使一個元素擁有滾動機制，背景也不會隨著元素的內(nèi)容滾動。也就是說，背景圖從一開始就已經(jīng)被固定死在初始所在的位置。

我們使用，圖文混合排布的方式，實現(xiàn)滾動視差，HTML 結(jié)構(gòu)如下，.g-word 表示內(nèi)容結(jié)構(gòu)，.g-img 表示背景圖片結(jié)構(gòu)：

<section class="g-word">Header</section>
<section class="g-img">IMG1</section>
<section class="g-word">Content1</section>
<section class="g-img">IMG2</section>
<section class="g-word">Content2</section>
<section class="g-img">IMG3</section>
<section class="g-word">Footer</section>

關(guān)鍵 CSS：

section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}

效果如下：

CodePen Demo — https://codepen.io/Chokcoco/pen/JBaQoY（https://codepen.io/Chokcoco/pen/JBaQoY）

嗯？有點神奇，為什么會是這樣呢？可能很多人會和我一樣，第一次接觸這個屬性對這樣的效果感到懵逼。

我們把上面 background-attachment: fixed 注釋掉，或者改為 background-attachment: local，再看看效果：

CodePen Demo — bg-attachment:local（https://codepen.io/Chokcoco/pen/ZjMdJz）

這次，圖片正常跟隨滾動條滾動了，按常理，這種效果才符合我們大腦的思維。

而滾動視差效果，正是不按常理出牌的一個效果，重點來了：

當頁面滾動到圖片應該出現(xiàn)的位置，被設(shè)置了 background-attachment: fixed 的圖片并不會繼續(xù)跟隨頁面的滾動而跟隨上下移動，而是相對于視口固定死了。

好，我們再來試一下，如果把所有 .g-word 內(nèi)容區(qū)塊都去掉，只剩下全部設(shè)置了 background-attachment: fixed 的背景圖區(qū)塊，會是怎么樣呢？

HTML 代碼如下：

<section class="g-img">IMG1</section>
<section class="g-img">IMG2</section>
<section class="g-img">IMG3</section>
section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}

效果如下：

CodePen Demo（https://codepen.io/Chokcoco/pen/oMPrGZ）

結(jié)合這張 GIF，相信能對 background-attachment: fixed 有個更深刻的認識，移動的只有視口，而背景圖是一直固定死的。

綜上，就是 CSS 使用 background-attachment: fixed 實現(xiàn)滾動視差的一種方式，也是相對而言比較容易的一種。當然，background-attachment: fixed 本身的效果并不僅只是能有用來實現(xiàn)滾動視差效果，合理運用，還可以實現(xiàn)其他很多有趣的效果，這里簡單再列一個：

background-attachment: fixed 實現(xiàn)圖片點擊水紋效果

利用圖片相對視口固定，可以有很多有趣的效果，譬如下面這個，來源于這篇文章CSS Water Wave (水波效果)：

CodePen Demo — bg-attachment:fixed Wave（https://codepen.io/Chokcoco/pen/wxYZWO）

利用圖片相對視口固定的特性實現(xiàn)點擊的水紋效果。

上面這個效果有點瑕疵，圖片在放大容器變大的過程中發(fā)生了明顯的抖動。當然，效果還是可以的，background-attachment 還有很多有意思的效果可以挖掘。

使用 transform: translate3d 實現(xiàn)滾動視差

言歸正傳，下面介紹另外一種使用 CSS 實現(xiàn)的滾動視差效果，利用的是 CSS 3D。

原理就是：

我們給容器設(shè)置上 transform-style: preserve-3d 和 perspective: xpx，那么處于這個容器的子元素就將位于3D空間中，
再給子元素設(shè)置不同的 transform: translateZ()，這個時候，不同元素在 3D Z軸方向距離屏幕（我們的眼睛）的距離也就不一樣
滾動滾動條，由于子元素設(shè)置了不同的 transform: translateZ()，那么他們滾動的上下距離 translateY 相對屏幕（我們的眼睛），也是不一樣的，這就達到了滾動視差的效果。

關(guān)于 transform-style: preserve-3d 以及 perspective 本文不做過多篇幅展開，默認讀者都有所了解，還不是特別清楚的，可以先了解下 CSS 3D。

核心代碼表示就是：

<div class="g-container">
<div class="section-one">translateZ(-1)</div>
<div class="section-two">translateZ(-2)</div>
<div class="section-three">translateZ(-3)</div>
</div>
html {
height: 100%;
overflow: hidden;
}
body {
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.g-container {
height: 150%;
.section-one {
transform: translateZ(-1px);
}
.section-two {
transform: translateZ(-2px);
}
.section-three {
transform: translateZ(-3px);
}
}

總結(jié)就是父元素設(shè)置 transform-style: preserve-3d 和 perspective: 1px，子元素設(shè)置不同的 transform: translateZ，滾動滾動條，效果如下：

CodePen Demo — CSS 3D parallax（https://codepen.io/Chokcoco/pen/EpOeRm）

很明顯，當滾動滾動條時，不同子元素的位移程度從視覺上看是不一樣的，也就達到了所謂的滾動視差效果。

滾動視差文字陰影/虛影效果

那么，運用 translate3d 的視差效果，又能有一些什么好玩的效果呢？下面這個滾動視差文字陰影/虛影效果很有意思：

CodePen Demo — CSS translate3d Parallax（https://codepen.io/Chokcoco/pen/XBgBBp）

當然，通過調(diào)整參數(shù)（perspective: ?px 以及 transform: translateZ(-?px);），還能有其他很有意思的效果出現(xiàn)：

CodePen Demo — CSS translate3d Parallax 2（https://codepen.io/Chokcoco/pen/PBXwdX）

是不是很有電影開片的廠商 LOGO 的特效的感覺 joy 。

師父領(lǐng)進門，修行在個人，怎么制作更好更有意思的效果還是需要花時間鉆研和琢磨，這里我僅僅是拋磚引玉，希望能見到更多 Nice 的效果。

好了，本文到此結(jié)束，希望對你有幫助 :)

在線咨詢

上一篇：HTML-列表標簽(雙標簽) 208
下一篇：十天學會html+css第九天懸浮窗口固定定位 #網(wǎng)站

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

21.HTML 浮動、定位和顯示屬性

浮動（Float）

使用場景

注意事項

定位（Position）

使用場景

注意事項

顯示（Display）

使用場景

注意事項

示例

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

CSS樣式

結(jié)語

.HTML基本標簽

2.HTML/CSS基礎(chǔ)

您的項目需求