国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS 之 Position 屬性

oliverhuang / 1921人閱讀

摘要：而造成這樣的原因就是屬性遵循常規(guī)流，并沒有脫離文檔流，所以和是會影響前后元素的位置的。

CSS 參考手冊對 position 屬性做了說明：

static： 對象遵循常規(guī)流。此時4個定位偏移屬性不會被應(yīng)用。


relative：對象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規(guī)流中的任何元素。


absolute： 對象脫離常規(guī)流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊。


fixed： 與absolute一致，但偏移定位是以窗口為參考。當出現(xiàn)滾動條時，對象不會隨著滾動。

針對上面的說明，咱們下面通過幾個例子加以解釋，不過你的首先理解 常規(guī)流 是什么？ 常規(guī)流也被叫做 文檔流 ， 常規(guī)流 指的是元素按照其在 HTML 中的位置順序決定排布的過程，主要的形式是自上而下，一行接一行，每一行從左至右。就像搭積木一樣，一成一成，積木從下往上（常規(guī)流從上往下）， 那 脫離常規(guī)流 也就好理解了，就是 積木塊 不占據(jù)原來的位置了。

下面例子的 html 布局：

默認 css 樣式：

.div{
    border: 2px solid darkgrey;
    width:400px;
    height: 400px;
    margin-top: 50px;
}
div{
    width: 100px;
    height: 100px;
    border: 1px solid darkgreen;
}

靜態(tài)定位(static) ：
static，無特殊定位，它是html元素默認的定位方式，4個定位偏移屬性不會被應(yīng)用。及對它設(shè)置 top，right，bottom，left 無效。

相對定位(relative) ：
relative 屬性遵循常規(guī)流,也就設(shè)置 relative 屬性不會使它脫離文檔流。
如給第一個盒子 添加 relative ：

.d1{
    border: 1px solid red;
    position: relative;
    top: 20px;
    left: 20px;
}

可以看出下面的盒子還在原來的位置，而第一個盒子也占據(jù)這原來的位置(虛線的地方),并且 top 和 left 定位是相對于 父容器的。

好了知道了這一效果，那咱們在給第一個盒子加上 margin / padding ，會有什么變化呢？

.d1{
    border: 1px solid red;
    position: relative;
    margin:10px;
    padding: 10px;
    top: 20px;
    left: 20px;

}

可以看出 ，第一個盒子在添加 margin 屬性后 ，盒子偏離了父容器 10px ，加上之前的 top，就是 30px， 而 padding 屬性會使 盒子 撐開了 10px ，下面的其他盒子 d2、d3的位置也受到了影響，往下偏移了 40px ！！為什么是40px 呢，可以看圖中藍色實線部分，假設(shè)盒子 d1 沒有 relative 的話 ，那么 當 margin:10px; padding: 10px; 后，整個盒子是不是呈現(xiàn) 藍色實線的狀態(tài)， margin 會使 d1盒子 上下增加 10px，padding 會使 d1 盒子內(nèi)容上下?lián)伍_10px，合計 d1盒子偏離了40px。

而造成這樣的原因就是 relative 屬性遵循常規(guī)流，并沒有脫離文檔流，所以  margin和padding 是會影響
前后元素的位置的。

絕對定位(absoulte) ：
absolute： 對象脫離常規(guī)流。
給盒子添加 屬性：

.d1{
    border: 1px solid red;
    position: absolute;
    top: 20px;
    left: 20px;
}

嗯？ d1盒子怎么跑到了父容器的外面，而且 d2、d3 盒子的位置也受到了影響，往上移動了一個d1的高度。
原來我沒有給父容器添加一個 position:屬性 ，這也引出了 absolute 的一個規(guī)則：

