摘要:生成相對定位的元素,相對于元素本身正常位置進(jìn)行定位。元素的位置通過以及屬性進(jìn)行規(guī)定。因?yàn)榻^對定位與文檔流無關(guān),所以絕對定位的元素可以覆蓋頁面上的其他元素,可以通過屬性控制疊放順序,越高,元素位置越靠上。
頁面布局,或者是在頁面上做些小效果的時(shí)候經(jīng)常會用到 display,position和float 屬性,如果對它們不是很了解的話,很容易出現(xiàn)一些莫名其妙的效果,痛定思痛讀了《CSS Mastery》后總結(jié)一下。
讓我們從基礎(chǔ)的CSS知識談起,相信很多初學(xué)者和小弟一樣不明白CSS原理,一味追求效果,結(jié)果頁面漏洞百出,錯(cuò)誤匪夷所思,關(guān)于盒模型我就不多說了,網(wǎng)上很多,注意一下IE和其他瀏覽器(W3C規(guī)范)的區(qū)別就好了。
?
塊級元素與行內(nèi)元素
首先談?wù)勅藗兘?jīng)常提及的塊級元素和行內(nèi)(內(nèi)聯(lián))元素
p, ul, form, div等元素被稱為塊級元素,這些元素顯示為一塊兒內(nèi)容(會自動換行),span, input 等元素稱為行內(nèi)元素,這兩者主要區(qū)別就是塊級元素會從上到下一個(gè)個(gè)垂直排列,每個(gè)自占一行,如下即使兩個(gè)div之間沒任何元素,綠色的div仍然會顯示在hongsediv下方,而不是右方
?
</>復(fù)制代碼
?
?
?
而行內(nèi)元素在一行中水平排列,行內(nèi)元素的高度由其內(nèi)容撐開,不可顯示的設(shè)置其高度,這就是為什么我們一次次的在span上設(shè)置height屬性不好使的原因。
簡單了解了這些知識,讓我們看看display常用的幾個(gè)屬性,一些不太常用的我也不明白,就不說了
?
值 | 描述 |
none |
此元素不會被顯示。 |
block |
此元素將顯示為塊級元素,此元素前后會帶有換行符。 |
inline |
此元素會被顯示為內(nèi)聯(lián)元素,元素前后沒有換行符。 |
inline-block |
行內(nèi)塊元素。(CSS2.1 新增的值) |
我們在顯示隱藏元素的時(shí)候經(jīng)常會用到把display設(shè)為none或者’’,設(shè)為none效果很明顯,就是讓元素脫離文檔流,不顯示,不占文檔空間,而設(shè)為’’其實(shí)就是設(shè)置為元素默認(rèn)屬性block或inline,inline-block屬性是CSS2.1新加值,IE8以上及其他主流瀏覽器都已經(jīng)支持,它可以使元素像行內(nèi)元素那樣水平一次排列,但是框的內(nèi)容符合塊級元素行為,能夠顯示設(shè)置寬,高,內(nèi)外邊距。很有意思。
還有一點(diǎn)兒很有意思,可以通過不同的賦值改變元素生成框的類型,也就是說,通過將display屬性設(shè)置為block,可以使行內(nèi)元素表現(xiàn)的想塊級元素一樣,反之亦然。
定位
要想了解CSS元素定位就需要了解position屬性了,position屬性有幾個(gè)常用值如下
值 | 屬性 |
inhert |
規(guī)定應(yīng)該從父元素繼承 position 屬性的值。 |
static |
默認(rèn)值。沒有定位,元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。 |
relative |
生成相對定位的元素,相對于元素本身正常位置進(jìn)行定位。因此,"left:20" 會向元素的 LEFT 位置添加 20 像素。 |
absolute |
生成絕對定位的元素,相對于 static 定位以外的第一個(gè)祖先元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。 |
fixed |
生成絕對定位的元素,相對于瀏覽器窗口進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。 |
?
CSS有三種基本的定位機(jī)制:普通流,浮動和絕對定位
普通流是默認(rèn)定位方式,在普通流中元素框的位置由元素在html中的位置決定,元素position屬性為static或繼承來的static時(shí)就會按照普通流定位,這也是我們最常見的方式。
相對定位比較簡單,對應(yīng)position屬性的relative值,如果對一個(gè)元素進(jìn)行相對定位,它將出現(xiàn)在他所在的位置上,然后可以通過設(shè)置垂直或水平位置,讓這個(gè)元素相對于它自己移動,在使用相對定位時(shí),無論元素是否移動,元素在文檔流中占據(jù)原來空間,只是表現(xiàn)會改變。
</>復(fù)制代碼
普通流:
</>復(fù)制代碼
</>復(fù)制代碼
</>復(fù)制代碼
?
?
?
?
</>復(fù)制代碼
相對定位:
</>復(fù)制代碼
</>復(fù)制代碼
</>復(fù)制代碼
上面例子可以看出,對綠色div進(jìn)行相對定位,分別右移,下移20px后第二個(gè)紅色div位置并沒有相應(yīng)變化,而是在原位置,綠色div遮擋住了部分紅色div。
?
相對定位可以看作特殊的普通流定位,元素位置是相對于他在普通流中位置發(fā)生變化,而絕對定位使元素的位置與文檔流無關(guān),也不占據(jù)文檔流空間,普通流中的元素布局就像絕對定位元素不存在一樣。
絕對定位的元素的位置是相對于距離他最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素,那么他的位置就相對于初始包含塊兒(body或html神馬的)元素。
因?yàn)榻^對定位與文檔流無關(guān),所以絕對定位的元素可以覆蓋頁面上的其他元素,可以通過z-index屬性控制疊放順序,z-index越高,元素位置越靠上。
還是剛才的例子,稍微改動一下,讓綠色div絕對定位,為了清晰顯示,第二個(gè)紅色div改為黃色。
</>復(fù)制代碼
</>復(fù)制代碼
這時(shí)可以看出,綠色div是相對于父元素,也就是綠框div進(jìn)行的移位,而紅色和黃色div進(jìn)行布局時(shí)就像綠色div不存在一樣。
?
最后要說的就是fixed屬性了,應(yīng)用fixed也叫固定定位,固定定位是絕對定位的中,固定定位的元素也不包含在普通文檔流中,差異是苦丁元素的包含塊兒是視口(viewport),經(jīng)常見一些頁面的如人人網(wǎng)看在線好友那個(gè)模塊總在窗口右下角,估計(jì)用的是類似技術(shù)
</>復(fù)制代碼
固定定位:
</>復(fù)制代碼
</>復(fù)制代碼
</>復(fù)制代碼
?
?
?
可見hongse和黃色div布局沒有受到綠色div影響,而無論是頁面縱向滾動條在頁面頂端還是底端,綠色div總是在視口左下角
浮動
首先介紹一些浮動模型的基本知識:浮動模型也是一種可視化格式模型,浮動的框可以左右移動(根據(jù)float屬性值而定),直到它的外邊緣碰到包含框或者另一個(gè)浮動元素的框的邊緣。浮動元素不在文檔的普通流中,文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣.《CSS Mastery》里作者畫了幾個(gè)圖非常有意思,可以幫助我們理解浮動的表現(xiàn),我簡單的畫幾個(gè)。
</>復(fù)制代碼
不浮動
</>復(fù)制代碼
?
?
</>復(fù)制代碼
//紅向右浮動
</>復(fù)制代碼
?
?
</>復(fù)制代碼
//紅框左移,覆蓋綠框
</>復(fù)制代碼
?
?
</>復(fù)制代碼
//都向左浮動,父元素寬度為0
</>復(fù)制代碼
?
?
如果包含塊兒太窄無法容納水平排列的三個(gè)浮動元素,那么其它浮動塊兒向下移動,,直到有足夠的扣減,如果浮動元素的高度不同,那么下下移動的時(shí)候可能被卡住
</>復(fù)制代碼
沒有足夠水平空間
</>復(fù)制代碼
?
?
</>復(fù)制代碼
卡住了
</>復(fù)制代碼
?
?
行框和清理
前面指出浮動會讓元素脫離文檔流,不影響不浮動元素.實(shí)際上并不完全如此,如果浮動的元素后面有一個(gè)文檔流中元素,那么這個(gè)元素的框會表現(xiàn)的像浮動元素不存在,但是框的文本內(nèi)容會受到浮動元素的影響,會移動以留出空間.用術(shù)語說就是浮動元素旁邊的行框被縮短,從而給浮動元素流出空間,因而行框圍繞浮動框。
</>復(fù)制代碼
不浮動
11111111111
11111111111
</>復(fù)制代碼
?
?
</>復(fù)制代碼
浮動
11111111111
11111111111
</>復(fù)制代碼
?
可以看出浮動后雖然綠色div布局不受浮動影響,正常布局,但是文字部分卻被擠到了紅色浮動div下邊。要想阻止行框圍繞在浮動元素外邊,可以使用clear屬性,屬性的left,right,both,none表示框的哪些邊不挨著浮動框。
?
</>復(fù)制代碼
11111111111
11111111111
</>復(fù)制代碼
?
對元素清理實(shí)際上為前面的浮動元素留出了垂直空間,這樣可以解決我們之前的一個(gè)問題,看前面的圖片的時(shí)候我們發(fā)現(xiàn)div內(nèi)的所有元素浮動的話就會不占據(jù)文檔空間,這樣父元素,高度為0,可能很多效果也不見了
?
</>復(fù)制代碼
//都向左浮動,父元素寬度為0
</>復(fù)制代碼
如果我們想讓父元素在視覺上包圍浮動元素可以向下面這樣處理
?
?
</>復(fù)制代碼
在最后添加一個(gè)空div,對它清理
</>復(fù)制代碼
</>復(fù)制代碼
?
當(dāng)然這樣做有很多缺點(diǎn),有些javascript也可以做出類似效果,這里不細(xì)說,值得注意的是應(yīng)用值為hidden或auto的overflow屬性會有一個(gè)副作用:自動清理包含的任何浮動元素,所以說當(dāng)頁面出現(xiàn)相關(guān)問題時(shí),可以看看是不是這個(gè)屬性搞的鬼。
?
這樣,有了這些基本知識后,我們應(yīng)用CSS的時(shí)候就可以解決很多以前很百思不得其解的問題了。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/2274.html
摘要:前言說起隱藏元素我想每一個(gè)前端都能說起幾種,但能說全的我想就不是很多了。因此,元素依然存在原來的位置,占據(jù)空間也可響應(yīng)事件。占據(jù)空間,無法點(diǎn)擊如同屬性,被隱藏的元素依然會對我們的網(wǎng)頁布局起作用。 前言 ????說起隱藏元素我想每一個(gè)前端er都能說起幾種,但能說全的我想就不是很多了。博主總結(jié)了幾種隱藏元素的方法,總結(jié)如下表格: ? overflow opacity visibilit...
摘要:浮動框旁邊的行框被縮短,從而給浮動框留出空間,行框圍繞浮動框。不浮動的浮動的三浮動之于塊浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個(gè)浮動框的邊框?yàn)橹埂? 一、前言 ? 浮動元素以脫離標(biāo)準(zhǔn)流的方式來實(shí)現(xiàn)元素的向左或向右浮動,并且浮動元素還是在原來的行上進(jìn)行浮動的。float浮動屬性的四個(gè)參數(shù):left:元素向左浮動;right:元素向右浮動;none:默認(rèn)值,元素不浮動;i...
摘要:布局涉及到的屬性常用屬性值此元素不會被顯示它和屬性不一樣。當(dāng)所有父元素中的所有元素脫離文檔流之后,父元素將失去原有默認(rèn)的內(nèi)容高度浮動塌陷配合使用屬性規(guī)定元素的哪一側(cè)不允許其他浮動元素。 @(CSS技巧)[CSS, 布局] 深入學(xué)習(xí)CSS布局系列(一)布局常用屬性 一直感覺自己對CSS的各個(gè)屬性很了解,可是在前幾天一次面試后發(fā)現(xiàn)自己真的很多地方感覺自己知道,可是實(shí)際上自己并不是真的理解了...
摘要:的一些名詞和概念用來幫你更明確地去描述世界的事物。具體信息可以參考盒模型的解釋,這里暫且不作展開。的位置和大小時(shí)根據(jù)一個(gè)稱為的邊界進(jìn)行計(jì)算的。其它情況,依據(jù)設(shè)定的值進(jìn)行處理指定值最終表現(xiàn)值與指定值相同 CSS的一些名詞和概念 用來幫你更明確地去描述HTML/CSS世界的事物。 box 在CSS中,一個(gè)元素就可以看作一個(gè)box。具體信息可以參考盒模型的解釋,這里暫且不作展開。 conta...
摘要:浮動定位的其中一種方法就是使用屬性。例如,是一個(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有好幾種不同的定位屬性,每種都有自己...
閱讀 3075·2021-10-27 14:16
閱讀 2882·2021-09-24 10:33
閱讀 2291·2021-09-23 11:21
閱讀 3234·2021-09-22 15:14
閱讀 821·2019-08-30 15:55
閱讀 1683·2019-08-30 15:53
閱讀 1750·2019-08-29 11:14
閱讀 2194·2019-08-28 18:11