摘要：布局學習的主要目的是為了記住各種屬性么，最重要的是理解的定位機制與盒子模型。它是一個獨立的渲染區域，只有參與，它規定了內部的如何布局，并且與這個區域外部毫不相干。

學習css的主要目的是為了記住各種屬性么？NO，最重要的是理解css的定位機制與盒子模型。

接下來，從布局的角度來學習css的定位機制和盒子模型，學習之前還是先來提幾個問題

1.進行css布局前為什么要學習定位機制和盒子模型？

2.在實際的工作中到會用到哪些css布局？

css是用來為頁面元素添加樣式的，在最開始的時候，開發網頁是先將各個尺寸定下來，然后使用最傳統的position/float把元素挪到對應的位置，頁面上的元素就好像一個個盒子一樣，很明顯能夠得出一個結論：盒子模型是布局的基礎，所以在學習css布局前要先來學習盒子模型，盒子模型包括content，padding，border，margin四大部分，如下圖：

盒子模型一般分為標準盒子模型和IE盒子模型，前者由w3c規定，后者由微軟規定，這兩種盒子模型可以通過box-sizing來進行切換，它們最大的區別就是width屬性作用的范圍，標準盒子的width=content，IE盒子的width=content + padding + border，看下圖：

除了標準盒子和IE盒子這種分類方法，一般還將盒子模型分成塊級盒子模型和行內盒子模型，這個是根據不同的display屬性值劃分的,下面是display的可能取值：

塊級盒子模型的圖在上面已經貼出了，下面是行內盒子模型的圖：

前面說了盒子模型包括什么內容，對于任意的盒子模型來說，它的四部分內容可以給它們設值也可以不設值，這四個值中margin部分有很多可以探討的內容，比如它可以設置負值，這一部分之所以復雜，是因為它與display的不同值混合時會有很多不同的情況，比如margin設負值后可能會帶來重疊，那具體重疊的情況是怎樣的？說不同的重疊情況前，先來理解一下，margin負值是什么意思？margin的值其實是相對于基線來進行移動，對于top，left方向，它們是以其他元素的邊框為基線，對于right，bottom方向它們是以自身border為基線，具體看下圖：

接下來看看不同的display會對margin重疊造成什么影響

1.表現（測試地址：https://demo.xiaohuochai.site...）

1.1 block元素可以使用四個方向的margin值

1.2 inline元素使用上下方向的margin值無效

1.3 inline-block使用上下方向的margin負值看上去無效

2.重疊（測試地址：https://demo.xiaohuochai.site...）

2.1 兩個block元素重疊時，后面元素可以覆蓋前面元素的背景，但無法覆蓋其內容

2.2 當兩個inline元素，或兩個line-block元素，或inline與inline-block元素重疊時，后面元素可以覆蓋前面元素的背景和內容

2.3 當inline元素(或inline-block元素)與block元素重疊時，inline元素(或inline-block元素)覆蓋block元素的背景，而內容的話， 后面的元素覆蓋前面的元素

3.浮動（測試地址：https://demo.xiaohuochai.site...）

3.1 block元素與浮動元素重疊時，其邊框和背景在該浮動元素之下顯示，而內容在浮動元素之上顯示

3.2 inline或inline-block元素與浮動元素重疊時，其邊框、背景和內容都在該浮動元素之上顯示

4.定位（測試地址：https://demo.xiaohuochai.site...）

4.1 定位元素(position不為static)覆蓋其他元素的背景和內容

4.2 將relative屬性值應用于inline元素，由于無法改變其行內元素的本質，所以其上下margin依然存在問題

margin合并（collapse）是指塊級元素的上外邊距與下外邊距有時會合并為單個外邊距,這種現象只發生在和當前文檔流方向的相垂直的方向上，它分為同級元素和父子元素兩種，首先是同級元素，具體代碼如下：

    
    
    


    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam mollitia aut eaque nihil eos rem suscipit error id nesciunt saepe? Deserunt aspernatur, iusto facere sequi doloribus accusantium porro odio alias.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam mollitia aut eaque nihil eos rem suscipit error id nesciunt saepe? Deserunt aspernatur, iusto facere sequi doloribus accusantium porro odio alias.

接著是父子元素，具體代碼如下：

    
    
    


    

        
hello
    
    

最后這個比較簡單，是在布局中常用的一種水平居中的方法，當頁面元素的寬度是確定的值的時候，設置margin：0 auto；元素會進行居中，這是因為auto代表左右自適應，具體代碼如下：

    
    
    


    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam mollitia aut eaque nihil eos rem suscipit error id nesciunt saepe? Deserunt aspernatur, iusto facere sequi doloribus accusantium porro odio alias.

前面出現的邊距重疊我們只是列出了問題但是沒有解決，這是因為要解決這樣的問題，需要了解另外一個知識，這個知識涉及到了定位機制的內容BFC，寫在這里，就作為一個承前啟后的部分，那BFC到底是什么？

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。

簡單來說，BFC就是頁面上多帶帶開的一塊渲染區域，有的人把它叫做css世界的結界，非常的形象，那它是如何被觸發的？又為什么能解決邊距重疊？
首先是觸發規則：

根元素

float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

不為visible

接著是渲染規則：

內部的Box會在垂直方向，一個接一個地放置。

Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊

每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

的區域不會與float box重疊。

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

計算BFC的高度時，浮動元素也參與計算

最后看它怎樣解決邊距重疊,同樣的代碼，只需要添加一句overflow：hidden觸發BFC，之所以能解決重疊是因為觸發了新的bfc后與外部環境就隔開了，彼此不會影響。

    
    
    


    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam mollitia aut eaque nihil eos rem suscipit error id nesciunt saepe? Deserunt aspernatur, iusto facere sequi doloribus accusantium porro odio alias.
    

    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam mollitia aut eaque nihil eos rem suscipit error id nesciunt saepe? Deserunt aspernatur, iusto facere sequi doloribus accusantium porro odio alias.
    

    
    
    


    

        
