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

資訊專欄INFORMATION COLUMN

深入css布局 (2) — 定位與浮動

Crazy_Coder / 561人閱讀

摘要：深入布局定位與浮動在知識體系中，除了選擇器，樣式屬性等基礎知識外，布局相關的知識才是比較核心和重要的點。定位后，原來在文檔流中占據的位置，會被其他元素所占據。清除浮動的特殊應用清除浮動可以解決父元素高度塌陷問題。

?

深入css布局(2) — 定位與浮動

?

????

在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重要的點。今天我們來深入學習一下css布局相關的知識。

?

上篇文章我們講完了css布局中盒模型和元素分類的相關知識，同時介紹了box-sizing和行框。這篇我們繼續...

?

一、定位與浮動

?

上篇我們講解了不同類型元素的特點，我們可以隨意的排列組合他們來達到我們想要的效果。但是他們都是基于一個二維平面的，如果我們想在布局中有遮擋，重疊之類的更豐富效果，我們就需要使用到定位和浮動的相關知識。




1.1 文檔流

文檔流就是按照頁面元素書寫的順序，將頁面元素按從左到右，從上至下的一般順序進行排列。那么也就可以理解成我們剛才所說的一個二維平面的概念。

那么如果我想要實現更豐富的效果，就需要脫離文檔流，在一個新的平面上去顯示，這樣我們就可以在屏幕上有多個平面疊加顯示的效果了，那么這就是浮動和定位的工作了。




1.2 定位

定位允許你使用 position 屬性，將一個元素相對于他自己或者他的祖先元素甚至是瀏覽器窗口通過 top , left , right , bottom 屬性進行偏移。

根據 position 屬性的取值，元素可以分為靜態定位元素static（默認值）、相對定位元素relative、絕對定位元素absoute和固定定位元素fixed。

首先我們拋開static這個默認值，因為他基本不屬于定位的范疇，因為元素默認就是static，他就相當于是依據文檔流顯示。

當我們使用定位時，需要position屬性和top,left,right,bottom這兩類屬性共同參與來決定一個元素的 定位類型 和 偏移量 。

使用方法很簡單，這里說下他們之間的區別:

  • relative相對定位
    1. 元素根據其在當前文檔流所在位置作為參考系，進行偏移。
    2. 定位之后原來元素在文檔流中的位置會被空出來，不會被其他元素所占據。
  • absolute絕對定位
    1. 元素會將其帶有position為非static的祖先元素作為參考系進行偏移。
    2. 如果祖先元素里沒有帶有position為非static的，則會以首屏作為參考系。
    3. 定位后，原來在文檔流中占據的位置，會被其他元素所占據。
  • fixed固定定位
    1. 根據當前可視區進行定位，所以當文檔流為多屏可滾動時，fixed定位的元素會跟隨滾動而滾動。
    2. 跟absolute定位一樣，定位后，原來在文檔流中占據的位置，會被其他元素所占據。




1.3 包含塊

包含塊就是個專有名詞，其實概念很簡單，這里了解一下就好。

包含塊是一個矩形區域，當元素設置屬性的百分比的時候，比如width：50% 或者 top: 10%，其參考系就是他的包含塊。

  • 大部分時候對于文檔流里的元素，其包含塊指的都是其父元素的區域。
  • 對于定位元素來說，相對定位元素包含塊也是其父元素區域；
  • 絕對定位元素的包含塊是其帶有position為非static的祖先元素區域。如果其沒有這樣的祖先元素的話其包含塊為首屏顯示區域，這個區域也有個專有名詞叫做初級包含塊。
  • 固定定位元素的包含塊就是當前可視區的區域。




1.4 浮動

浮動允許你將元素浮動起來，脫離文檔流向左或者向右移動。直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

雖然浮動也脫離文檔流顯示，但是與定位不同的是 inline 和 inline-block 的元素可以識別這種因浮動而脫離的文檔流，從而不發生重疊。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .float {
            width: 40px;
            height: 40px;
            background: blue;
            float: left;
        }
        p{
            display: inline-block;
            width: 100px;
            height: 100px;
            background: red;
        }
    style>
head>
<body>    
    <div class="float">div>
    <p>LearnInPro  LearnInPro  LearnInProp>
body>
html>

?

我們會發現p元素并沒有占據掉浮動元素的位置，然后我們將上面的代碼稍作修改，將p元素的display改為block我們就會發現

?

雖然這樣p標簽占據了float元素的位置，但是標簽里面的文本則不會去占據float元素的位置。

這個設定其實是有些詭異的。另外說一句，在css歷史上浮動這個東西一開始被造出來是為了實現文字圍繞圖片這種效果的而不是用來做布局的，當時只有圖片可以設置浮動效果，但是后來慢慢所有元素都可以浮動并且基于浮動有了自己的布局體系，所有由于歷史原因相對來說浮動的規則是比較亂的小部分還有些詭異的。有些地方我們記住就好。

我們來具體看下浮動的規則：浮動元素會從最后一行最左側的空白位置開始浮動，如當前行無法容納下自己寬度，則垂直下沉到下一行，向左或者向右碰到包含框或另一個浮動框的邊框為止。我們這里舉兩個例子：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        .float{
            width: 30%;
            height: 40px;
            border: 1px solid black;
            float: left;
        }
    style>
head>
<body>
    <div class="float">flaot1div>
    <div class="float" style="height: 60px;">flaot2div>
    <div class="float">flaot3div>
    <div class="float">flaot4div>
    
