欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS的position屬性完全解析

  發(fā)布時間：2015-11-06 11:52:04   作者：佚名   我要評論
這篇文章主要介紹了CSS的position屬性的完全解析,包括position和overflow在一些相似使用方面的對比,需要的朋友可以參考下

一、定位基本原理

對于前端開發(fā)工程師來說，編寫CSS是前端開發(fā)工作中必不可少的一個內(nèi)容，在CSS中的position屬性又是非常重要的一個方面。顧名思義，所謂position，即是對HTML元素定位方式的一種設(shè)置。它是CSS定位技術(shù)的基石，看似很容易學(xué)習(xí)，很多的前端工程師也會說自己掌握得很好，但事實上是這樣嗎？作為一個在前端開發(fā)的道路上慢慢前行的新人，我不敢這么說，那么就通過這篇文章與大家一起，了解position的奧秘。

首先，既然是CSS中的屬性之一，那么我們就有必要研究一下W3C的CSS文檔，畢竟這才是對此屬性說明最為詳細的地方。在這里要插一句，目前市面上充斥著大量的教學(xué)書籍，網(wǎng)絡(luò)上也有很多相關(guān)的學(xué)習(xí)資源，其中固然不乏精品，但是會花點時間，認真閱讀官方文檔的又有多少人呢，有的時候，最乏味的往往是最準(zhǔn)確的。

好了，話不多說，官方文檔中關(guān)于position屬性的內(nèi)容大致是這樣的：

In CSS 2.1, a box may be laid out according to three positioning schemes:

1、Normal flow

2、Floats

3、Absolute positioning

1. 常規(guī)文檔流。包括塊級元素排版，行內(nèi)元素排版以及對塊級元素和行內(nèi)元素相對位置的排版。

2. 浮動。在浮動模型中，元素先按照正常文檔流定位，然后從文檔流中移出，根據(jù)設(shè)置向左或者向右盡可能地移動。

3. 絕對定位。元素會完全從文檔流中移出，再根據(jù)父元素進行定位。

一個元素如果是根元素，或者有浮動或絕對定位的話，那它就是在常規(guī)文檔流之外的，其他情況都是在文檔流之內(nèi)。文檔中有這么一句：The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A. 有些繞，以我并不深厚的英語能力來翻譯的話，應(yīng)該是：元素A的flow是由元素A本身以及所有最近的文檔流之外的父元素是A的流內(nèi)元素所組成的。（翻譯得太慘不忍睹了，求大神指點o(>﹏<)o）。

二、position屬性詳解

在CSS 2.1中，元素的定位方式是由position和display屬性共同作用所決定的，我們先來看position屬性

position屬性的可取值：static | relative | absolute | fixed | inherit

默認值：static

每個值的意義：

static: 常規(guī)方式定位box，此時設(shè)置top, right, bottom, left屬性是無效的。

relative: 元素本身的的位置的定位方式和static是一樣的，但是實際位置會相對于原位置有所偏移，是通過top, right, bottom, left的設(shè)置實現(xiàn)的。注意：display設(shè)置為table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell和table-caption的元素是無法應(yīng)用position: relative的，這也很好理解，這些表格類元素如果會相對于正常位置偏移的話不是很奇怪么！

absolute: 元素脫離文檔流，“幾乎”獨立了。位置通過top, right, bottom, left來設(shè)置，當(dāng)然，參照基點是包含元素的父元素~絕對定位的元素對相鄰元素的定位沒有任何影響，相互之間的層疊關(guān)系是通過z-index來設(shè)置的，同時，絕對定位元素的margin之間也不會發(fā)生折疊。

fixed: 這是個比較有趣的值。它的定位計算方式和絕對定位是一樣的，但是也有不同。元素的位置一旦確定了，在屏幕顯示器上，它會保持固定不動，在印刷媒體類型上，它會在每頁出現(xiàn)在固定位置，在其他的媒體類型上，表現(xiàn)方式則沒有定義。不過，如果希望一個box在屏幕和印刷媒體上的表現(xiàn)不同的話，可以使用@media rule的方式，例如：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @media screen {   
  2.     h1#first { position: fixed; }   
  3. }   
  4. @media print {   
  5.     h1#first { position: static; }   
  6. }  

還有一個inherit值，不用多說，就是從父元素繼承position值了。

