日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何實現(xiàn)html5+css3中的布局與Header-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關如何實現(xiàn)html5+css3中的布局與Header，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站建設、網(wǎng)站制作網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元黃梅做網(wǎng)站,已為上家服務,為黃梅各地企業(yè)和個人服務,聯(lián)系電話:18980820575

我們在手機上布局一般是這個樣子的：

如何實現(xiàn)html5+css3中的布局與Header

其中頭部對整個mobile的設計至關重要，而且坑也很多：

① 一般來說整個header是以fixed布局，fixed這個產(chǎn)物在移動端來說本身坑就非常多

② 在Hybrid應用中，Header很多時候扮演了不一樣的角色，首先要完成以webview(window)為容器的功能，又要調(diào)用native提供的接口

Hybrid中Header的實現(xiàn)往往是一個難點，主要原因是同一套接口，要保證H5站點與native處于不一樣的環(huán)境調(diào)用相同的接口，完成不同的功能

③ 若是Hybrid中采用native提供的頭會導致mask不能全屏遮蓋，并且Header定制會變難；但是在Hybrid中采用H5提供的Header的話，萬一js報錯，便會導致毀滅性的假死，用戶除了關閉進程，就出不來了

PS：這里以一個簡單的a標簽便可以解決js錯誤導致的假死問題，這里與我們今天的內(nèi)容無關，不予擴展

顯然，以上的內(nèi)容與今天的文章沒有一毛錢關系，我們今天的主要內(nèi)容是：

用float于Flexbox兩種方式實現(xiàn)我們的Header

小釵初學CSS有很多不足，理解也有錯誤，請您指正，并且感謝左盟主的指導

CSS3的布局

CSS的布局的演化

最初的布局主要依賴于表格，表格主要的問題是：

① 不靈活

② 效率低，要整個渲染結(jié)束才會顯示

發(fā)展到CSS2.X系列，div+css的說法大行其道，很大程度上說，布局對重構(gòu)來說，變得比較簡單，但是由于塊級元素的特性，多列布局仍舊讓人很頭疼

div不能多列，span什么的又不適合作為布局元素，于是多列布局一般采用float實現(xiàn)，使用float就要清楚浮動

偶爾多列布局會使用定位屬性（事實上大范圍的布局推薦定位元素），但是小范圍的絕對定位會不太靈活

CSS3中引入了一些新的布局機制，顯然在PC瀏覽器中不適合，但幸運的是我是移動前端，所以不存在！??！

CSS3盒模型-box-sizing

盒模型的概念我這里不再贅述，在瀏覽器中，元素都會被當做一個盒模型，CSS3中新增了一些概念對盒模型進行了補充

我們在實際工作中經(jīng)常會出現(xiàn)這樣的代碼，從而引起元素溢出，并導致橫向滾動條：

代碼如下:

    
   
   
 

如何實現(xiàn)html5+css3中的布局與Header如何實現(xiàn)html5+css3中的布局與Header

因為對容器元素來說，他的高度只有100px（事實上他這里還有2px的border，實際占據(jù)102px）

所以說，即設置width，又設置margin等屬性，直接導致其真實width溢出了，但是塊級元素本身就是100%鋪開的，這里不用設置

但是很多時候，我們又會設置，往往導致什么橫向滾動條什么的BUG，為了解決這個問題，CSS3提出了一個box-sizing特性

代碼如下:

box-sizing: content-box | border-box

① content-box，為默認值，與CSS2.X保持一致

② border-box，此屬性的設置后，會表現(xiàn)與IE7表現(xiàn)一次，如果設置了width、margin等值，width會被重置，margin仍然會產(chǎn)生影響

PS：事實上，無論是事件冒泡還是IE盒模型，都是有其意義的

代碼如下:

    
  
  

如何實現(xiàn)html5+css3中的布局與Header如何實現(xiàn)html5+css3中的布局與Header

float布局中的bfc

我們這里以一個例子做說明，然后再逐步分析，我們現(xiàn)在來看一個簡單的頭部布局

