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