hello
    
    

上面說了盒子模型，知道了css操縱的內容具體是什么樣的，接下來就需要把這些盒子放在頁面上，在css的定位機制中，position：absolute、relative、static、fixed有這幾個取值，先來看看這些取值的不同
position：absolute是將元素以瀏覽器視口為原點或者以最近的定位元素為原點來進行定位，具體看下面的代碼：

    
    
    


  

        
absolute
  

接著是position:relative，他是相對于自身的位置進行偏移，具體看下面的代碼：

    
    
    


  

        
relative
  

上面的是position定位流，除了position定位流，css還有float定位流，原本css發明這個屬性并不是用來定位的，但是它確實在定位時很方便，css的float定位會發生高度坍塌，也就是當設置了float時，會使得原本的元素脫離原來的div，使用上面說的BFC就可以解決這個問題，設置clear也可以解決，具體看下面的代碼：

    
    
    


  

        
relative
          //


  

經過上面的基礎知識，對于css的盒子模型和定位機制有了比較好的理解，接下來，就可以來檢驗一下，完成這幾種布局需求：

2欄布局

圣杯布局

高度自適應布局

水平垂直居中布局

1.2欄布局：一遍定寬一遍自適應/一欄不定寬，一欄自適應/

    
    
    


      
left固定200px
    
right自適應

    
    
    


      
left不固定
    
right自適應

2.圣杯布局：上中（左中右）下

    
    
    


      
this is top

    
this is left
    
this is center
    
this is right

this is footer

3.高度自適應布局：高度自適應

    
    
    


      

        
aaa
        
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia excepturi porro debitis quisquam corporis illum dolorum doloribus, similique esse veritatis harum hic, voluptatem veniam necessitatibus neque, animi, alias incidunt quasi!
        
sss
      

5.水平垂直居中定位：已知寬高/未知寬高

    
    
    



    

    
我是塊級元素

    
    
    



    

    
我是塊級元素

不知道大家實現剛才的一系列的布局是什么感受，我的感受是累，那有沒有一種好用的布局方式，不用去使用各種屬性來自我創造直接就能來用呢？flex布局
Flex的基本概念就是容器和軸，容器包括外層的父容器和內層的子容器,父容器設為flex后，它的所有子元素自動成為容器成員

父容器屬性：
    flex-direction
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content
子容器屬性：
    order
    flex-grow
    flex-shrink
    flex-basis
    flex
    align-self

是的，它就是這么簡單，接下來把上面的布局實現一下，看它到底多方便

2列布局

 
 




    

        
固定
        
自適應
    

    

        
不固定
        
自適應
    

圣杯布局

 
 


    
    
#header
    

        

            # left
        
        

            # center
        
        

            # right
        
    
    

高度自適應布局

  
  
  



  
flex 嵌套布局

  
外容器 自適應內容的區域 ... ...
  
 
    
                  
      

        
內容器 - 頭部信息
      
      
                         
        內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 

          內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 

            內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 
內容溢出滾動部分 

      
      

        
內容器 - 尾部信息
      
    
  

水平垂直居中

 
 



    

    
我是塊級元素

除了上面的這些布局，他還能實現均勻布局，非均勻布局

 
 




    

        
cell1
        
cell2
        
cell3
    
    

        
cell1
        
cell2
    

 
 




    

        
flex
        
flexxxxxx
        
sdfsdf
    


    

        
flex
        
flexxxxxx
        
sdfsdf
    

    

        
flex
        
flexxxxxx
        
sdfsdf
    

經過這個過程，終于找到了一種適合的布局方法，這種方法適用于pc端和移動端，在移動端布局的時候，會經常聽到rem布局，這是什么意思？要說明這個，還需要先來說說css中的單位，css常見的單位如下：

然后再來說說瀏覽器適配問題，通過百度流量統計研究院的數據可知，現在瀏覽器主流尺寸是:

PC端(1920*1080)

移動端(640*360)

在開發網頁時，針對PC端和移動端適配有2種方案

①寫兩套代碼，用JS判斷設備后使用對應代碼

②寫一套代碼，用媒體查詢判斷后修改樣式，一般以1200為界限。`

針對這些情況，常見的移動端布局有rem布局
最后就來演示一下rem

function intiSize(){

//獲取當前瀏覽器窗口寬度(這里的實質就是body寬度)

var win_w=document.body.offsetWidth;

//定義變量 var fontSize;

if(win_w>640){ fontSize=24; }

else{

//如果瀏覽器窗口寬度(這里的實質就是body寬度)值小于320，取320

win_w=Math.max(320,win_w); fontSize=win_w/320*12 }

//設置根元素的大小 document.getElementsByTagName("html")[0].style.fontSize=fontSize+"px";}

//瀏覽器窗口寬度發生變化時條用這個函數，方便與改變窗口大小時候調試

onresize=intiSize;intiSize();

在上面動態的獲取了設備寬度，然后根據設計尺寸和設備尺寸的比例來設置了fontsize，這個意思就是1rem = win_w/320*12px，這樣在寫頁面的時候只要寫rem這個單位，自適應問題就迎刃而解了，這就是rem，一個相對尺寸

ok，css布局完畢

本篇資料來源貼在下面，大家去看看：
行內盒子模型： https://biaoyansu.com/9.15
淺談margin負值: https://zhuanlan.zhihu.com/p/...
css單位： http://www.w3school.com.cn/cs...