三、定位方式：top, right, bottom, left

這四個屬性其實可以放在一塊兒說，其實是差不多的，只是定位的相對基線變了而已。文檔上的說明有些啰嗦了，不過that's what official document is對吧？

可設(shè)定的值為：length, percentage, auto, inherit

不論設(shè)定的值為什么，意義都是元素的上右下左距離父元素的上右下左的邊距。

這里要提一下auto值，對于非替換元素(non-replaced elements)和替換元素(replaced elements)auto的表現(xiàn)是不一樣的，非替換元素指的是瀏覽器根據(jù)標(biāo)簽的元素和屬性來判斷具體顯示的內(nèi)容，如：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <input type="text" />  

這是一個文本輸入框，換成其他的屬性的話，瀏覽器的顯示就會不一樣。

替換元素的例子：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <p>I'm classicemi</p>  

(X)HTML的大多數(shù)元素都是非替換元素，他們將內(nèi)容直接告訴瀏覽器，瀏覽器再顯示出來。

下面回到auto上來，對于非替換元素，auto值的效果取決于哪些相關(guān)的屬性同樣具有auto值，比較難理解是嗎，好的，我們給出下面的例子：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2.  <html>   
  3.    <head>   
  4.      <title>A frame document with CSS 2.1</title>   
  5.      <style type="text/css" media="screen">   
  6.        body { height: 8.5in }   
  7.        #header {   
  8.          position: fixed;   
  9.          width: 100%;   
  10.          height: 15%;   
  11.          top: 0;   
  12.          rightright: 0;   
  13.          bottombottom: auto;   
  14.          left: 0;   
  15.        }   
  16.        #sidebar {   
  17.          position: fixed;   
  18.          width: 10em;   
  19.          height: auto;   
  20.          top: 15%;   
  21.          rightright: auto;   
  22.          bottombottom: 100px;   
  23.          left: 0;   
  24.        }   
  25.        #main {   
  26.          position: fixed;   
  27.          width: auto;   
  28.          height: auto;   
  29.          top: 15%;   
  30.          rightright: 0;   
  31.          bottombottom: 100px;   
  32.          left: 10em;   
  33.        }   
  34.        #footer {   
  35.          position: fixed;   
  36.          width: 100%;   
  37.          height: 100px;   
  38.          top: auto;   
  39.          rightright: 0;   
  40.          bottombottom: 0;   
  41.          left: 0;   
  42.        }   
  43.      </style>   
  44.    </head>   
  45.    <body>   
  46.      <div id="header"> ...  </div>   
  47.      <div id="sidebar"> ...  </div>   
  48.      <div id="main"> ...  </div>   
  49.      <div id="footer"> ...  </div>   
  50.    </body>   
  51.  </html>  

在瀏覽器中顯示的布局大致是：
2015116115245285.png (221×253)

代碼中，使用了auto的屬性有: #header bottom, #sidebar right, #footer top. 而對于#main呢，它的height和width都是auto，也就是說main的長寬是自適應(yīng)的，自動填充可用空間，這也就好理解了，所謂的auto，也就是使元素的上右下左距離能夠根據(jù)相關(guān)聯(lián)的，或者說共同父元素的子元素之間的關(guān)系自動調(diào)整。

四、Normal Flow

前面提到了很多次“常規(guī)文檔流”，實際上也就是W3C文檔中的Normal Flow，也可稱為常規(guī)流。常規(guī)流的理解，主要圍繞著兩個方面，分別是格式化上下文(Formatting Context)和相對定位(Relative Positioning)。

格式化上下文，按照W3C文檔的解釋，分為Block Formatting Contexts(BFC)和Inline Farmatting Contexts(IFC)，這里我覺得沒有什么翻譯成中文的必要了，因為如果我說“塊級格式化上下文”的話，諸位能理解是什么意思嗎，所以，叫BFC和IFC就挺好。

所謂BFC，文檔上解釋得挺啰嗦，簡單來說，就是塊級box順次垂直排列。當(dāng)然也不能這么簡單，原因是塊級box的內(nèi)部還會產(chǎn)生BFC，也就是說可以嵌套。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html>   
  3.     <head>   
  4.         <title>BFC</title>   
  5.         <meta charset="utf-8" />   
  6.     </head>   
  7.     <body>   
  8.         <div style="width: 400px; height: 300px; background: blue;">   
  9.             <div style="width: 200px; height: 100px; background: red;"></div>   
  10.             <div style="width: 100px; height: 150px; background: green;"></div>   
  11.         </div>   
  12.     </body>   
  13. </html>  

