當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

【前端系列教程之CSS3】04_CSS定位和浮动详解

發布時間：2023/12/14 HTML 50 豆豆

生活随笔收集整理的這篇文章主要介紹了【前端系列教程之CSS3】04_CSS定位和浮动详解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、CSS 定位(重點)

1.1 CSS 定位屬性

????????position 屬性指定了元素的定位類型。

????????position 屬性的五個值：

static 靜態定位,無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用。

relative 相對定位,對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。

fixed 固定定位,對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性定義。

absolute 絕對定位,對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。

sticky 粘性定位

????????元素具備了定位屬性之后，可以使用的頂部top，底部bottom，左側left和右側right屬性定位。(static除外)。他們也有不同的工作方式，這取決于定位方法。

屬性說明

position	指定元素的定位類型。
right	定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
top	定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
bottom	定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left	定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

什么是文檔流？

????????將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流。

????????只有三種情況會使得元素脫離文檔流，分別是：浮動、絕對定位和相對定位。

static 定位

????????static，無特殊定位，它是html元素默認的定位方式，即我們不設定元素的position屬性時默認的position值就是static，它遵循正常的文檔流對象，對象占用文檔空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。

div.static {position: static;border: 3px solid #73AD21; }

fixed 定位

????????fixed 元素的位置相對于瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動;

p.pos_fixed {position:fixed;top:30px;right:5px; }

????????注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

????????Fixed定位使元素的位置與文檔流無關，因此不占據空間。

????????Fixed定位的元素和其他元素重疊。

relative 定位

????????relative定位，又稱為相對定位，從字面上來解析，我們就可以看出該屬性的主要特性：相對。但是它相對的又是相對于什么地方而言的呢？這個是個重點，也是最讓我迷糊的一個地方，現在讓我們來做個測試，我想大家都會明白的：

(1) 初始未定位

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">#first {width: 200px;height: 100px;border: 1px solid red;}#second {width: 200px;height: 100px;border: 1px solid blue;}</style>? </head><body>?<div id="first"> first</div>?<div id="second">second</div>? </body></html>

????????初始原圖：

?(2) 我們修改first元素的position屬性：

偏移20px后：

????????-- 虛線是初始的位置空間

????????現在看明白了吧，相對定位相對的是它原本在文檔流中的位置而進行的偏移，而我們也知道relative定位也是遵循正常的文檔流，它沒有脫離文檔流，但是它的top/left/right/bottom屬性是生效的，可以說它是static到absoult的一個中間過渡屬性，最重要的是它還占有文檔空間，而且占據的文檔空間不會隨 top / right / left / bottom 等屬性的偏移而發生變動，也就是說它后面的元素是依據虛線位置( top / left / right / bottom 等屬性生效之前)進行的定位，這點一定要理解。

????????那好，我們知道了top / right / left / bottom 屬性是不會對relative定位的元素所占據的文檔空間產生偏移，那么margin / padding會讓該文檔空間產生偏移嗎？答案是肯定的，我們一起來做個試驗吧：

(3) 添加margin屬性：

設置margin：20px后：

?????????對比一下，是不是就很清晰了，我們先將first元素外邊距設為20px，那么second元素就得向下偏移40px，所以margin是占據文檔空間！同理，大家可以自己動手測下padding的效果吧！

absolute 定位

????????absoulte定位，也稱為絕對定位，雖然它的名字號曰“絕對”，但是它的功能卻更接近于"相對"一詞，為什么這么講呢？原來，使用absoult定位的元素脫離文檔流后，就只能根據祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的，舉個例子，a元素使用absoulte定位，它會從父類開始找起，尋找以position非static方式定位的祖先類元素(注意，一定要是直系祖先才算哦~），直到<html>標簽為止，這里還需要注意的是，relative和static方式在最外層時是以<body>標簽為定位原點的，而absoulte方式在無父級是position非static定位時是以<html>作為原點定位。<html>和<body>元素相差9px左右。

????????我們來看下效果：

添加absoulte屬性：

<html>? <style type="text/css">html {border: 1px dashed green;}body {border: 1px dashed purple;}#first {width: 200px;height: 100px;border: 1px solid red;position: relative;}#second {width: 200px;height: 100px;border: 1px solid blue;position: absolute;top: 0;left: 0;} </style>?<body>?<div id="first">relative</div>?<div id="second">absoult</div>? </body>?</html>?

效果圖：

????????哈哈，看了上面的代碼后，細心的朋友肯定要問了，為什么absoulte定位要加 top:0; left:0; 屬性，這不是多此一舉呢？

????????其實加上這兩個屬性是完全必要的，因為我們如果使用absoulte或fixed定位的話，必須指定 left、right、 top、 bottom 屬性中的至少一個，否則left/right/top/bottom屬性會使用它們的默認值 auto ，這將導致對象遵從正常的HTML布局規則，在前一個對象之后立即被呈遞，簡單講就是都變成relative，會占用文檔空間，這點非常重要，很多人使用absolute定位后發現沒有脫離文檔流就是這個原因，這里要特別注意~~~

????????少了left/right/top/bottom屬性不行，那如果我們多設了呢？例如，我們同時設置了top和bottom的屬性值，那元素又該往哪偏移好呢？記住下面的規則：

????????如果top和bottom一同存在的話，那么只有top生效。

????????如果left和right一同存在的話，那么只有left生效。

????????既然absoulte是根據祖先類中的position非static元素進行定位的，那么祖先類中的margin/padding會不會對position產生影響呢？看個例子先：

在absoulte定位中添加margin / padding屬性：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#first {width: 200px;height: 100px;border: 1px solid red;position: relative;margin: 40px;padding: 40px;}#second {width: 200px;height: 100px;border: 1px solid blue;position: absolute;top: 20px;left: 20px;}</style> </head><body><div id="first">first?<div id="second">second</div>?</div>? </body></html>

????????看懂了，祖先類的margin會讓子類的absoulte跟著偏移，而padding卻不會讓子類的absoulte發生偏移。總結一下，就是absoulte是根據祖先類的border進行的定位。

sticky 定位

????????sticky 英文字面意思是粘，粘貼，所以可以把它稱之為粘性定位。

????????position: sticky; 基于用戶的滾動位置來定位。

????????粘性定位的元素是依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。

????????它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。

????????元素定位表現為在跨越特定閾值前為相對定位，之后為固定定位。

????????這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。

????????注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下實例)。

粘性定位實例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sticky 定位</title> <style> div.sticky {position: -webkit-sticky;position: sticky;top: 0;padding: 5px;background-color: #cae8ca;border: 2px solid #4CAF50; } </style> </head><body><p>嘗試滾動頁面。</p><p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 屬性。</p><div class="sticky">我是粘性定位!</div><div style="padding-bottom:2000px"><p>滾動我</p><p>來回滾動我</p><p>滾動我</p><p>來回滾動我</p><p>滾動我</p><p>來回滾動我</p></div></body> </html>

絕對定位和相對定位的區別：

????????1、絕對定位不會占據原本的位置,相對定位會占據原來位置

????????2、絕對定位相對于父元素定位,相對定位是相對于原本的位置定位

1.2 CSS元素堆疊順序

????????元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素

????????z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面）

????????一個元素可以有正數或負數的堆疊順序：

屬性說明

z-index

設置元素的堆疊順序

????????擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

????????注釋：元素可擁有負的 z-index 屬性值。

????????z-index 僅能在定位元素上奏效(重點)

1.3 CSS溢出處理

????????CSS overflow 屬性用于控制內容溢出元素框時顯示的方式。

屬性說明

overflow	設置當元素的內容溢出其區域時發生的事情。
overflow-y	指定如何處理頂部/底部邊緣的內容溢出元素的內容區域
overflow-x	指定如何處理右邊/左邊邊緣的內容溢出元素的內容區域

????????如果元素中的內容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條等行為。

????????這三個樣式屬性有四個共同的值:

值描述

visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，并且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。

????????設置不同 overflow 屬性值：

div.ex1 {overflow: scroll; }div.ex2 {overflow: hidden; }div.ex3 {overflow: auto; }div.ex4 {overflow: visible; }

1.4 CSS裁剪

????????如果圖像大于包含它的元素，會發生什么？-clip屬性，讓你指定一個絕對定位的元素，該尺寸應該是可見的，該元素被剪裁成這種形狀并顯示。

????????注意：: 如果先有"overflow：visible"，clip屬性不起作用。

屬性值

值描述

shape	設置元素的形狀。唯一合法的形狀值是：rect (top, right, bottom, left)
auto	默認值。不應用任何剪裁。

裁剪一張圖像：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 200px;border: 1px solid black;/* overflow: hidden; */position: relative;}img{position: absolute;/* clip: rect(0,300px,200px,0); */clip: rect(75px,360px,275px,60px);left: -60px;top:-75px}</style> </head> <body><div><img src="images/paris.jpg" alt=""></div> </body> </html>

二、CSS浮動(重點)

2.1 CSS元素浮動

????????CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

????????Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。

元素怎樣浮動：

????????元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

????????一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

????????浮動元素之后的元素將圍繞它（主要指的是圖片）。

????????浮動元素之前的元素將不會受到影響。

????????如果圖像是右浮動，下面的文本流將環繞在它左邊：

img{float:right; }

浮動層：給元素的float屬性賦值后，就是脫離文檔流，進行左右浮動，緊貼著父元素(默認為body文本區域)的左右邊框。

而此浮動元素在文檔流空出的位置，由后續的(非浮動)元素填充上去：塊級元素直接填充上去，若跟浮動元素的范圍發生重疊，浮動元素覆蓋塊級元素。內聯元素：有空隙就插入。

彼此相鄰的浮動元素：

????????如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。

????????在這里，我們對圖片廊使用 float 屬性：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圖片浮動</title> <style> .thumbnail {float:left;width:110px;height:90px;margin:5px; } </style> </head><body> <h3>圖片庫</h3> <p>試著調整窗口,看看當圖片沒有足夠的空間會發生什么。</p> <img class="thumbnail" src="/images/klematis_small.jpg" > <img class="thumbnail" src="/images/klematis2_small.jpg"> <img class="thumbnail" src="/images/klematis3_small.jpg" > <img class="thumbnail" src="/images/klematis4_small.jpg" > <img class="thumbnail" src="/images/klematis_small.jpg"> <img class="thumbnail" src="/images/klematis2_small.jpg"> <img class="thumbnail" src="/images/klematis3_small.jpg"> <img class="thumbnail" src="/images/klematis4_small.jpg"> </body> </html>

float案例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮動布局案例</title> <style> * {box-sizing: border-box; } body {margin: 0; } .header {background-color: #2196F3;color: white;text-align: center;padding: 15px; } .footer {background-color: #444;color: white;padding: 15px; } .topmenu {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #777; } .topmenu li {float: left; } .topmenu li a {display: inline-block;color: white;text-align: center;padding: 16px;text-decoration: none; } .topmenu li a:hover {background-color: #222; } .topmenu li a.active {color: white;background-color: #4CAF50; } .column {float: left;padding: 15px; } .clearfix::after {content: "";clear: both;display: table; } .sidemenu {width: 25%; } .content {width: 75%; } .sidemenu ul {list-style-type: none;margin: 0;padding: 0; } .sidemenu li a {margin-bottom: 4px;display: block;padding: 8px;background-color: #eee;text-decoration: none;color: #666; } .sidemenu li a:hover {background-color: #555;color: white; } .sidemenu li a.active {background-color: #008CBA;color: white; } </style> </head> <body><ul class="topmenu"><li><a href="#home" class="active">主頁</a></li><li><a href="#news">新聞</a></li><li><a href="#contact">聯系我們</a></li><li><a href="#about">關于我們</a></li> </ul><div class="clearfix"><div class="column sidemenu"><ul><li><a href="#flight">The Flight</a></li><li><a href="#city" class="active">The City</a></li><li><a href="#island">The Island</a></li><li><a href="#food">The Food</a></li><li><a href="#people">The People</a></li><li><a href="#history">The History</a></li><li><a href="#oceans">The Oceans</a></li></ul></div><div class="column content"><div class="header"><h1>The City</h1></div><h1>Chania</h1><p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p><p>You will learn more about responsive web pages in a later chapter.</p></div> </div><div class="footer"><p>底部文本</p> </div></body> </html>

2.2 CSS清除浮動

????????clear屬性指定元素的左側或右側不允許浮動的元素。

????????“float是魔鬼，會影響其他相鄰元素；但是clear是小白，其只會影響自身，不會對其他相鄰元素造成影響！”

????????元素盒子的邊不能和前面的浮動元素相鄰，那么就是自己下移。

值描述

left	在左側不允許浮動元素。
right	在右側不允許浮動元素。
both	在左右兩側均不允許浮動元素。
none	默認值。允許浮動元素出現在兩側。

2.3 CSS清除浮動影響的方式

????????清除浮動是每一個 web前端設計師必須掌握的技能。

????????浮動會使當前標簽產生向上浮的效果，同時會影響到前后標簽、父級標簽的位置及 width height 屬性。而且同樣的代碼，在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。解決浮動引起的問題有多種方法，但有些方法在瀏覽器兼容性方面還有問題。

????????下面總結5種清除浮動的方法（測試已通過 ie chrome firefox opera，后面三種方法只做了解就可以了）：

給父級元素單獨定義高度（height）

????????原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。

????????優點：簡單、代碼少、容易掌握

????????缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題

????????建議：不推薦使用，只建議高度固定的布局時使用

在標簽結尾處(前)加空div標簽 clear:both

????????原理：添加一個空div，利用css提供的clear:both清除浮動，讓父級div能自動獲取到高度

????????優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題

????????缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好

????????建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法

父級div定義偽元素:after 和 zoom

????????原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE專有屬性)可解決ie6,ie7浮動問題

????????優點：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）

????????缺點：代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。

????????建議：推薦使用，建議定義公共類，以減少CSS代碼。

父級div定義 overflow:hidden

????????原理：使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度

????????優點：簡單、代碼少、瀏覽器支持好

????????缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。

????????建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。

父級div定義 overflow:auto

????????原理：使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度

????????優點：簡單、代碼少、瀏覽器支持好

????????缺點：內部寬高超過父級div時，會出現滾動條。

????????建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。

三、CSS對齊方式

3.1 元素居中對齊

????????要水平居中對齊一個元素(如 <div>), 可以使用 margin: auto;或margin:0 auto。

????????設置到元素的寬度將防止它溢出到容器的邊緣。

????????元素通過指定寬度，并將兩邊的空外邊距平均分配：

.center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; }

