三大布局與flex佈局

時間 2019-11-06

標籤三大佈局 flex 欄目 Flex 简体版

原文原文鏈接

1.常見的佈局方案有哪些？

流式佈局
流式佈局指的是按照標準文檔流進行佈局的佈局方式，它爲系統默認的佈局方式，同時也是最爲簡單的佈局方式。換句話說，在默認狀況下，HTML中全部元素都是根據流動佈局模型，從上到下，從左到右的方式來分佈網頁中的內容。
舉例代碼以下:

最終運行結果則是塊級元素獨佔一行，行內元素並排顯示，徹底符合標準文檔流的模式.
    <style>
           div{
               width: 100px;
               height: 100px;
               border: 2px solid red;
           }
           span{
               border: 1px solid blue;
           }
        </style>
    </head>
    <body>
        <div>css</div>
        <div>html</div>
        <div>js</div>
        <span>span</span>
        <span>span</span>
        <span>span</span>
        <span>span</span>
    </body>
複製代碼

浮動佈局
浮動就是說盒子脫離了標準文檔流（半脫離），標準文檔流內的各類規則將再也不適用。做用本來是爲了實現字圍效果，但後來發現可讓男標籤並排顯示，在同一行上和平共處。格式：float:left/right/none none默認爲不浮動。更爲詳細的內容會在下面詳細解釋。
舉例代碼以下：

代碼跑起來會出現字圍效果，即文字（足夠多時效果更明顯）將圖片包圍了起來
    <style>
       img{
        width: 100px;
        height: 100px;
        border: 2px solid green;
        float:left;
      }
    </style>
</head>
<body>
    <div>
    <!--圖片能夠爲任意-->
     <img src="./imgs/icon.png" alt="">
      做用本來是爲了實現字圍效果，但後來發現可讓男標籤並排顯示，在同一行上和平共處。
      做用本來是爲了實現字圍效果，但後來發現可讓男標籤並排顯示，在同一行上和平共處。
      做用本來是爲了實現字圍效果，但後來發現可讓男標籤並排顯示，在同一行上和平共處。
      做用本來是爲了實現字圍效果，但後來發現可讓男標籤並排顯示，在同一行上和平共處。
      做用本來是爲了實現字圍效果，但後來發現可讓男標籤並排顯示，在同一行上和平共處。
    </div>
</body>
使得塊級元素並排顯示
  <style>
        div{
            width: 100px;
            height: 100px;
            background-color:#358990;
            border: 2px solid yellow;
            /* 會使得div並排顯示 */
            float: left;
        }
    </style>
</head>
<body>
    <div>div</div>
    <div>div</div>
    <div>div</div>
</body>
複製代碼

層佈局
層佈局簡單來講能夠稱爲定位，它是徹底脫離了標準文檔流的一種佈局方案。它的好處：可以實現更爲豐富的佈局方式，爲用戶提供更好的體驗。使用position這個屬性來實現。
在CSS中，對於層佈局，有以下三種實現方法（定位方式）：

相對定位：relative
參考點：盒子自己它應該出現的位置；
應用：在進行局部的細節調整時，或者做爲絕對定位的參考點時。
絕對定位：absolute
參考點：根據設置的參考點（position：relative）進行定位 注意點：在尋找參考點時是一直向上尋找，找到的話就以這個參考點爲主，不然就一直向上尋找，直到body，若是body沒有設置參考點，那麼就以body爲參考點。
z-index:絕對定位因爲它徹底脫離了標準文檔流，它可能會發生覆蓋；在它發生覆蓋時，可經過z-index改變前後順序1，z-index的值越大，就越靠前。
另外有個小知識點就是不管盒子是否徹底脫離文檔，只要是脫離啦，那麼就變成了塊級，就能夠設置寬高啦！不管是哪一種定位，都須要設置偏移量（top,right,bottom,left）。
固定定位:fixed
參考點：網頁上的頁面視窗
注意細節：在使用百分比時，它不是相對於body的值，而是針對當前窗口的值。

flex佈局
flex佈局要比float更好用，要是你熟練掌握flex佈局，不會float也OK的！ flex佈局的四大概念：
（1）容器：若是一個盒子設置了display：flex，那麼這個盒子（必須是div標籤）就變成一個容器；
（2）項目：容器的直接子元素纔可稱之爲項目，其它的都不屬於項目；
（3）主軸：在容器（這時已經display過啦）中，項目默認按主軸方向排列，默認是從左向右排列的；
（4）交叉軸：與主軸垂直的軸稱爲交叉軸。
容器的相關屬性：
（1）flex-direction:改變主軸方向值：row(默認主軸方向) column(垂直的主軸方向) row-reverse(存在反轉的含義) column-reverse(同上)

（2）flex-wrap:項目足夠多的時候，是否換行值：wrap nowrap