2015116115306153.png (408×311)

但是，當(dāng)塊級box內(nèi)部都是行內(nèi)box的時候，就不會產(chǎn)生BFC，而是產(chǎn)生IFC，但只要子元素中有一個塊級box，就會產(chǎn)生BFC。Attention! 文檔中指出，如果外層塊級box的overflow: visible; 的話，不會產(chǎn)生BFC甚至IFC。

下面來看看IFC，IFC中包括文字以及行內(nèi)元素，對于文字來說，排版實際上有很多名堂，尤其是對于英文字符，或者說字母類文本，如果各位對文字排版有興趣的話，推薦各位一部視頻教程，由美國著名IT教學(xué)網(wǎng)站lynda.com出品的網(wǎng)頁設(shè)計排版視頻教程《Typography.for.Web.Designers》，至于下載方法，這里就不多說了，相信大家各顯神通都有辦法。

如果在行內(nèi)元素中同時包含文字的話，情況會比較復(fù)雜：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html>   
  3.     <head>   
  4.         <title>IFC</title>   
  5.         <meta charset="utf-8" />   
  6.     </head>   
  7.     <body>   
  8.         <div style="width: 400px; height: 300px; background: blue; overflow: visible;">   
  9.             <span style="font-size: 20px;">Something</span>   
  10.             <div style="display: inline-block; width: 200px; height: 100px; background: red;"></div>   
  11.         </div>   
  12.     </body>   
  13. </html>  

2015116115323645.png (407×310)

注意觀察span和div的底部對齊差異。

行內(nèi)框在行框垂直方向的對齊：

行框高度總是足夠包含其容納的所有框，它可能會高于它包含的最高的框。在這里會跟vertical-align屬性相關(guān)：

vertical-align可能的取值：

baseline、sub、super、top、text-top、middle、bottom、text-bottom、length、%、inherit

舉一個例子：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html>   
  3.     <head>   
  4.         <title>Vertical-align</title>   
  5.         <meta charset="utf-8" />   
  6.     </head>   
  7.     <body>   
  8.         <p style="background: grey; width: 600px;">   
  9.             <span style="font-size: 50px; border: 1px solid red;">hello</span>   
  10.             <span style="font-size: 30px; border: 1px solid green; vertical-align: top;">world</span>   
  11.         </p>   
  12.     </body>   
  13. </html>  

2015116115339723.png (608×62)

在水平方向上的對齊：

行內(nèi)框?qū)挾瓤偤托∮诎虻膶挄r，水平方向的對齊取決于text-align屬性。

五、POSITION和OVERFLOW的關(guān)系
父節(jié)點設(shè)置overflow:scroll,但是不管滾動條如果滾動，但是子節(jié)點一直都不動。
當(dāng)父節(jié)點不設(shè)置position情況下，子節(jié)點position的四種值的分析：
示例1.1:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body{   
  2. A {overflow: scroll;}   
  3. A-1 {}   
  4. }  

效果：A-1會根據(jù)A滾動條的滾動而滾動
分析：A-1的默認position設(shè)置為static，當(dāng)position為static時，A-1元素還是遵循正常的文檔流，因此A-1會受它父節(jié)點屬性的影響
示例1.2:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body{   
  2. A {overflow: scroll;}   
  3. A-1 {position: relative;}   
  4. }  

效果：A-1會根據(jù)A滾動條的滾動而滾動
分析：當(dāng)A-1的position設(shè)置為relative時，A-1元素還是遵循正常的文檔流，因此A-1會受它父節(jié)點屬性的影響
示例1.3:(重點)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body{   
  2. A {overflow: scroll;}   
  3. A-1 {position: absolute;}   
  4. }  

效果：A-1不會根據(jù)A滾動條的滾動而滾動
分析：當(dāng)A-1的position設(shè)置為absolute時，A-1元素脫離了文檔流，所以A-1不再受父節(jié)點屬性的影響
注意：這時在父節(jié)點沒有設(shè)置position的時，只會受到body節(jié)點的影響
示例1.4:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body{   
  2. A {overflow: scroll;}   
  3. A-1 {position: fixed;}   
  4. }  