代碼如下:



  
  Blade Demo
  
    .fl { float: left; }
    .fr { float: right; }
    .tc { text-align: center; }
    span { display: inline-block; color: #099fde; }
  


  
    后退 更多 首頁
    
      我是標題
  

以上代碼一個不同的地方是.tc的類，一個overflow一個沒有設置整個產(chǎn)生的結(jié)果是這樣的

如何實現(xiàn)html5+css3中的布局與Header

如何實現(xiàn)html5+css3中的布局與Header

以上是一種header的常用布局，但是為其中塊級元素設置overflow與否卻直接影響了tc的真實寬度，這其中的原因是什么呢

前面我們說過了，在網(wǎng)頁中每個元素會表現(xiàn)得像一個盒子，不同的類型（display）會產(chǎn)生不同的結(jié)果

我們在js中一個對象會被其所在執(zhí)行環(huán)境影響，或者說一個js對象不可能脫離其執(zhí)行環(huán)境存在，整個元素對于瀏覽器而言事實上也是一個程序?qū)ο螅灿衅湟蕾噷ο?，這里所謂的對象便是我們的格式化上下文

BFC為塊級格式化上下文，塊級元素的布局會受其影響，他是一個獨立的渲染區(qū)，這又像一個沙箱，內(nèi)部不會對外部進行污染

并不是所有的塊級元素都會形成對應的格式化上下文，這里與js一致，我們一般處于window環(huán)境下，有需要才會處于某個函數(shù)執(zhí)行環(huán)境；當然，我們便有方法令某一個元素創(chuàng)建其獨立的環(huán)境

元素觸發(fā)（生成）BFC：

① 根元素本身便會創(chuàng)建BFC

② float不為none時

③ 定位元素，脫離文檔流的元素

④ display為inline-block或者flex的元素（IE7模擬行內(nèi)塊級元素的花招是zoom:1+inline）

⑤ overflow不為visible的元素

回到我們上面的例子，我們每一個span為inline-block漂浮元素，所以各自維護著獨立的BFC，那么BFC布局又有什么規(guī)則呢，我這里挑幾個關鍵的來說：

① BFC內(nèi)部的元素會每行一個的排布，這里參考塊級元素的布局

② 元素間上下距離由margin決定，并且同一BFC中的元素會外邊距疊加

③ 每個元素的左邊（包含margin-left），與包含塊（padding內(nèi)區(qū)域）的左邊框接觸，適用于float元素

④ BFC區(qū)域不會與浮動元素重疊，BFC內(nèi)部的浮動元素會參與高度計算（很關鍵）

一般情況下我們的div為塊級元素，處于根元素的BFC下，所以其應該橫向鋪開，100%寬，正如上圖

但是設置overflow后，情況有所變化，div元素生成了獨立的BFC空間，整個布局方式會發(fā)生變化

根據(jù)上述標準，BFC區(qū)域不與浮動元素BFC區(qū)域重疊，整個div所占空間便被浮動元素擠壓，這是其寬度變化的原因

這里是div觸發(fā)bfc與不觸發(fā)造成的區(qū)別，文字圍繞浮動元素便是好的說明：

如何實現(xiàn)html5+css3中的布局與Header

如何實現(xiàn)html5+css3中的布局與Header

Flexbox簡介

簡單來說，支持情況各位不必關注，移動端支持的蠻好的，不必為那5%的份額做讓步，并且就現(xiàn)在國內(nèi)手機的更新?lián)Q代速度，用就好了。

Flexbox（伸縮布局）的提出，為的是讓根元素中的子項目的寬度變化可以總是填充整個元素，換句話說子項目的布局總能表現(xiàn)的很好：

① 不會溢出容器元素

② 不會換行

③ 項目多了，比較擠的時候會自動變小

比如這種場景：

如何實現(xiàn)html5+css3中的布局與Header

如何實現(xiàn)html5+css3中的布局與Header

木有申請的Flexbox，這個功能的實現(xiàn)是非常討厭的，而且就算resize神馬的，他都不會換行，正是居家必備良藥啊！

從這里各位可能有所發(fā)現(xiàn)，F(xiàn)lexbox的表現(xiàn)，和表格有些相似，都不會溢出容器

容器與項目

現(xiàn)在display由多出了一個常用屬性：flex | inline-flex ；如前面所言，設置后會為容器創(chuàng)建獨立的格式化上下文，內(nèi)中的布局便特殊化了

容器的屬性包括：

① 伸縮流方向flex-direction，

