資訊專欄INFORMATION COLUMN
摘要：浮動定位的其中一種方法就是使用屬性。例如，是一個內聯(lián)元素，它默認的值為和值是不生效的。然而，如果我們將這個內聯(lián)元素設置為浮動，那么它的默認值會變成這時候和值就生效了。包裹元素就是將浮動元素置于父元素中，父元素作為容器會置于正常的文件流中。
CSS最大的用處之一就是可以將內容和元素定位到任何我們想要的位置，使我們的設計具有結構，使內容更加易懂。
CSS有好幾種不同的定位屬性，每種都有自己的使用場景。在這節(jié)課中我們會通過不同的案例——可復用的布局和針對單元素的布局——來介紹每種方法。
浮動定位的其中一種方法就是使用float屬性。float屬性非常好用，可以用在很多地方。
本質來說，float屬性是使元素脫離正常的流式布局，并將它放置在父元素的左側或右側。然后頁面中所有的元素都會環(huán)繞浮動元素布局。例如我們將段落間的一張圖片設置為浮動，那么這些段落都會圍繞圖片換行。
當我們將多個元素同時設置為浮動元素，那么這些元素將呈現(xiàn)相鄰或相對布局，如多列布局。
float有好幾個值，最常用的值是left和right。使元素浮動到父級元素的左側或右側。
img {
float: left;
}
浮動練習
我們先創(chuàng)建一個通用頁面，含有頁頭，頁腳，中間有兩列。最理想的情況就是在元素內創(chuàng)建第二節(jié)課"了解HTML"中提到的
... ...
和元素都是塊狀元素，它們默認上下布局。但我們實際上想要它們并排顯示。所以在此，我們就可以將元素設為左浮動，將元素設為右浮動，使它們呈現(xiàn)彼此相對的兩列。
CSS代碼如下：
section {
float: left;
}
aside {
float: right;
}
在此提一下，元素設為浮動后，會浮動到父級元素的邊緣。如果沒有父級元素，那么它會浮動到頁面的邊緣。
當我們設置一個元素為浮動，我們就將它從HTML文檔的正常流式布局中取出，這就導致元素的默認寬度取決于其內容的寬度。有時我們用可復用的布局創(chuàng)建多列的時候并不希望如此，那就可以為列設置一個固定寬度。另外，為了防止浮動元素緊靠在一起，使內容彼此緊貼，可以使用margin屬性來創(chuàng)建元素間的空隙。
如下所示：
section {
float: left;
margin: 0 1.5%;
width: 63%;
}
aside {
float: right;
margin: 0 1.5%;
width: 30%;
}
浮動會改變元素display的狀態(tài)
有一個重要的點需要記?。簩⒃卦O為浮動就是將它從正常的流式布局中脫離，而這會改變元素默認的display值。float屬性依賴于display屬性為block的元素。如果一個元素的默認display值不是block，那么它會將默認值改成block。
例如，span是一個內聯(lián)元素，它默認的display值為inline,width和height值是不生效的。然而，如果我們將這個內聯(lián)元素設置為浮動，那么它的默認display值會變成block,這時候width和height值就生效了。
當我們設置元素為浮動時，都需要注意display值的變化。
若只有兩列，我們可以將其中一個元素設置為左浮動，另一個元素設置為右浮動，但若是多列的時候就需要換一種方法。例如，我們希望在
... ... ... ...
要將三個元素并排顯示，我們不再用之前的左浮動加右浮動的模式，而是將三個元素都設置為左浮動。同時也要為元素設置寬度使其排列更合理。
section {
float: left;
margin: 0 1.5%;
width: 30%;
}
現(xiàn)在呈現(xiàn)在我們眼前的就是三列寬度和外邊距一致，都向左浮動的元素。
清除浮動float元素最初的設置是為了在內容中插入圖片，使內容自然地環(huán)繞圖片顯示。雖然它在圖片中使用非常完美，但是float屬性并不是為了定位和布局設計的，所以在這方面存在一些缺陷。
其中一個缺陷就是浮動元素的下一個兄弟元素和父元素的樣式可能會渲染異常。當元素浮動時它脫離了正常布局，導致圍繞在浮動元素周圍的元素的樣式都受到了影響。
最常見的就是margin和padding屬性值渲染異常，因為它們shi與浮動元素融為一體。當然，也有一些其它的樣式也受到了影響。
另一個缺陷是有時我們不想內容圍繞環(huán)繞浮動元素顯示。浮動元素會從文件流中脫離，其他元素會完全占有它周圍的空間，但很多時候我們并不希望這樣。
在上述兩個元素并排顯示的例子中， 我們將元素和元素設為浮動。在設置元素的width屬性之前，我們可以看到元素環(huán)繞兩個浮動元素顯示，占用所有可用空間。如此，元素就顯示在兩個浮動元素之間的凹槽中。如下所示：
為了避免這種情況，我們就需要將浮動元素包裹起來或者清除浮動，使它們回到正常文件流中。接下來，我們先著眼于如何清除浮動，再來介紹怎么包裹浮動元素。
清除浮動
清除浮動需要用到clear屬性，它最常用的屬性值是:left，right，both。
div {
clear: left;
}
屬性值left清除左浮動，right清除右浮動。both清除同時左浮動和右浮動，這也是我們最推薦使用的屬性值。
回到上例中，我們?yōu)?b>
footer {
clear: both;
}
包裹浮動元素
除了清除浮動，還可以包裹浮動元素。這兩種方式頁面呈現(xiàn)的效果是差不多的，但包裹元素的方式還有助于確保樣式都渲染正常。
包裹元素就是將浮動元素置于父元素中，父元素作為容器會置于正常的文件流中。我們?yōu)楦冈靥砑右粋€class屬性group，并為其設置CSS：
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
上述寫了很多代碼，但實際上就是為class值為group元素中的浮動元素清除浮動，使其回歸正常文件流。
再具體點，代碼中使用了在第四節(jié)中有提到過的:before和:after兩個偽類，它們在class為group的元素前后分別添加了一個動態(tài)元素。這些元素不包含任何內容，并以與塊狀元素block很相似的表格元素table的形式呈現(xiàn)。動態(tài)生成的元素:after清除了class為group的元素內的元素浮動。在.group中設置的清除浮動則清除了排版在它之上的兄弟元素的浮動。老版本的瀏覽器也可以很好的兼容。
clear:both多帶帶聲明會很合適。
回到示例，我們可以將和元素放置在一個父元素內，如下所示：
HTML
... ...
CSS
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
section {
float: left;
margin: 0 1.5%;
width: 63%;
}
aside {
float: right;
margin: 0 1.5%;
width: 30%;
}
這種包裹元素清除浮動的方式被稱為clearfix，我們可以很容易在其它網(wǎng)站中找到定義它的class名clearfix或cf。我們示例中使用了group，它代表一組元素，更好地表達了內容的意義。
設置浮動元素時我們要時刻注意它是否影響了頁面的布局，并確認是否已根據(jù)需要清除浮動。不清除浮動會導致很多頭疼的問題，尤其當頁面多行多列排版的時候。
練習接下來，我們打開“樣式討論會”網(wǎng)站來嘗試將一部分內容浮動。
在設置元素浮動之前，我們先在main.css中的grid樣式下添加清除浮動的樣式group，如下所示：
/*
========================================
Clearfix
========================================
*/
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
-現(xiàn)在我們要將
先為添加一個class屬性，值為logo，并在CSS中將其設置為左浮動：
HTML
Styles Conference
CSS
/*
========================================
Primary header
========================================
*/
.logo {
float: left;
}
這步完成之后，我們?yōu)閘ogo添加更多細節(jié)。先在單詞"Style"和"Conference"之間添加一個
元素，使兩個單詞分兩行顯示。
在CSS中我們?yōu)閘ogo添加上邊框和縱向的padding。
HTML
Styles
Conference
CSS
.logo {
border-top: 4px solid #648880;
padding: 40px 0 22px 0;
float: left;
}
由于我們將設置為浮動，那么就需要在最靠近它的父級元素
...
不過與
現(xiàn)在我們已在上添加了class屬性值primary-footer。我們可以以其為預選擇器選中元素并添加左浮動。如下所示：
/*
========================================
Primary footer
========================================
*/
.primary-footer small {
float: left;
}
上述代碼中我們選中的是class屬性值為primary-footer的元素內的元素，例子中對應的就是元素。
最后一步，我們?yōu)?b>
.primary-footer {
padding-bottom: 44px;
padding-top: 44px;
}
完成了
除了浮動，我們也可以通過display:inline-block來布局定位。它主要是幫助我們做頁面布局或同行元素間的的布局。
在此回顧一下，display:inline-block使元素同行顯示外，接受所有盒子模型的屬性，包括height，width，padding，border和margin。inline-block可以充分使用盒子模型的所有屬性，并且不需要清除浮動。
Inline-Block練習我們來看上述三列并排顯示的例子，HTML結構如下：
... ... ... ...
之前我們?yōu)?b>
section {
display: inline-block;
margin: 0 1.5%;
width: 30%;
}
此時，代碼并沒有很好的解決問題，最后一個元素掉到了下一行。行內塊元素是行內一個接著一個布局，但它們之間有一個空格。當我們將空格占用的空間和所有元素的width、margin相加，那么占用寬度會非常大，會將最后一個擠到下一行。為了讓所有顯示在同一行，我們就需要把這些空格移除。
移除inline-block元素之間的空格有好幾種方法可以移除掉空格，但有些方法會相對復雜一些。我們將介紹兩種最簡單的方法，都是應用在HTML中的。
第一中解決方案是將的開始標簽和前一個的結束標簽寫在同一行。一行內的代碼以開始標簽為結尾，如下所示：
... ... ... ...
用這種方法要確保HTML在書寫時元素之間時沒有空格，那么最終渲染時頁面也不會呈現(xiàn)出空格。
另一種方法是在元素之間添加注釋。結束標簽和開始標簽之間以注釋連接，注釋必須緊跟元素。這么寫可以允許HTML元素在書寫時換行，代碼如下：
... ... ... ...
這兩種方法沒有一種是非常完美的，但它們都很好用。我（作者）更傾向于添加注釋的方案，因為它更利于排版，但你完全可以根據(jù)你的喜好來選擇。
創(chuàng)建可復用的布局在構建網(wǎng)站時，編寫可復用的模塊是非常有益的，而可復用的布局就是可復用代碼中非常重要的一部分。布局可以使用float或者inline-block元素的方法實現(xiàn)，但那一種方法更好呢？
這是值得商榷。我(作者)的做法是使用inline-block元素實現(xiàn)頁面的網(wǎng)格或布局，而當我想讓某部分內容環(huán)繞某個元素顯示時會使用float（float本來是用于處理圖片的）。而且我也發(fā)現(xiàn)inline-block元素的布局方式更簡單，更易處理。
和前面說的一樣，你可以根據(jù)自己的需要選擇最合適的方案，如果你對其中一種方法更滿意，那你就可以選擇它。
目前，新的CSS規(guī)范提到了flex和grid-開頭的屬性——它們有助于實現(xiàn)頁面的最佳布局。要時常關注留意這些新的方法。
練習對可復用的布局有所了解之后，我們將其實施到我們的Styles Conference 網(wǎng)站。
我們將使用inline-block元素來實現(xiàn)一個一排三列的可復用布局。可以將其分為等寬的三列，或者分為兩列，一列占2/3寬，一列占1/3寬。
首先，我們使用class選擇器定義列寬width，在main.css文件中定義占1/3寬的選擇器col-1-3，占2/3寬的選擇器col-2-3。如下所示：
.col-1-3 {
width: 33.33%;
}
.col-2-3 {
width: 66.66%;
}
我們想使這些列都以inline-block元素的方式呈現(xiàn)，我們就需要確保它們垂直對齊為頂部對齊。
代碼如下所示，創(chuàng)建由兩個選擇器共享的樣式：
.col-1-3,
.col-2-3 {
display: inline-block;
vertical-align: top;
}
這段css代碼中，col-1-3，col-2-3之間用逗號,隔開。逗號表示第一個選擇器結尾，后面跟著第二個選擇器。第二個選擇器后跟隨大括號{標識樣式開始申明。用逗號隔開選擇器可以讓共用的樣式同時綁定到多個選擇器上。
接下來我們想在每列之間存設置空隙，使內容隔開。我們可以在選擇器中添加橫向的padding。
設置之后我們可以看到，當兩列元素挨著排列時，它們之間的空隙會是行開始和末尾空隙的兩倍，為了使空隙一致，我們使用一個元素將這些列包裹起來，并為它設置相同的padding屬性。
我們?yōu)檫@個包裹元素設置一個名為grid的class選擇器，將其添加到共用的padding定義中。代碼如下所示，選擇器之前同樣用逗號隔開：
.grid,
.col-1-3,
.col-2-3 {
padding-left: 15px;
padding-right: 15px;
}
當我們設置橫向padding后，我們需要小心。上節(jié)課中，我們創(chuàng)建了一個寬度為960px，class名為container的元素，并相對于頁面左右居中?，F(xiàn)在如果我們將grid元素嵌入container元素中，那么它們的橫向padding就會相加，我們的列與其他的部分呈現(xiàn)出的寬度會不一致。
我們不希望發(fā)生這樣的事，所以我們要讓container和grid選擇器共享一部分樣式。具體的來說，就是共享寬度width（確保我們的頁面固定在960px寬）和外邊距margin(使grid元素居中)，代碼如下所示：
.container,
.grid {
margin: 0 auto;
width: 960px;
}
.container {
padding-left: 30px;
padding-right: 30px;
}
現(xiàn)在每個class屬性包含有container或者grid的元素寬度都為960px，并相對于頁面居中。此外，我們也將container選擇器的橫向padding分離寫到了另一個樣式集中。
到目前為止，所有繁重的可復用網(wǎng)格布局的樣式已經寫完了。現(xiàn)在我們要將其添加到HTML中，看看它們呈現(xiàn)的結果。
我們從index.html主頁的三個宣傳欄開始，將它們設置為三列?，F(xiàn)在它們由一個class名為container的包裹。我們要將這個container替換為grid，如下所示：
...
隨后我們將class屬性col-1-3添加到每個gird元素內的元素上：
... ... ...
最后，因為我們的列都是inline-block元素，我們要確保我們移除了它們之間的間隙。我們用注釋來完成這一工作，并在每塊中添加一些模塊說明，以便更好的組織我們的代碼。
... ... ...
上述代碼中，我們在第3行的中添加了用以標識的注釋“Speakers”第7行我們在結束標簽后緊跟了注釋，在第9行添加了用以標識的注釋“Schedule”，并在11行開始標簽前閉合了注釋。相同的注釋結構貫穿第13行和第17行，標識內容替換為Venue?？偟膩碚f我們已經將所有的間隙都注釋掉了并為每一塊添加了標識。
現(xiàn)在我們有了可復用的三列網(wǎng)格，可以使用1/3寬的列和2/3寬的列。主頁中我們用它來布局了宣傳欄，最終結果如圖所示：
這是練習的源代碼。點擊下載
獨特的定位元素我們常常想要定位一個元素，但float和inline-block并不能滿足這種需求。浮動將元素從正常的文檔流中移除，經常出現(xiàn)我們不希望得到的環(huán)繞浮動元素顯示的布局。inline-block元素，除非我們創(chuàng)建多列，否則不易實現(xiàn)我們想要的定位。針對這些情況，我們可以使用position屬性來做位置偏移。
position屬性表示元素應該怎樣定位在頁面中，是否按正常文檔流顯示。這需要結合盒子的位移屬性——top，right，bottom和left——通過定義位移值設置不同方向的位p移來定位元素在什么位置顯示。
position屬性的默認值為static，他表示元素以正常文檔流呈現(xiàn)，并且不接受盒子位移屬性。static常常會被relative和absolute這兩個值復寫。這就是我們接下來要講的內容。
相對定位position:relative在允許元素以正常文檔流呈現(xiàn)，保留元素的空間不被其他元素占用外，也允許元素通過修改位移屬性來定位，如下所示：
HTML
.........
CSS
div {
height: 100px;
width: 100px;
}
.offset {
left: 20px;
position: relative;
top: 20px;
}
例子中第二個 使用相對定位有一個重要的點要知道：盒子位移屬性是根據(jù)元素本身的位置來進行位移的。所以設置left:20px就是將元素從左向右位移20px。top:20px就是元素至上向下位移20px。 當使用position對元素進位移時，該元素會與其他元素重疊，而不是將其他元素像使用了margin和padding一樣移到下面。 position:absolute為絕對定位，它與相對定位不同，絕對定位脫離了文檔流，而它原有的位置不會被保留。 另外，絕對定位的元素位移與離他最近的設置了相對定位的父級元素有關。如果沒有相對定位的父級元素，那么絕對定位會根據(jù)來定位（譯者：根據(jù)我的實踐，瀏覽器在絕對定位的元素沒有相對定位的父級元素時，并不是根據(jù)定位，而是通過視窗的位置定位，有興趣的讀者可以嘗試一下）。這里的信息量比較多，我們通過例子來看一下： CSS 在這個例子中，元素是不包含位移屬性的相對定位的元素，所以它沒有位移。div元素設置了包含position: absolute的class屬性offset。由于是離它最近的設置了相對定位的父級元素，所以div依賴元素的位置進行偏移 由于設置了right和top位移， 由于 通常情況下，大多數(shù)的定位都不需要通過定位和位移屬性來處理，但在某些情況下它們確實非常有用。 學習如何通過HTML和CSS來定位內容是掌握這兩門語言非常重要的一步。再加上盒子模型，我們正走在成為前端開發(fā)者的路上。 回顧一下，在這節(jié)課中我們所碰到的知識點： 什么是浮動，怎么通過浮動定位內容 怎么清除和包裹浮動元素。 怎么通過inline-block元素定位內容。 怎么移除inline-block元素間的間隙。 怎么使用相對定位和絕對定位定位內容。 我們每節(jié)課都在學習新的技能，所以讓我們繼續(xù)。接下來,排版! http://learn.shayhowe.com/htm... 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉載請注明本文地址：http://systransis.cn/yun/112632.html 摘要：浮動定位的其中一種方法就是使用屬性。例如，是一個內聯(lián)元素，它默認的值為和值是不生效的。然而，如果我們將這個內聯(lián)元素設置為浮動，那么它的默認值會變成這時候和值就生效了。包裹元素就是將浮動元素置于父元素中，父元素作為容器會置于正常的文件流中。
CSS最大的用處之一就是可以將內容和元素定位到任何我們想要的位置，使我們的設計具有結構，使內容更加易懂。
CSS有好幾種不同的定位屬性，每種都有自己... 摘要：前端日報精選現(xiàn)代瀏覽器性能優(yōu)化篇談談算法第一章學習筆記實現(xiàn)里為什么會有，我們做了一款極客時間中文第期浮點數(shù)陷阱及解法譯調度器入門掘金譯定位掘金布局說可能是最全的特性及其在實際應用中的表現(xiàn)掘金簡單的繼承眾成翻譯中的正則表達
2017-10-17 前端日報
精選
現(xiàn)代瀏覽器性能優(yōu)化-JS篇談談 HTTPS《算法》第一章學習筆記js實現(xiàn)JS 里為什么會有 thisHi，我們做了一款 極客時間... 摘要：前端日報精選在中的元素種類及性能優(yōu)化譯異步遞歸回調譯定位一個頁面阻塞問題的排查過程前端分享之的使用及單點登錄中文視頻如何用做好一個大型應用云際個實用技巧眾成翻譯年一定不要錯過的五本編程書籍年前端領域有哪些探索和實踐實現(xiàn)一個時光網(wǎng)掘金
2017-09-22 前端日報
精選
JavaScript 在 V8 中的元素種類及性能優(yōu)化【譯】異步遞歸：回調、Promise、Async[譯]HTML... 摘要：使用了值及其以下的所有列表項的數(shù)字標記將會按照值重新計數(shù)。嵌套列表的一個目的是便于識別列表的起始位置以及每個列表和列表項。嵌套列表完成后，閉合包裹的列表項并繼續(xù)在原列表項中操作。從正方形和十進制數(shù)一直到亞美尼亞編號都屬可用值范圍。
列表清單是我們日常生活的一部分。未辦事項清單確認我們接下來要做什么，行車導航提供路線列表，食譜提供成分列表和說明列表。幾乎所有的東西都有列表，這就很容易理解... 摘要：使用了值及其以下的所有列表項的數(shù)字標記將會按照值重新計數(shù)。嵌套列表的一個目的是便于識別列表的起始位置以及每個列表和列表項。嵌套列表完成后，閉合包裹的列表項并繼續(xù)在原列表項中操作。從正方形和十進制數(shù)一直到亞美尼亞編號都屬可用值范圍。
列表清單是我們日常生活的一部分。未辦事項清單確認我們接下來要做什么，行車導航提供路線列表，食譜提供成分列表和說明列表。幾乎所有的東西都有列表，這就很容易理解... 閱讀 3434·2021-11-12 10:36 閱讀 2754·2021-11-11 16:55 閱讀 2974·2021-09-27 13:36 閱讀 1625·2021-08-05 10:01 閱讀 3566·2019-08-30 15:55 閱讀 780·2019-08-30 13:01 閱讀 1917·2019-08-29 17:16 閱讀 2387·2019-08-29 16:40元素設置了class屬性為offset，offset選擇器設置了position:relative和兩個位移屬性left和top。這保留了元素原來的位置，不會被其他元素占用。另外位移屬性重新定位了元素的位置，使它向右偏移20px,向下偏移20px。
HTML...
section {
position: relative;
}
div {
position: absolute;
right: 20px;
top: 20px;
}
根據(jù)元素從右向左位移20px，從上向下位移20px。
元素是絕對定位，它不在頁面的正常文檔流中，會與它周圍的元素重疊。另外，
元素原來的位置也沒有被保留，其他元素可以占據(jù)這個位置。
相關文章
[譯]HTML&CSS Lesson5: 定位
2017-10-17 前端日報
2017-09-22 前端日報
[譯]HTML&CSS Lesson8: 列表
[譯]HTML&CSS Lesson8: 列表
發(fā)表評論
0條評論
_Dreams
男|高級講師
TA的文章
閱讀更多
最強函數(shù)學習之路
python綜合程序設計——做一個可視化大屏
爆肝1萬字《c++入門綜合》
HostYun：18元/月/1GB內存/10GB SSD空間/300GB流量/50Mbps-100M
【前端詞典】滾動穿透問題的解決方案
CSS魔法堂：重拾Border之——不僅僅是圓角
外邊距合并
瀏覽器內核之 CSS 解釋器和樣式布局
最新活動