效果：A-1不會根據(jù)A滾動條的滾動而滾動
分析：當(dāng)A-1的position設(shè)置為fixed時，A-1元素脫離了文檔流，這時A-1只受body元素的影響

當(dāng)父節(jié)點設(shè)置position值為非static情況下，子節(jié)點position的四種值的分析：
示例2.1:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body{   
  2. A {position：relative; overflow: scroll;}   
  3. A-1 {}   
  4. }  

效果：A-1會根據(jù)A滾動條的滾動而滾動
分析：跟示例1.1一樣，當(dāng)父節(jié)點A設(shè)置了position之后，子節(jié)點A-1還是遵循正常的文檔流，因此A-1會受它父節(jié)點屬性的影響
示例2.2:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body{   
  2. A {position：relative; overflow: scroll;}   
  3. A-1 {position: relative;}   
  4. }  

效果：A-1會根據(jù)A滾動條的滾動而滾動
分析：跟示例1.2一樣，當(dāng)父節(jié)點A設(shè)置了position之后，子節(jié)點A-1還是遵循正常的文檔流，因此A-1會受它父節(jié)點屬性的影響
示例2.3:(重點, 注意跟1.3示例對比)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body{   
  2. A {position：relative; overflow: scroll;}   
  3. A-1 {position: absolute;}   
  4. }  

效果：A-1會根據(jù)A滾動條的滾動而滾動
分析：當(dāng)父節(jié)點A設(shè)置了position之后，效果就跟示例1.3不一樣了，這時A-1會受到離它自己最近的一個設(shè)置了position屬性的父節(jié)點的影響，再看下面一個示例：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body{   
  2. A {position：relative; overflow: hidden;}   
  3. A-1 {overflow: scroll;}   
  4. A-1-1 {position: absolute;}   
  5. }  

注意：這時A-1-1不會收A-1的影響，但是會受到A的影響
示例2.4:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body{   
  2. A {position:relative; overflow: scroll;}   
  3. A-1 {position: fixed;}   
  4. }  

效果：A-1不會根據(jù)A滾動條的滾動而滾動
分析：跟1.4示例一樣，當(dāng)子節(jié)點的position屬性設(shè)置為fixed之后，不管的父節(jié)點是否設(shè)置了position值，都只會受到body節(jié)點的影響，其他任何節(jié)點都不會影響它

相關(guān)文章

  • CSS中的 position屬性sticky詳解

    這篇文章主要介紹了CSS中的 position屬性sticky的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-03-12

  • css position屬性為absolute時其百分值的計算

    這篇文章主要介紹了css position屬性為absolute時其百分值的計算,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小
    2019-08-06

  • 詳解CSS中position屬性介紹(新增sticky)

    這篇文章主要介紹了詳解CSS中position屬性介紹(新增sticky) 的相關(guān)資料，position的含義是指定位類型，取值類型可以有：static、relative、absolute、fixed、inherit和stic
    2018-12-17

  • css中的position屬性值的探究(小結(jié))

    這篇文章主要介紹了css中的position屬性值的探究(小結(jié))的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-25

  • css關(guān)于position屬性的用法詳解(絕對定位和相對定位的混淆)

    下面小編就為大家?guī)硪黄猚ss關(guān)于position屬性的用法詳解(絕對定位和相對定位的混淆)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-08

  • 淺談CSS中display/float/position屬性值的相互影響

    下面小編就為大家?guī)硪黄獪\談CSS中display/float/position屬性值的相互影響。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-17

  • 圖解CSS中position屬性的定位用法

    這篇文章主要介紹了圖解CSS中position屬性的定位用法,重點講解了相對定位和絕對定位在頁面布局中的作用,需要的朋友可以參考下
    2016-04-28

  • CSS樣式position屬性的一個小實例:z方向三層布局分析

    使用CSS樣式中的position屬性實現(xiàn)z方向三層布局效果，本文甚是疑惑，于是乎搜集整理一番，曬出代碼和大家分享一下
    2012-12-07

  • CSS 中的position屬性實例詳解

    這篇文章主要介紹了CSS 中的position屬性實例詳解,定位屬性position有4個值，分別是靜態(tài)定位（static）、相對定位（relative）、絕對定位（absolute）和固定定位（fixed）
    2023-09-04

最新評論