① 伸縮流方向flex-direction，默認值為row
② 伸縮行換行flex-wrap，伸縮項目有時也會溢出容器，該屬性可設置項目是單行還是多行，默認不換
PS：容器還有一個flex-flow可同時設置上述屬性
③ ......
容器項目可設置屬性包括：
① 顯示順序
② 側(cè)軸對齊，一種是align-items，可以設置匿名項目與所有項目對齊保持一致，另一種是align-self用以為單獨項目上復寫默認對齊，對于匿名項目align-self值與關聯(lián)的伸縮容器的align-items相同
③ 伸縮性，用以改變項目改變其高度或?qū)挾忍硌a可用的空間....
④ 伸縮行.....
PS：上面的介紹，我在用該知識點時候木有碰到，我也壓根就沒懂......
我這里作為小白在實際使用中，用到比較關鍵的屬性是用于item項目的flex屬性，他決定項目的寬度，擴展比率，收縮比率

代碼如下:


  .flex { display: flex; } 
    


  
項目一

  
項目二

  
項目三

  
項目四

如何實現(xiàn)html5+css3中的布局與Header

容器元素設置為flex后，內(nèi)部上下問格式化對象被改變，所以內(nèi)部布局遵循flex規(guī)律，就算是塊級元素div也橫向排列了，這里若是為其子元素設置flex屬性

代碼如下:

.flex>div { flex: 1; }

如何實現(xiàn)html5+css3中的布局與Header

那么每個元素所占區(qū)域便是一樣，真實善莫大焉?。。?！如果手動給項目二設置flex: 2，并且手動給項目三設置寬度，便會這樣

代碼如下:



 
項目一

 
項目二

 
項目三

 
項目四


如何實現(xiàn)html5+css3中的布局與Header

這里項目三的寬度被min-width定死了，直接影響了其它項目的寬度，但是無論如何，項目二的width都是其它基本項目的兩倍

PS：前段時間在三星一瀏覽器上flex:2被解析成了flex:0.5，我看著棒子的手機也是醉了