body>
html>

這里float4在float3右側空白位置起始，發現當前行無法容納下自己則垂直向下到下一行，向左移動，在碰到包含塊之前，碰到了float2的邊框，于是就會在float2的右邊框處停止浮動。

之后我們將代碼稍作修改，把float5這行注釋刪掉，我們會發現，一開始float5的起始位置就是在float4這行的右側空白區域，當前行可容納下自己，于是就停在了float4的右側。雖然第一行也就是float3這行右側空白區域也空著，可以放得下float5，但是float5的起始位置并不會在第一行，所以最終即使第一行有位置可以顯示下float5，它也不會在那里顯示。

?

1.4 清除浮動

首先為啥要清除浮動？

由于浮動元素會脫離文檔流顯示，所以在浮動元素后面的塊級元素會默認占據這些元素的位置，就會造成這些塊級元素會在浮動元素的下層顯示，出現浮動元素蓋住后面正常文檔流元素的效果，但這往往不是我們想要的結果。

其作用是改變 使用清除浮動的這個元素 與 前一個聲明的浮動元素 之間的默認布局規則，讓 使用清除浮動的這個元素 在新的一行中顯示。

如何清除浮動

clear屬性，其值為left | right | both。

浮動元素或者非浮動元素的塊級元素都可以使用這個屬性來清除浮動（我們之前說inline和inline-block元素可以自動識別浮動，所以他們不需要清除浮動）， 他們的作用對象是前一個聲明的浮動元素。如果使用 clear:left | right 則是清除前一個float為left或者right的元素的浮動，clear：both則是清除前一個浮動元素，無論它是向哪邊移動。那么使用clear屬性的元素會在浮動元素的下方新開一行顯示。

清除浮動的特殊應用

清除浮動可以解決父元素高度塌陷問題。當一個元素包裹了一些float元素的時候，由于float元素脫離文檔流顯示，所以父元素無法被這些元素撐開高度，導致父元素高度為0。

那么最常用的一種解決方案是：設置父元素的after偽元素的clear屬性 來讓其撐開父元素的高度。




    
    Document
    


    

        
float
  • 當我們沒有設置clearfix的after偽元素時，會發現clearfix的高度為0，只有邊框會顯示出來。我們通過設置clearfix的after偽元素來讓我們在不需要新增標簽的情況下就可以清除掉浮動，并且clearfix類還可以復用。
  • 注意點：
    1. content和display屬性會將after偽元素渲染出來，加上clear: both實現一個真實標簽清除浮動的效果。
    2. 在一般瀏覽器中不設置visibility和height是沒有問題的，但為了增加代碼健壯性和規范性，建議加上。
    3. :after 和 ::after的區別：:after的寫法是css2的，可以兼容到IE8，::after的寫法是css3中規定的，用以區分偽類(:hover)和偽元素(::before)。



定位與浮動的相關知識點就講的差不多了，下篇文章會去講下merge的一些問題 和 格式化上下文(formatting context) ， 繼續把css布局篇完成。




?

最后你覺得我們的文章對你有幫助，歡迎關注我們的 微信公眾號LearnInPro，在上面你可以第一時間獲取到我們的技術文章，并且你可以隨時在上面向我們提問，把你在學習前端過程中所遇到的問題發給我們。我們每天都會按時回復大家的每一個問題，希望LearnInPro可以伴隨你從入門到專家。

?

?

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2244.html

相關文章

  • 深入學習CSS布局系列（一）布局常用屬性

    摘要：布局涉及到的屬性常用屬性值此元素不會被顯示它和屬性不一樣。當所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認的內容高度浮動塌陷配合使用屬性規定元素的哪一側不允許其他浮動元素。 @(CSS技巧)[CSS, 布局] 深入學習CSS布局系列（一）布局常用屬性 一直感覺自己對CSS的各個屬性很了解，可是在前幾天一次面試后發現自己真的很多地方感覺自己知道，可是實際上自己并不是真的理解了...

    Noodles 評論0 收藏0

  • 【芝士整理】CSS基礎圖譜

    摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動產生，元素周圍的內容轉換為圍繞元素排列。 選擇器注意點 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節點 A + B - 下一個兄弟節點 A...

    iOS122 評論0 收藏0

  • 深入css布局 (3)完結 — margin問題與格式化上下文

    ? 深入css布局(3) — margin問題與格式化上下文 ? ???? 在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重要的點。今天我們來深入學習一下css布局相關的知識。 ? css布局篇已經講個2篇了，前面我們深入講解了 盒模型與box-sizing, 元素分類，行框，定位與浮動等知識點。今天呢，我們把css布局篇做一個結尾，最后...

    blankyao 評論0 收藏0

  • CSS中重要的BFC

    摘要：中有個重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡介在解釋之前，先說一下文檔流。我們常說的文檔流其實分為定位流浮動流普通流三種。使用包含浮動元素注意，這里觸發并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡介 在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實分為定位...

    plus2047 評論0 收藏0

  • CSS魔法堂：說說Float那個被埋沒的志向

    摘要：時其寬度始終保持占滿寬度的態度。清除浮動就是為浮動影響的范圍劃邊界。那么可歸結為的父容器包裹所有子元素。注意屬性值不能為空白，否則無法清除浮動。 前言 ?定位系統中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開頭我們就用錯了；2. 它跟Normal flow靠得太近了。本文嘗試理清Float的特性和行為特征，若有紕漏望各位指正...

    legendmohe 評論0 收藏0

發表評論

0條評論

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