從布局看css基礎(chǔ)

thekingisalwaysluc 發(fā)布于2019-08-30 10:51 / 2242人閱讀

摘要：布局學(xué)習(xí)的主要目的是為了記住各種屬性么，最重要的是理解的定位機(jī)制與盒子模型。它是一個(gè)獨(dú)立的渲染區(qū)域，只有參與，它規(guī)定了內(nèi)部的如何布局，并且與這個(gè)區(qū)域外部毫不相干。

css布局

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

接下來，從布局的角度來學(xué)習(xí)css的定位機(jī)制和盒子模型，學(xué)習(xí)之前還是先來提幾個(gè)問題

1.進(jìn)行css布局前為什么要學(xué)習(xí)定位機(jī)制和盒子模型？

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

1.css基礎(chǔ) 1.1 盒子模型

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

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

除了標(biāo)準(zhǔn)盒子和IE盒子這種分類方法，一般還將盒子模型分成塊級盒子模型和行內(nèi)盒子模型，這個(gè)是根據(jù)不同的display屬性值劃分的,下面是display的可能取值：

塊級盒子模型的圖在上面已經(jīng)貼出了，下面是行內(nèi)盒子模型的圖：

1.1.1 盒子模型的margin負(fù)值

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

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

1.表現(xiàn)（測試地址：https://demo.xiaohuochai.site...）

1.1 block元素可以使用四個(gè)方向的margin值

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

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

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

2.1 兩個(gè)block元素重疊時(shí)，后面元素可以覆蓋前面元素的背景，但無法覆蓋其內(nèi)容

2.2 當(dāng)兩個(gè)inline元素，或兩個(gè)line-block元素，或inline與inline-block元素重疊時(shí)，后面元素可以覆蓋前面元素的背景和內(nèi)容

2.3 當(dāng)inline元素(或inline-block元素)與block元素重疊時(shí)，inline元素(或inline-block元素)覆蓋block元素的背景，而內(nèi)容的話，后面的元素覆蓋前面的元素

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

3.1 block元素與浮動元素重疊時(shí)，其邊框和背景在該浮動元素之下顯示，而內(nèi)容在浮動元素之上顯示

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

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

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

4.2 將relative屬性值應(yīng)用于inline元素，由于無法改變其行內(nèi)元素的本質(zhì)，所以其上下margin依然存在問題

1.1.2 盒子模型的邊距合并

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




    
    demo
    


    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.

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




    
    demo
    


    
        hello

1.1.3 盒子模型的margin居中

最后這個(gè)比較簡單，是在布局中常用的一種水平居中的方法，當(dāng)頁面元素的寬度是確定的值的時(shí)候，設(shè)置margin：0 auto；元素會進(jìn)行居中，這是因?yàn)閍uto代表左右自適應(yīng)，具體代碼如下：




    
    demo
    


    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.

1.1.4 BFC

前面出現(xiàn)的邊距重疊我們只是列出了問題但是沒有解決，這是因?yàn)橐鉀Q這樣的問題，需要了解另外一個(gè)知識，這個(gè)知識涉及到了定位機(jī)制的內(nèi)容BFC，寫在這里，就作為一個(gè)承前啟后的部分，那BFC到底是什么？

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

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

根元素

float屬性不為none

position為absolute或fixed

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

不為visible

接著是渲染規(guī)則：

內(nèi)部的Box會在垂直方向，一個(gè)接一個(gè)地放置。

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

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

的區(qū)域不會與float box重疊。

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

計(jì)算BFC的高度時(shí)，浮動元素也參與計(jì)算

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




    
    demo
    


    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.




    
    demo
    


    
        hello

1.2 定位機(jī)制 1.2.1 position定位

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




    
    demo
    


  
        absolute

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




    
    demo
    


  
        relative

1.2.2 float定位

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




    
    demo
    


  
        relative
          //

2.css布局實(shí)戰(zhàn) 2.2.1 傳統(tǒng)布局

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

2欄布局

圣杯布局

高度自適應(yīng)布局

水平垂直居中布局

1.2欄布局：一遍定寬一遍自適應(yīng)/一欄不定寬，一欄自適應(yīng)/




    
    demo
    


      left固定200px
    right自適應(yīng)




    
    demo
    


      left不固定
    right自適應(yīng)

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




    
    demo
    


      this is top

    this is left
    this is center
    this is right