代碼如下:



  
  
  CodePen - A Pen by ericlva
  


  
    
  • A
    • 
    
  • B
    • 
    
  • C
    • 
  

    主軸總寬度600px,子元素設置了flex-basis，相加后200+300+500=1000px,子元素溢出400px

    子元素設置了收縮因子，所以總寬度為：200*1+300*2+500*3=2300px;
    子元素溢出量分別為：
    A:200*1/2300=2/23,然后用2/23*400≈35
    B:300*2/2300=6/23,然后用6/23*400≈104
    C:500*3/2300=2/23,然后用15/23*400≈261
    實際寬度減去溢出量,最后ABC寬度分別為：200-35=165, 300-104=196,500-261=239
    補充：flex:flex-grow(擴展比率) flex-shrink(收縮比率) flex-basis(基準值)
    PS：這里感謝左盟主指導，CSS真難！！

    前面的概念略復雜，不適合我這種初學者，這里再做一個變形，將div項目的flex: 1去掉，似乎回到了第一個場景，但是我們做一點改變

    代碼如下:

    

  
  Blade Demo
  
    * { box-sizing: border-box; font-size: 12px; }
    .flex { display: flex; }
    .flex > div { width: 50px; height: 40px; }
  


  
    
    
      項目一
    
    
      項目二
               項目三
        
          項目四
      

    如何實現(xiàn)html5+css3中的布局與Header

    以上是我對flex的粗淺認識，這些東西后面再補足吧。

    Header布局的實現(xiàn)float實現(xiàn)布局

    Header一般是左中右布局，右邊的項目不定，我這里先以float實現(xiàn)

    代碼如下:

    


  
  Blade Demo
  
    body, button, input, select, textarea { font: 400 14px/1.5 Arial, "Lucida Grande" ,Verdana, "Microsoft YaHei" ,hei; }
    body, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h6, h7, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }
    body { background: #f5f5f5; }
    ul, ol { list-style: none; }
    h2, h3, h4, h5, h6, h7 { font-size: 100%; font-weight: 500; }
    h2 { font: 600 1.286em/2 Tahoma; } 
   h2 { font: 600 1.286em/2 Tahoma; }
   h3 { font: 600 1.143em/2 Tahoma; }
   h4 { font: 600 1em/1.5 Tahoma; }
   address, cite, dfn, em, var, i { font-style: normal; font-weight: 400; }
   
   body { padding: 10px; }
   h2 { font-size: 18px; }
   h2, h3, h4 { line-height: 2; font-weight: normal; }
   .fl { float: left; }
   .fr { float: right; }
   .tc { text-align: center; }
   
   .cui-header { height: 44px; line-height: 44px; background-color: #099fde; color: #fff; }
   
   .cui-header > span { width: 44px; height: 44px; display: inline-block; }
   .cui-header .cui-title { height: 44px; line-height: 44px; overflow: hidden; }
   .cui-icon-more { display: inline-block; width: 30px; height: 30px; line-height: 26px; vertical-align: middle; text-align: center; }
   .cui-icon-more::before { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background-color: #fff; box-shadow: 10px 0 #fff, -10px 0 #fff; }
 


 
   返回
   
   home
   
     標題
 


       h3 { font: 600 1.143em/2 Tahoma; }
    h4 { font: 600 1em/1.5 Tahoma; }
    address, cite, dfn, em, var, i { font-style: normal; font-weight: 400; }
    
    body { padding: 10px; }
    h2 { font-size: 18px; }
    h2, h3, h4 { line-height: 2; font-weight: normal; }
    .fl { float: left; }
    .fr { float: right; }
    .tc { text-align: center; }
    
    .cui-header { height: 44px; line-height: 44px; background-color: #099fde; color: #fff; }
    
    .cui-header > span { width: 44px; height: 44px; display: inline-block; }
    .cui-header .cui-title { height: 44px; line-height: 44px; overflow: hidden; }
    .cui-icon-more { display: inline-block; width: 30px; height: 30px; line-height: 26px; vertical-align: middle; text-align: center; }
    .cui-icon-more::before { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background-color: #fff; box-shadow: 10px 0 #fff, -10px 0 #fff; }
  


  
    返回
    
    home
    
      標題
  

    http://sandbox.runjs.cn/show/vpbscpn4

    然后再以flex做實現(xiàn)

    代碼如下:

        Blade Demo      *:not(img), *:before, *:after { box-sizing: border-box; }    body, button, input, select, textarea { font: 400 14px/1.5 Arial, "Lucida Grande" ,Verdana, "Microsoft YaHei" ,hei; }    body, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h6, h7, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }    body { background: #f5f5f5; }    ul, ol { list-style: none; }    h2, h3, h4, h5, h6, h7 { font-size: 100%; font-weight: 500; }    h2 { font: 600 1.286em/2 Tahoma; }    h3 { font: 600 1.143em/2 Tahoma; }    h4 { font: 600 1em/1.5 Tahoma; }    address, cite, dfn, em, var, i { font-style: normal; font-weight: 400; }        body { padding: 10px; }    h2 { font-size: 18px; }    h2, h3, h4 { line-height: 2; font-weight: normal; }    .fl { float: left; }    .fr { float: right; }    .tc { text-align: center; }        .cui-header { height: 44px; line-height: 44px; background-color: #099fde; color: #fff; display: flex; align-items: center; }        .cui-header > span { width: 45px; height: 45px; }    .cui-header .cui-title { height: 44px; line-height: 44px; overflow: hidden; width: 100%;  }    .cui-icon-more { display: inline-block; width: 30px; height: 30px; line-height: 26px; vertical-align: middle; text-align: center; }    .cui-icon-more::before { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background-color: #fff; box-shadow: 10px 0 #fff, -10px 0 #fff; }        返回          標題    home          

    這里我們以float以及flex實現(xiàn)了Header的基本布局，但是在flex的情況下，我們感覺span元素有點擠，因為他沒有45px，事實上他只有32px
    這個便是由于我們前面的各種偏移導致，具體導致的原因，我這里也在摸索，這里暫時不予討論了，后面再專門放一個flex的學習博客

    Header js的實現(xiàn)

    事實上Header的應用與結(jié)構(gòu)不止如此簡單，關于其js實現(xiàn)，我們后面點說吧，待續(xù)......

    看完上述內(nèi)容，你們對如何實現(xiàn)html5+css3中的布局與Header有進一步的了解嗎？如果還想了解更多知識或者相關內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。


    標題名稱：如何實現(xiàn)html5+css3中的布局與Header-創(chuàng)新互聯(lián)
    分享網(wǎng)址：http://www.dlmjj.cn/article/hcpss.html

    其他資訊