使用absoult定位的元素脫離文檔流后，就只能根據(jù)祖先類元素(父類以上)進行定位，而這個祖先類還必須是以postion非static方式定位的，
舉個例子，a元素使用absoulte定位，它會從父類開始找起，尋找以position非static方式定位的祖先類元素(注意，一定要是直系祖先才算），直到標簽為止。

所以這樣：

.div{
    border: 2px solid darkgrey;
    width:400px;
    height: 400px;
    margin-top: 50px;
    position: relative;
}
.d1{
    border: 1px solid red;
    position: absolute;
    top: 20px;
    left: 20px;
}

這就是 盒子脫離文檔流的現(xiàn)象，脫離了文檔流，那么就不再占據(jù)原來的位置了，后面的元素就會頂上去，補充空白位置！

那同樣的 ，當盒子添加 absolute 屬性，再添加 margin / padding ，會有什么變化呢？

.d1{
    border: 1px solid red;
    position: absolute;
    margin: 10px;
    padding: 10px;
    top: 20px;
    left: 20px;
}

可以看出 首先 d2、d3 盒子 是不受影響的，而 d1盒子 margin: 10px;距離父容器就偏離了10px，加上之前的 top 和 left 就是 30px，而 padding 會把 d1 盒子給撐開了 10px。

但都對下面的盒子沒影響，原因也就是 absolute： 對象脫離常規(guī)流。

固定定位(fixed)：
fixed：與absolute一致，但偏移定位是以窗口為參考。當出現(xiàn)滾動條時，對象不會隨著滾動。
所以：

.d1{
    border: 1px solid red;
    position: fixed;
    top: 20px;
    left: 20px;
}

top 和 left 是以窗口為參考的!。當出現(xiàn)滾動條時，對象不會隨著滾動。還在原來的位置。

最后一點需要注意： 使用absoulte或fixed定位的話，必須指定 left、right、 top、 bottom
屬性中的至少一個，否則left/right/top/bottom屬性會使用它們的默認值 auto，也就是相當于 relative 狀態(tài)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50011.html

相關(guān)文章

  • 天坑，CSS之定位Position（六分之五）

    摘要：下文稱位置屬性即為。注意，不會脫離文檔流，具體見下面的圖示。直譯為修正，簡單粗暴，直接相對瀏覽器窗口顯示區(qū)域定位。 Position定位 個人覺得position這個屬性真的算是CSS的見面殺了。尤其是absolute，當年可是被虐的不輕。當然了，現(xiàn)在愛上了這個屬性，誰用誰知道。 position屬性 position是CSS的一個屬性，地位較高，也是我們重點要說的一個屬性。 對應(yīng)了四...

    anRui 評論0 收藏0

  • 天坑，CSS之定位Position（六分之五）

    摘要：下文稱位置屬性即為。注意，不會脫離文檔流，具體見下面的圖示。直譯為修正，簡單粗暴，直接相對瀏覽器窗口顯示區(qū)域定位。 Position定位 個人覺得position這個屬性真的算是CSS的見面殺了。尤其是absolute，當年可是被虐的不輕。當然了，現(xiàn)在愛上了這個屬性，誰用誰知道。 position屬性 position是CSS的一個屬性，地位較高，也是我們重點要說的一個屬性。 對應(yīng)了四...

    xuweijian 評論0 收藏0

  • CSS之position詳解

    摘要：元素的位置通過以及屬性進行規(guī)定。生成相對定位的元素，相對于其正常位置進行定位。規(guī)定應(yīng)該從父元素繼承屬性的值。表示相對原先位置右邊進行偏移，表示相對原先位置下邊進行偏移。當和同時存在，僅有效，當和同時存在僅有效。 定義和用法 position屬性規(guī)定元素的定位類型。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。...

    PiscesYE 評論0 收藏0

  • CSS 之 Position 屬性

    摘要：而造成這樣的原因就是屬性遵循常規(guī)流，并沒有脫離文檔流，所以和是會影響前后元素的位置的。 CSS 參考手冊對 position 屬性做了說明： static： 對象遵循常規(guī)流。此時4個定位偏移屬性不會被應(yīng)用。 relative：對象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規(guī)流中的任何元素。 absol...

    jas0n 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<