this is footer

3.高度自適應(yīng)布局：高度自適應(yīng)




    
    demo
    


      
        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.水平垂直居中定位：已知寬高/未知寬高




    
    demo
    



    

    我是塊級元素




    
    demo
    



    

    我是塊級元素

2.2.2 flex布局

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

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

是的，它就是這么簡單，接下來把上面的布局實(shí)現(xiàn)一下，看它到底多方便

2列布局




 
css3轉(zhuǎn)換 




    
        固定
        自適應(yīng)
    

    
        不固定
        自適應(yīng)

圣杯布局




 
css3轉(zhuǎn)換 


    
    #header
    
        
            # left
        
        
            # center
        
        
            # right
        
    
    #footer

高度自適應(yīng)布局





  
  flex 嵌套 之 高度自適應(yīng)
  



  flex 嵌套布局

  外容器 自適應(yīng)內(nèi)容的區(qū)域 ... ...
   
                      
      
        內(nèi)容器 - 頭部信息
      
                               
        內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 

          內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 

            內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 
內(nèi)容溢出滾動部分 

      
      
        內(nèi)容器 - 尾部信息

水平垂直居中




 
css3轉(zhuǎn)換 



    

    我是塊級元素

除了上面的這些布局，他還能實(shí)現(xiàn)均勻布局，非均勻布局




 
css3轉(zhuǎn)換 




    
        cell1
        cell2
        cell3
    
    
        cell1
        cell2




 
css3轉(zhuǎn)換 




    
        flex
        flexxxxxx
        sdfsdf
    


    
        flex
        flexxxxxx
        sdfsdf
    

    
        flex
        flexxxxxx
        sdfsdf

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

然后再來說說瀏覽器適配問題，通過百度流量統(tǒng)計(jì)研究院的數(shù)據(jù)可知，現(xiàn)在瀏覽器主流尺寸是:

PC端(1920*1080)

移動端(640*360)

在開發(fā)網(wǎng)頁時(shí)，針對PC端和移動端適配有2種方案

①寫兩套代碼，用JS判斷設(shè)備后使用對應(yīng)代碼

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

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

function intiSize(){

//獲取當(dāng)前瀏覽器窗口寬度(這里的實(shí)質(zhì)就是body寬度)

var win_w=document.body.offsetWidth;

//定義變量 var fontSize;

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

else{

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

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

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

//瀏覽器窗口寬度發(fā)生變化時(shí)條用這個(gè)函數(shù)，方便與改變窗口大小時(shí)候調(diào)試

onresize=intiSize;intiSize();

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

ok，css布局完畢

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

GPU云服務(wù)器云服務(wù)器 css布局 css布局教程學(xué)習(xí)css布局從哪里看大數(shù)據(jù)

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114618.html

發(fā)表評論

登陸后可評論

0條評論

thekingisalwaysluc

男|高級講師

我要關(guān)注我要私信

TA的文章

從布局看css基礎(chǔ)

閱讀 2243·2019-08-30 10:51
CSS之輕松搞懂外邊距合并/外邊距折疊

閱讀 796·2019-08-30 10:50
移動端的text-overflow多行文本溢出顯示省略號(…)

閱讀 1479·2019-08-30 10:49
用vuepress搭建一個(gè)夠自己用的博客(帶評論功能)

閱讀 3140·2019-08-26 13:55
NPM酷庫：intl-messageformat，多語言處理

閱讀 1607·2019-08-26 11:39
如何實(shí)現(xiàn)一個(gè)腳手架進(jìn)階版（Vue-cli v2.9學(xué)習(xí)篇）

閱讀 3423·2019-08-26 11:34
ES6知識拾遺，再讀ES6入門書籍總匯

閱讀 1951·2019-08-23 18:30
模板字符串

閱讀 3390·2019-08-23 18:22

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

從布局看css基礎(chǔ)

flex 嵌套布局

內(nèi)容器 - 頭部信息

內(nèi)容器 - 尾部信息

相關(guān)文章

css float與學(xué)習(xí)騎自行車

CSS 終極之戰(zhàn)：Grid VS Flexbox

**HTML+CSS復(fù)習(xí)之CSS基礎(chǔ)篇**

CSS及布局

發(fā)表評論

0條評論

thekingisalwaysluc

男|高級講師

TA的文章