整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
【技術等級】初級
【承接文章】《CSS三個重要的定位屬性，使用頻率超高，定位屬性詳解》
上兩篇文件主要講解了定位屬性的使用，本篇文章小海老師帶領大家利用定位屬性制作一個輪播圖的前端界面。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。
本文以動手實踐為主，希望跟著學的同學們按照下面所講的步驟一步一步的操作一下。前端開發注重實踐操作，只要你按照小海老師所講的步驟操作，一定能夠掌握輪播圖界面的制作方式。如果能抽出時間多做幾次，熟能生巧，相信你會從中學習到在容器內部對元素進行定位的一類方法。
一、我們要做的輪播圖界面展示：
輪播圖案例界面展示
本案例旨在利用CSS的定位屬性制作輪播圖的界面，并不涉及輪播圖的各項行為。輪播圖的各項行為需要借助JavaScript腳本技術實現，在后續的內容中會逐步介紹。首先我們對這個案例進行一下簡單的分析。
通過上圖，我們可以總結出，整個案例需要一個總的容器，我們可以使用<div></div>實現，并為其設置一個名為lunbo的id屬性取值。即：
<div id=”lunbo”></div>
在這個容器內部，有下列對象：
一張圖片。（因為制作界面，所以展示只放置一張圖片即可）
左右兩側各有兩個箭頭圖標，用于鼠標單擊產生輪播效果。
下方有一個黑色透明的部分。
黑色透明的部分內部有5個數字組成的矩形，用于鼠標單擊時跳轉到指定的圖片。
二、輪播圖界面布局的原理：
通過分析，我們發現，大部分內容都在#lunbo的<div>容器中。那么，如何在容器內部對各個元素進行位置的確定呢？這就需要使用CSS技術中的定位屬性。
這里，有一個這類問題的處理方法，它的原理如下所示。
根據上述原理，我們很容易就能寫出容器的CSS代碼。
這里設圖片的尺寸為800px*400px，則容器的CSS代碼如下所示：
#lunbo{
width:800px; height:400px;
position:relative;
}
三、實現容器內部的HTML對象：
下面我們來實現容器內部的各個HTML對象。注意，本小節只實現各個HTML對象，不對各個對象進行CSS樣式設計。
1、一張圖片：
<img src=”images/01.jpg” />
2、左右兩側各有兩個箭頭圖標：
左側箭頭利用小于號顯示，小于號在HTML中使用 < 實現。放在一個容器中并設置class為small。
右側箭頭利用大于號顯示，大于號在HTML中使用 > 顯示。放在一個容器中并設置class為big。
<div><</div>
<div>></div>
3、下方有一個黑色透明的部分：
<div class="black"></div>
4、黑色透明的部分內部有5個數字組成的矩形：
五個數字分別用<span></span>標記對實現的，并安排在一個名為num的容器中，最后放在黑色透明容器內部。
<div class=”black”> <!--black容器開始-->
<div class="num"> <!--num容器開始-->
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div> <!--num容器結束-->
</div> <!--black容器結束-->
整體的HTML代碼如下所示。
輪播案例的HTML代碼
四、左右兩側箭頭圖標的樣式：
左右兩側的箭頭設置寬度為40px，高度為60px，背景顏色位白色，并設置一定的透明度。字體為Arial，字體大小為50px，水平方向和垂直方向均居中對齊。文字顏色為#666666，鼠標經過時顯示手型鼠標。
這些樣式兩個箭頭都具備，所以使用群組選擇器。
#lunbo .small,#lunbo .big{
width:40px; height:60px;
background-color:rgba(255,255,255,0.3);
font-family: Arial;
font-size: 50px;
text-align: center;
color:#666666;
cursor:pointer;
}
為了在容器#loubo中對這兩個箭頭定位，所以應該將這兩個箭頭設置為“絕對定位”，并分別設置位置屬性。
因為兩個箭頭的高度位置相同，所以top屬性取值一樣。通過測試，選擇top屬性為175px。
左側小于號箭頭設置left屬性為50px。
右側大于號箭頭設置right屬性為50px。
#lunbo .small,#lunbo .big{position:absolute;top:175px;}
#lunbo .small{left:50px;}
#lunbo .big{right:50px;}
除此之外，還需要為這兩個箭頭設置鼠標經過時的背景顏色變化。
#lunbo .small:hover,
#lunbo .big:hover{
background-color: rgba(255,255,255,0.6);
}
綜上所述，左右兩側箭頭圖標的CSS樣式代碼如下所示。
左右兩側箭頭圖標的CSS代碼
五、黑色透明的部分的樣式：
設置黑色透明的部分寬度為容器#lunbo的寬度，因此可以將寬度的取值設置為inherit，意思為寬度的大小繼承該元素容器的大小。高度設置為40px，背景顏色為黑色并帶有一定的透明度，利用定位將其設置在容器的底端。CSS代碼如下所示。
#lunbo .black{
width:inherit; height:40px;
background-color: rgba(0,0,0,0.7);
position:absolute;
left:0; bottom:0;
}
六、黑色透明部分內部的數字：
做為數字的直接容器num，只需要設置位置屬性，以保證這5個數字的位置在黑色透明部分的右側。
#lunbo .num{
position:absolute;
right:10px;
bottom:8px;
}
容器num內部的span標記對用于盛放每一個數字。因為<span>標記對作為內聯元素無法設置寬度和高度，所以將所有的<span>標記對變為內聯塊。設置它們的寬度為20px，高度為24px，背景顏色位為999999，水平垂直方向居中對齊，文字顏色為#ffffff，字號大小為14px，鼠標經過時變為手型鼠標。為了讓它們之間具有一定的距離，可以設置每一個<span>的右邊界為10px。
#lunbo .num span{
display:inline-block;
width:20px; height:24px;
background-color: #999999;
text-align: center;
line-height: 24px;
color:#ffffff;
font-size: 14px;
margin-right:10px;
cursor:pointer;
}
最后設置這些<span>標記對鼠標經過時背景顏色的變化。
#lunbo .num span:hover{
background-color: #ff5857;
}
綜上所述，黑色透明部分內部的數字的CSS樣式代碼如下所示。
黑色透明部分內部的數字的CSS代碼
七、結束：
最后請同學們將這些代碼整理到一起，看看能不能實現。
仔細的同學們肯定能夠發現，整個項目中，第一個數字的背景顏色和其它數字的背景顏色是不一樣的，這是為了說明此時是第一張圖片在顯示。這是如何實現的呢？
<span style="background-color:#ff5857">1</span>
大家想一想，這段代碼是不是就能夠實現了呢！
下一篇文章中，小海老師繼續帶大家實現跟定位有關的實例，一同看一看定位屬性都有哪些應用領域，對定位技術有疑問的學習者千萬不要錯過！
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
. 流式定位
這是網頁元素默認的定位方式，網頁元素按照其HTML標簽的先后順序，在網頁內依次顯示，就像液體一樣“流動”，所以稱為“流式定位”，這種方式將所有網頁元素的默認顯示方式分為以下幾種類型：
塊級元素（display: block）： 可以設置寬度，默認寬度為100%，但不管多寬都會獨占一行，多個塊級元素按從上到下的順序縱向顯示，默認顯示為塊級元素的包括：段落(p)、層(div)、表單(form)等。
內聯元素（display: inline）： 不會獨占一行，可以多個元素共享一行，按從左至右的順序橫向顯示，默認顯示為內聯元素的包括：文本標簽(label)、鏈接(a)等。
行內塊元素（display: inline-block）： 這種定位方式兼具塊級元素和內聯元素的優勢，既可以像塊級元素一樣設置寬度和高度，又可以一行放置多個，默認顯示為內聯元素的包括：圖片(img)、輸入項(input)、多行文本(textarea)等。
可以通過設置HTML元素的CSS樣式的display屬性來改變元素默認的流式定位方式，例如將層(div)元素設置為行內塊元素后，就可以跟文本標簽(label)、圖片(img)等元素放在同一行顯示，不再獨占一行。
流式定位存在一些問題，主要包括：
l 塊級元素很難被有效利用起來，因為其獨占一行的特性，不能一行顯示多個。
l 內聯元素無法設置寬度、高度和垂直方向邊距，不好精確控制元素大小和顯示位置。
l 內聯元素之間水平方向會因為代碼中的空格、換行等產生間隙，垂直方向存在默認的底部間隙，這給水平布局帶來額外的麻煩。
2. 浮動定位
浮動定位會讓元素脫離原來的標準文檔流浮動起來，直至它的外邊緣遇到父元素的內邊緣或者另一個兄弟浮動元素的外邊緣。
任何HTML元素都可以設置為浮動，可以通過設置HTML元素的CSS樣式的float屬性來設置具體的浮動方式，可以選擇向左浮動（float: left）或向右浮動（float: right）。
相對于網頁默認的流式定位，浮動定位有以下優勢：
l 多個塊級元素可以共享一行。
l 內聯元素可以設置寬度和高度。
l 元素之間的空格、換行不影響元素的顯示位置。
浮動定位最初被設計出來是為了實現文字環繞圖片顯示的效果，但由于其上述優勢，后來大家也用浮動定位來設置更多網頁元素的位置，代替默認的流式定位，也是TaskBuilder默認的組件定位方式。
不過，浮動定位也有一些問題，不是所有的場合都適合，大家根據需要選擇，這些問題包括：
l 居中對齊問題：浮動定位不太好實現垂直和水平居中對齊。
l 父元素的高度塌陷問題：如果元素不浮動，會自動撐開父元素的高度，浮動后，由于浮動元素已經脫離原來的標準流，如果父元素沒有設置高度，且父元素中沒有其他非浮動元素時，會造成父元素的高度塌陷（高度變成了0）。
3. 坐標定位
坐標定位是指為HTML元素設置上下左右的偏移量來確定其具體的顯示位置或大小，通過設置元素CSS的position屬性，可以選擇坐標定位的具體方式，包括：
相對定位（position: relative）：即相對于元素在流式定位時的正常位置進行定位，您可以通過 top、right、bottom、left 這 4 個CSS屬性來設置元素相對于正常位置的偏移量，在此過程中不會對其它元素造成影響。
相對定位示意圖
絕對定位（position: absolute）：即相對于第一個非靜態定位的父級元素進行定位，可以通過 top、right、bottom、left 這 4 個屬性來設置元素相對于父級元素位置的偏移量。如果沒有滿足條件的父級元素，則會相對于瀏覽器窗口來進行定位。元素使用絕對定位后，其他標準流元素會填補它的位置。絕對定位可以通過設置元素CSS樣式的left和top屬性來精確控制元素的顯示位置，再設置right或bottom這兩個CSS樣式，實現元素的寬度或高度根據父元素的寬度和高度動態設置和變化。
絕對定位示意圖
固定定位（position: fixed）：即相對于瀏覽器的窗口進行定位，可以使用 top、right、bottom、left 這 4 個CSS屬性來定義元素相對于瀏覽器窗口的位置。使用固定定位的元素無論如何滾動瀏覽器窗口，元素的位置都是固定不變的。
粘性定位（position: sticky）：它是相對定位和固定定位的結合體，能夠實現類似吸附的效果，當滾動頁面時它的效果與相對定位相同，當元素要滾動到屏幕之外時則會自動變成固定定位的效果。用粘性定位很容易實現元素置頂顯示的效果。
4. 表格定位
顧名思義，表格定位就是用表格來實現網頁內容的定位，先繪制一個多行多列的表格，并設定表格各列的寬度和各行的高度，然后在表格的單元格里插入相關網頁元素，最終實現這些元素的位置定位。
這種定位方式比較適合可以將頁面內容清晰明確地劃分為多行多列的場景，例如各種業務單據和數據報表等。
有兩種方式可以實現表格布局： HTML Table（<table>標簽）和CSS Table（display:table 等相關屬性）。HTML Table是早期網頁設計采用的表格定位方式，由于其渲染性能較低，且有些界面效果較難實現，用的人已經比較少了，現在推薦使用CSS Table，能實現一些HTML Table做不到的效果。
目前，TaskBuilder只是在報表設計器里集成了一個第三方的表格插件，在前端tfp頁面設計器里，還沒有提供表格定位相應的容器組件，未來會提供。（現有的可編輯表格和數據表格不是用來為其他組件提供定位的，所以不能算作是表格定位的容器組件）
5. 彈性定位
彈性定位又叫彈性布局，這種定位方式最大的特點就是可以讓子元素的大小可以根據父元素的大小自動擴張或收縮，從而可以做到自動適應不同終端的屏幕尺寸，或者在用戶改變瀏覽器窗口大小時自動伸縮。
這種定位方式需要先將一個父元素的CSS屬性display設置為flex，然后該元素里的子元素即可實現彈性定位。
采用彈性定位的容器元素可以設置以下CSS樣式：
元素排列方向（flex-direction）：用來設置子元素的排列方向，有四種方式可以選擇：從左到右顯示（row）、從右到左顯示（row-reverse）、從上到下顯示（column）、從下到上顯示（column-reverse）。
元素水平對齊方式（justify-content）：用來設置子元素在水平方向的對齊方式，可以選左對齊（flex-start）、右對齊（flex-end）、居中對齊（center）、兩端對齊（space-between）和等距對齊（space-around）。
元素垂直對齊方式（align-items）：用來設置子元素在垂直方向的對齊方式，可以選頂部對齊（flex-start）、底部對齊（flex-end）、居中對齊（center）、基線對齊（baseline）、自動伸展（stretch）。
內容整體對齊方式（align-content）：當有多行子元素時，可以用該屬性設置全部子元素整體的垂直對齊方式，包括自動拉伸（stretch）、在容器的頂部排列（flex-start）、在容器的底部排列（flex-end）、在容器內居中排列（center）、均勻分布，上下靠邊（space-between）、均勻分布，每行等距（space-around）。
元素是否自動換行（flex-wrap）：用來設置子元素是否自動換行。
彈性定位容器內的子元素可以設置以下CSS樣式：
擴展量（flex-grow）：必須參數，用來設置當前元素相對于其他元素的增長量，默認值為 0，即如果存在剩余空間，也不自動放大。
如果所有元素的擴展量都設置為1，將等分剩余空間。如果一個元素的擴展量設置為2，其他元素都為1，則前者占據的剩余空間將是其他項的2倍，如下圖所示：
收縮量（flex-shrink）：必須參數，用來設置當彈性容器空間不足時，該元素相對于其他元素的收縮量，默認值為 1。如果所有元素的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個元素的flex-shrink屬性為0，其他元素都為1，則空間不足時，前者不縮小。
基準長度（flex-basis）：必須參數，元素的基準長度定義了父容器在分配多余空間之前，當前元素占據的主軸空間（main size，如果是橫向排列，則指父容器在水平方向的空間，如果是縱向排列，則指父容器在垂直方向的空間）。瀏覽器根據這個屬性，計算主軸是否有多余空間。合法值為 auto（默認值，表示根據其他情況自動伸縮），或者以具體的值加 "%"、"px"等單位的形式，表示該元素將占據固定空間。
顯示順序（order）：屬性用來設置元素在容器中出現的順序，您可以通過具體的數值來定義元素在容器中的位置，默認值為 0。下圖所示的四個普通的面板組件，在彈性面板里從左至右的正常插入順序是panel1、panel2、panel3、panel4，但通過設置這四個面板的顯示順序，將panel1和panel4的顯示位置進行了調換。
對齊方式（align-self）：該屬性允許您為某個特定的元素設置不同于其它元素的對齊方式，該屬性可以覆蓋父容器組件（彈性面板）里的垂直對齊屬性的值。該屬性的可選頂部對齊（flex-start）、底部對齊（flex-end）、居中對齊（center）、基線對齊（baseline）、自動伸展（stretch）。
由于彈性定位的自動伸縮特性，且易于實現子元素的水平和垂直對齊，目前很多主流的前端UI框架都大量地采用了該定位方式。
今天好程序員web前端教程為大家分享web中CSS絕對定位的教程
絕對定位使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。
普通流中其它元素的布局就像絕對定位的元素不存在一樣：
#box_relative{
position:absolute;
left:30px;
top:20px;
}
如下圖所示：
絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。
對于定位的主要問題是要記住每種定位的意義。所以，現在讓我們復習一下學過的知識吧：相對定位是“相對于”元素在文檔中的初始位置，而絕對定位是“相對于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對于”最初的包含塊。
注釋：根據用戶代理的不同，最初的包含塊可能是畫布或HTML元素。
提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素?？梢酝ㄟ^設置z-index屬性來控制這些框的堆放次序。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