3.2 文本居中對齊

????????如果僅僅是為了文本在元素內居中對齊，可以使用 text-align: center;

.center {text-align: center;border: 3px solid green; }

3.3 左右對齊 - 使用定位方式

????????我們可以使用 position: absolute; 屬性來對齊元素:

.right {position: absolute;right: 0px;width: 300px;border: 3px solid #73AD21;padding: 10px; }

????????注釋：絕對定位元素會被從正常流中刪除，并且能夠交疊元素。

3.4 左右對齊 - 使用 float 方式

????????我們也可以使用 float 屬性來對齊元素:

.right {float: right;width: 300px;border: 3px solid #73AD21;padding: 10px; }

????????當像這樣對齊元素時，對 <body> 元素的外邊距和內邊距進行預定義是一個好主意。這樣可以避免在不同的瀏覽器中出現可見的差異。

3.5 文本垂直居中對齊 - 使用 padding

????????CSS 中有很多方式可以實現垂直居中對齊。一個簡單的方式就是頭部底部使用 padding:

.center {padding: 70px 0;border: 3px solid green; }

????????如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

3.6 文本垂直居中 - 使用 line-height

????????line-height和height保持一致即可；

.center {line-height: 200px;height: 200px;border: 3px solid green;text-align: center; } /* 如果文本有多行，添加以下代碼: */ .center p {line-height: 1.5;display: inline-block;vertical-align: middle; }

3.7 垂直居中 - 使用 position 和 transform

????????除了使用 padding 和 line-height 屬性外,我們還可以使用 transform 屬性來設置垂直居中:

四、CSS精靈截圖技術

4.1 什么是css sprites

????????css sprites直譯過來就是CSS精靈。通常被解釋為“CSS圖像拼合”或“CSS貼圖定位”。

????????其實就是通過將多個圖片融合到一張圖里面，然后通過CSS background背景定位技術技巧布局網頁背景。這樣做的好處也是顯而易見的，因為圖片多的話，會增加http的請求，無疑促使了網站性能的減低，特別是圖片特別多的網站，如果能用css sprites降低圖片數量，帶來的將是速度的提升。

????????css sprites是什么通俗解釋：

????????CSS Sprites其實就是把網頁中一些背景圖片整合拼合成一張圖片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片在布局盒子對象位置。

4.2 適用場合

1、適合：一般小圖標素材:

????????小的圖標ico類素材，一般圖標很小十多像素幾十像素的寬度高度，這種適合拼合成一張圖實現sprites background背景定位布局。多小ico太多自然加載網頁時瞬間會消耗些http iis鏈接數，但很快加載完又會釋放。

????????ICO是Windows的圖標文件格式，圖標文件可以存儲單個圖案、多尺寸、多色板的圖標文件。一個圖標實際上是多張不同格式的圖片的集合體，并且還包含了一定的透明區域。

2、不適合：大圖大背景:

????????大背景一般用于網頁背景，拼合時，設置為網頁背景時所有背景都會顯示出來。大圖拼接拼合會增大圖片大小，網絡帶寬不好的訪問者訪問時由于背景圖大文件大會加載稍慢些，所以大圖不推薦拼接拼合來使用css sprites背景定位布局。

3、sprites適合推薦小結:

????????一般此sprites拼合布局用于局部小盒子布局不適合大背景大布局背景使用。比如小局部布局小圖標背景、小導航背景等DIVCSS布局。

4.3 css sprites優勢與缺點劣勢

1、sprites優勢：

????????若干小圖標拼合成一張圖后布局，減少http請求數，對于大戰大流量網站來說隱形優勢很顯然的，從而隱形地提升了網站性能。對于大流量網站來說本來http請求數比較寶貴，使用DIV+CSS Sprites這樣可以大大的提高了頁面的性能，這是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因，同時也減少圖片文件數目。

2、sprites缺點

????????在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好只夠的空間，防止板塊內不會出現不必要的背景，如果留空間或拼合位置不合適，在布局時容易出現布局這個盒子對象時，設置背景出現拼合相鄰圖片，干擾圖片的情況;

????????CSS Sprites在開發的時候比較麻煩，你要通過photoshop(PS)或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣;

????????CSS Sprites在維護的時候比較麻煩，sprites是一般雙刃劍，如果頁面背景有少許改動，一般就要改這張合并的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，有只能（最好）往下加圖片，這樣圖片的字節就增加了，因為每次的圖片改動都得往這個圖片刪除或添加內容，顯得稍微繁瑣，而且重新算圖片的位置（尤其是這種上千px的圖）也是一件頗為不爽的事情。

????????由于圖片的位置需要固定為某個絕對數值，這就失去了諸如center之類的靈活性。

3、推薦小結

????????由于拼接圖片需要一定經驗技巧（做實踐即可快速掌握）、測量定位數值、修改不是那么靈活等原因，一般小網站站、小流量網站、一般企業網站不是很推薦使用CSS Sprites，因為使用CSS Sprites會比普通單個背景圖片布局要耗費時間和精力，所以不是很推薦小站。

????????但這個布局技巧也必須要學會掌握靈活布局才是目的。小站HTTP請求數豐富這點拼接其實也起不來什么優勢反而會浪費寶貴時間。相反大網站大流量網站推薦使用，這樣比較值得。

4.4 實例教程

素材與要實現效果截圖(拼合ico圖標素材實現列表不同圖標效果截圖)

sprites實例教程解釋介紹

????????首先這些圖標素材是放在同一張圖片上（PS拼合），然后實現成列表類布局，列表每個前圖標不同。使用div css sprites實現此布局（其實使用background樣式實現）。

????????首先此列表布局我們使用ul li列表布局，每個li站一行排版，對ul設置padding實現四周內容與邊框一定間距效果，因為每個li前面圖標不同，但此背景圖片是拼合在一張圖片上，所以這里做li里開始使用span標簽實現這個不同圖標效果，每個圖標不同為了區別span所以對span設置不同class，不同class對應設置定位相應的圖標。

實例教程

sprites案例圖片素材:

?實例代碼：

<!DOCTYPE html> <html> <head><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,minimal-ui, user-scalable=no"/><style>.sprites div {margin: 5px;}.sprites span {float: left;width: 20px;height: 20px;background-image: url(sprite.png);background-size: 60px 40px;}.sprites1{background-position: 0 0;}.sprites2{background-position: -20px 0;}.sprites3{background-position: 0 -20px;}.sprites4{background-position: -20px -20px;}.sprites5{background-position: -40px 0;}.sprites6{background-position: -40px -20px;}</style> </head> <body> <div class="sprites"><div><span class="sprites1"></span>付款圖標</div><div><span class="sprites2"></span>刪除圖標</div><div><span class="sprites3"></span>存款圖標</div><div><span class="sprites4"></span>粘貼圖標</div><div><span class="sprites5"></span>笑臉圖標</div><div><span class="sprites6"></span>編輯圖標</div> </div> </body> </html>

sprites實例效果：

????????說明：背景background-position有兩個數值，前一個代表靠左距離值（可為正可為負），第二個數值代表靠上距離值（可為正可為負）。當為正數時，代表背景圖片作為對象盒子背景圖片時靠左和靠上多少距離多少開始顯示背景圖片；當為負數時代表背景圖片作為盒子對象背景圖片，將背景圖片拖動超出盒子對象左邊多遠，拖動超出盒子對象上邊多遠開始顯示此背景圖片。

總結

以上是生活随笔為你收集整理的【前端系列教程之CSS3】04_CSS定位和浮动详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

HTML

【前端系列教程之CSS3】04_CSS定位和浮动详解

一、CSS 定位(重點)

1.1 CSS 定位屬性

static 定位

fixed 定位

relative 定位

absolute 定位

sticky 定位

1.2 CSS元素堆疊順序

1.3 CSS溢出處理

1.4 CSS裁剪

二、CSS浮動(重點)

2.1 CSS元素浮動

2.2 CSS清除浮動

2.3 CSS清除浮動影響的方式

給父級元素單獨定義高度（height）

在標簽結尾處(前)加空div標簽 clear:both

父級div定義 偽元素:after 和 zoom

父級div定義 overflow:hidden

父級div定義 overflow:auto

三、CSS對齊方式

3.1 元素居中對齊

3.2 文本居中對齊

3.3 左右對齊 - 使用定位方式

3.4 左右對齊 - 使用 float 方式

3.5 文本垂直居中對齊 - 使用 padding

3.6 文本垂直居中 - 使用 line-height

3.7 垂直居中 - 使用 position 和 transform

四、CSS精靈截圖技術

4.1 什么是css sprites

4.2 適用場合

4.3 css sprites優勢與缺點劣勢

4.4 實例教程

素材與要實現效果截圖(拼合ico圖標素材實現列表不同圖標效果截圖)

sprites實例教程解釋介紹

實例教程

總結

父級div定義偽元素:after 和 zoom