（3）flex-flow:flex-direction和flex-wrap屬性的簡寫形式。默認值：row nowrap；由於它太過於無聊簡單，就不在演示。
（4）justify-content:處理富餘空間值：flex-start flex-end center space-between space-around

（5）align-items:定義項目在交叉軸上是如何對齊的值：flex-start flex-end center

（6）align-content:當有多根主軸時，多根主軸的對齊方式；至關於處理垂直方向上的富餘空間值：flex-start flex-end center space-bewteen space-around

項目相關屬性：
（1）order:用來改變項目順序和z-index有點相像，只不過該值是越大越靠後，z-index是越大越靠前值：直接用數字來表示大小

（2）flex-grow:用來讓項目長大從而充滿主軸值：直接用數字來表示大小，而項目也會按照數字比例來分配空間大小。

（3）flex-shrink：讓某個項目壓縮，也就和flex-grow相反值：直接用數字來表示大小，而項目也會按照數字比例來分配空間大小，在分配時與上面相反，數值越大，壓縮越狠，所佔空間越小。
（4） flex-basis：項目在主軸上佔據的大小值：直接用數字（px）來表示大小，能夠設置爲百分比(這是基於容器來講的)。

（5）flex：是一個複合屬性，是上述幾個屬性的簡寫形式值：上面幾個屬性的綜合，固然上面屬性不設置的就能夠不寫數值啦
（6）align-self：單獨設置某個項目的對齊方式,單獨一個項目在交叉軸的對齊方式值：flex-start flex-end center

2.浮動佈局的詳細介紹

（1）浮動有三大特色css

包裹性：若是一個塊級元素，在沒有設置width的狀況下（前提條件），一旦使用float，那麼它的寬度就會發生變化，儘可能最小，包裹元素裏的內容，可以徹底包裹其中內容。
破壞性：在一個塊級元素中，若是它的子元素都浮動了起來，而且沒有清除浮動，那麼塊級元素將會塌陷，這就是浮動的破壞性。
塊級框：若是一個行內元素，設置浮動之後就變成一個塊級框，塊級框有一個特色，就是能夠設置盒子模型的六大屬性；簡單來講，當一個元素浮動時，它會悄悄的作一個變性手術。若是一個女盒子浮動了，那麼就能夠設置寬高了至關於把它變成男標籤（挺簡單的，再也不寫代碼啦）。

（2）浮動的其它特色
0，浮動的初衷目的是爲了實現字圍效果，後來才發現，浮動可讓多個男標籤並排顯示。
1，在一個父元素內部，若是一個元素浮動了，那麼它就脫離了標準文檔流，後面的元素就向上排，它只會對浮動元素後面的元素起做用。
2，浮動並無徹底脫離標準文檔流，僅僅是半脫離，具備脫標性，若是後面元素內部有文字，這些文字會環繞在浮動元素的周圍，產生了字圍效果。
3，若是多個元素浮動了，那麼它們會並排顯示，若是都是向同一方向的浮動，它們會牢牢貼靠在一塊兒。
4，若是一個元素浮動了，先向上移動，直到貼靠到父元素頂部，接着知足左浮動或者右浮動的要求，向左邊界或右邊界浮動，直到移動到父元素的邊界處。
5，若是一個元素沒有設置高度，它的高度由裏面的內容撐起來，若是父元素內部元素都浮動了，那麼會形成父元素的塌陷問題；而若是父元素也浮動了，則不會出現高度的塌陷。
6，一個元素浮動了，那麼它也會受到父元素的控制。當父元素寬度變小時，裝不下全部子元素時，後面的子元素具備貼靠性。當父元素小到極致時，裏面浮動的子元素寬度是不會改變的，也就是說邊框走，裏面內容寬度不變。 7，就是說若是有一個元素爲左浮動，一個元素爲右浮動，那麼你須要把右浮動的元素寫在左左浮動的前面。
8，若是元素浮動，那麼會形成的影響有：形成父元素高度塌陷；對後面兄弟元素形成影響。
（3）元素浮動形成的影響解決方法
針對的是父元素塌陷的解決方案：
1，加高法：就是直接給塊級元素加一個高度；大部分狀況下是不用的，由於父元素的高度都是由子元素的內容撐起來的。
2，overflow：hidden：使用了overflow：hidden，父元素會隨着子元素的高度變化而變化。overflow：hidden原本是用來處理溢出的，在使用過程當中，須要注意子元素若是想要超出父元素的高度，此時overflow：hidden也就不適合啦！
3，clear:both（內牆法）：在全部子元素後面加一個空的div，在這個div上面加clear:both；它的優勢在於clear:both專業清除浮動的，而缺點是多寫一個代碼
針對後面兄弟元素影響的解決方案：
1，直接在受影響元素上加clear:both。
工程中經常使用的清除浮動的方案：
1，利用僞元素 after 也就是說直接寫一個清除浮動的類（clear）：
舉例.clear:after{content=""; display:block; clear:both; height:0; overflow:hidden;}html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。