【HTML5&CSS3進階學習02】Header的實現·CSS中的佈局

時間 2019-11-18

標籤 html5&css3 html css 進階學習 header 實現佈局欄目 HTML 简体版

原文原文鏈接

前言

咱們在手機上佈局通常是這個樣子的：css

其中頭部對整個mobile的設計相當重要，並且坑也不少：html

① 通常來講整個header是以fixed佈局，fixed這個產物在移動端來講自己坑就很是多前端

② 在Hybrid應用中，Header不少時候扮演了不同的角色，首先要完成以webview(window)爲容器的功能，又要調用native提供的接口web

Hybrid中Header的實現每每是一個難點，主要緣由是同一套接口，要保證H5站點與native處於不同的環境調用相同的接口，完成不一樣的功能瀏覽器

③ 如果Hybrid中採用native提供的頭會致使mask不能全屏遮蓋，而且Header定製會變難；可是在Hybrid中採用H5提供的Header的話，萬一js報錯，便會致使毀滅性的假死，用戶除了關閉進程，就出不來了mvc

PS：這裏以一個簡單的a標籤即可以解決js錯誤致使的假死問題，這裏與咱們今天的內容無關，不予擴展app

顯然，以上的內容與今天的文章沒有一毛錢關係，咱們今天的主要內容是：ide

用float於Flexbox兩種方式實現咱們的Header函數

小釵初學CSS有不少不足，理解也有錯誤，請您指正，而且感謝左盟主的指導佈局

CSS3的佈局

CSS的佈局的演化

最初的佈局主要依賴於表格，表格主要的問題是：

① 不靈活

② 效率低，要整個渲染結束纔會顯示

發展到CSS2.X系列，div+css的說法大行其道，很大程度上說，佈局對重構來講，變得比較簡單，可是因爲塊級元素的特性，多列布局仍舊讓人很頭疼

div不能多列，span什麼的又不適合做爲佈局元素，因而多列布局通常採用float實現，使用float就要清楚浮動

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

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

CSS3盒模型-box-sizing

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

咱們在實際工做中常常會出現這樣的代碼，從而引發元素溢出，並致使橫向滾動條：

1 <div class="wrapper" style="width: 100px;  border: 1px solid black;">    
2   <div style="width: 100px; height: 100px; padding: 10px; margin: 10px; border: 1px;  background: gray;">
3   </div>
4 </div>

由於對容器元素來講，他的高度只有100px（事實上他這裏還有2px的border，實際佔據102px）

因此說，即設置width，又設置margin等屬性，直接致使其真實width溢出了，可是塊級元素自己就是100%鋪開的，這裏不用設置

可是不少時候，咱們又會設置，每每致使什麼橫向滾動條什麼的BUG，爲了解決這個問題，CSS3提出了一個box-sizing特性

box-sizing: content-box | border-box

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

② border-box，此屬性的設置後，會表現與IE7表現一次，若是設置了width、margin等值，width會被重置，margin仍然會產生影響

PS：事實上，不管是事件冒泡仍是IE盒模型，都是有其意義的

<div class="wrapper" style="width: 100px;  border: 1px solid black;">    
  <div style="width: 100px; height: 100px; padding: 10px; margin: 10px; border: 1px;  background: gray;box-sizing: border-box;">
  </div>
</div>

float佈局中的bfc

咱們這裏以一個例子作說明，而後再逐步分析，咱們如今來看一個簡單的頭部佈局

 1 <html>
 2 <head>
 3   <meta charset="utf-8" />
 4   <title>Blade Demo</title>
 5   <style type="text/css">
 6     .fl { float: left; }
 7     .fr { float: right; }
 8     .tc { text-align: center; }
 9     span { display: inline-block; color: #099fde; }
10   </style>
11 </head>
12 <body>
13   <div class="header">
14     <span class="fl">後退</span> <span class="fr">更多</span> <span class="fr">首頁</span>
15     <div class="tc">
16       我是標題</div>
17   </div>
18 </body>
19 </html>

以上代碼一個不一樣的地方是.tc的類，一個overflow一個沒有設置整個產生的結果是這樣的

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

以上是一種header的經常使用佈局，可是爲其中塊級元素設置overflow與否卻直接影響了tc的真實寬度，這其中的緣由是什麼呢

前面咱們說過了，在網頁中每一個元素會表現得像一個盒子，不一樣的類型（display）會產生不一樣的結果

咱們在js中一個對象會被其所在執行環境影響，或者說一個js對象不可能脫離其執行環境存在，整個元素對於瀏覽器而言事實上也是一個程序對象，他也有其依賴對象，這裏所謂的對象即是咱們的格式化上下文

BFC爲塊級格式化上下文，塊級元素的佈局會受其影響，他是一個獨立的渲染區，這又像一個沙箱，內部不會對外部進行污染

並非全部的塊級元素都會造成對應的格式化上下文，這裏與js一致，咱們通常處於window環境下，有須要纔會處於某個函數執行環境；固然，咱們便有方法令某一個元素建立其獨立的環境

元素觸發（生成）BFC：

① 根元素自己便會建立BFC

② float不爲none時

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

④ display爲inline-block或者flex的元素（IE7模擬行內塊級元素的花招是zoom:1+inline）

⑤ overflow不爲visible的元素

回到咱們上面的例子，咱們每個span爲inline-block漂浮元素，因此各自維護着獨立的BFC，那麼BFC佈局又有什麼規則呢，我這裏挑幾個關鍵的來講：

① BFC內部的元素會每行一個的排布，這裏參考塊級元素的佈局

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

③ 每一個元素的左邊（包含margin-left），與包含塊（padding內區域）的左邊框接觸，適用於float元素

④ BFC區域不會與浮動元素重疊，BFC內部的浮動元素會參與高度計算（很關鍵）

通常狀況下咱們的div爲塊級元素，處於根元素的BFC下，因此其應該橫向鋪開，100%寬，正如上圖

可是設置overflow後，狀況有所變化，div元素生成了獨立的BFC空間，整個佈局方式會發生變化

根據上述標準，BFC區域不與浮動元素BFC區域重疊，整個div所佔空間便被浮動元素擠壓，這是其寬度變化的緣由

這裏是div觸發bfc與不觸發形成的區別，文字圍繞浮動元素即是最好的說明：

Flexbox簡介

簡單來講，支持狀況各位沒必要關注，移動端支持的蠻好的，沒必要爲那5%的份額作讓步，而且就如今國內手機的更新換代速度，用就行了。

Flexbox（伸縮佈局）的提出，爲的是讓根元素中的子項目的寬度變化能夠老是填充整個元素，換句話說子項目的佈局總能表現的很好：

① 不會溢出容器元素

② 不會換行

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

好比這種場景：

木有申請的Flexbox，這個功能的實現是很是討厭的，並且就算resize神馬的，他都不會換行，正是居家必備良藥啊！

從這裏各位可能有所發現，Flexbox的表現，和表格有些類似，都不會溢出容器

容器與項目

如今display由多出了一個經常使用屬性：flex | inline-flex ；如前面所言，設置後會爲容器建立獨立的格式化上下文，內中的佈局便特殊化了

容器的屬性包括：

① 伸縮流方向flex-direction，

① 伸縮流方向flex-direction，默認值爲row
② 伸縮行換行flex-wrap，伸縮項目有時也會溢出容器，該屬性可設置項目是單行仍是多行，默認不換
PS：容器還有一個flex-flow可同時設置上述屬性
③ ......
容器項目可設置屬性包括：
① 顯示順序
② 側軸對齊，一種是align-items，能夠設置匿名項目與全部項目對齊保持一致，另外一種是align-self用覺得單獨項目上覆寫默認對齊，對於匿名項目align-self值與關聯的伸縮容器的align-items相同
③ 伸縮性，用以改變項目改變其高度或寬度添補可用的空間....
④ 伸縮行.....
PS：上面的介紹，我在用該知識點時候木有碰到，我也壓根就沒懂......
我這裏做爲小白在實際使用中，用到比較關鍵的屬性是用於item項目的flex屬性，他決定項目的寬度，擴展比率，收縮比率

 1 <style type="text/css">
 2   .flex { display: flex; } 
 3     
 4 </style>
 5 <div class="flex">
 6   <div>項目一</div>
 7   <div>項目二</div>
 8   <div>項目三</div>
 9   <div>項目四</div>
10 </div>

容器元素設置爲flex後，內部上下問格式化對象被改變，因此內部佈局遵循flex規律，就算是塊級元素div也橫向排列了，這裏如果爲其子元素設置flex屬性

.flex>div { flex: 1; }

那麼每一個元素所佔區域即是同樣，真實善莫大焉啊！！！若是手動給項目二設置flex: 2，而且手動給項目三設置寬度，便會這樣

1 <div class="flex">
2   <div>項目一</div>
3   <div style="flex: 2;">項目二</div>
4   <div style="min-width: 200px; max-width: 300px;">項目三</div>
5   <div>項目四</div>
6 </div>

這裏項目三的寬度被min-width定死了，直接影響了其它項目的寬度，可是不管如何，項目二的width都是其它基本項目的兩倍

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

 1 <html>
 2 <head>
 3   <meta charset="UTF-8">
 4   <meta name="google" value="notranslate">
 5   <title>CodePen - A Pen by ericlva</title>
 6   <style>
 7     * { margin: 0; padding: 0; }
 8     ul { list-style: none; }
 9     html, body { height: 100%; }
10     .font { width: 650px; margin: 10px auto; line-height: 20px; }
11     .mod { display: -webkit-flex; display: flex; width: 600px; margin: auto; text-align: center; }
12     .mod li:nth-of-type(1) { -webkit-flex: 1 1 200px; flex: 1 1 200px; background: red; }
13     .mod li:nth-of-type(2) { -webkit-flex: 1 2 300px; flex: 1 2 300px; background: green; }
14     .mod li:nth-of-type(3) { -webkit-flex: 1 3 500px; flex: 1 3 500px; background: yellow; }
15   </style>
16 </head>
17 <body>
18   <ul class="mod">
19     <li>A</li>
20     <li>B</li>
21     <li>C</li>
22   </ul>
23 </body>
24 </html>

主軸總寬度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去掉，彷佛回到了第一個場景，可是咱們作一點改變

 1 <html>
 2 <head>
 3   <meta charset="utf-8" />
 4   <title>Blade Demo</title>
 5   <style type="text/css">
 6     * { box-sizing: border-box; font-size: 12px; }
 7     .flex { display: flex; }
 8     .flex > div { width: 50px; height: 40px; }
 9   </style>
10 </head>
11 <body>
12   <div class="flex">
13     <div>
14       項目一</div>
15     <div >
16       項目二</div>
17     <div style="width: 100%;">
18       項目三</div>
19     <div>
20       項目四</div>
21   </div>
22 </body>
23 </html>

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

Header佈局的實現

float實現佈局

Header通常是左中右佈局，右邊的項目不定，我這裏先以float實現

 1 <!doctype html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8" />
 5   <title>Blade Demo</title>
 6   <style type="text/css">
 7     body, button, input, select, textarea { font: 400 14px/1.5 Arial, "Lucida Grande" ,Verdana, "Microsoft YaHei" ,hei; }
 8     body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 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; }
 9     body { background: #f5f5f5; }
10     ul, ol { list-style: none; }
11     h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; }
12     h1 { font: 600 1.286em/2 Tahoma; }
13     h2 { font: 600 1.143em/2 Tahoma; }
14     h3 { font: 600 1em/1.5 Tahoma; }
15     address, cite, dfn, em, var, i { font-style: normal; font-weight: 400; }
16     
17     body { padding: 10px; }
18     h1 { font-size: 18px; }
19     h1, h2, h3 { line-height: 2; font-weight: normal; }
20     .fl { float: left; }
21     .fr { float: right; }
22     .tc { text-align: center; }
23     
24     .cui-header { height: 44px; line-height: 44px; background-color: #099fde; color: #fff; }
25     
26     .cui-header > span { width: 44px; height: 44px; display: inline-block; }
27     .cui-header .cui-title { height: 44px; line-height: 44px; overflow: hidden; }
28     .cui-icon-more { display: inline-block; width: 30px; height: 30px; line-height: 26px; vertical-align: middle; text-align: center; }
29     .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; }
30   </style>
31 </head>
32 <body>
33   <header class="cui-header">
34     <span class="cui-back fl tc">返回</span>
35     <span class="cui-more fr tc"><i class="cui-icon-more"></i></span>
36     <span class="cui-home fr tc">home</span>
37     <h1 class="cui-title tc">
38       標題</h1>
39   </header>
40 </body>
41 </html>

View Code

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

而後再以flex作實現

 1 <!doctype html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8" />
 5   <title>Blade Demo</title>
 6   <style type="text/css">
 7     *:not(img), *:before, *:after { box-sizing: border-box; }
 8     body, button, input, select, textarea { font: 400 14px/1.5 Arial, "Lucida Grande" ,Verdana, "Microsoft YaHei" ,hei; }
 9     body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 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; }
10     body { background: #f5f5f5; }
11     ul, ol { list-style: none; }
12     h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; }
13     h1 { font: 600 1.286em/2 Tahoma; }
14     h2 { font: 600 1.143em/2 Tahoma; }
15     h3 { font: 600 1em/1.5 Tahoma; }
16     address, cite, dfn, em, var, i { font-style: normal; font-weight: 400; }
17     
18     body { padding: 10px; }
19     h1 { font-size: 18px; }
20     h1, h2, h3 { line-height: 2; font-weight: normal; }
21     .fl { float: left; }
22     .fr { float: right; }
23     .tc { text-align: center; }
24     
25     .cui-header { height: 44px; line-height: 44px; background-color: #099fde; color: #fff; display: flex; align-items: center; }
26     
27     .cui-header > span { width: 45px; height: 45px; }
28     .cui-header .cui-title { height: 44px; line-height: 44px; overflow: hidden; width: 100%;  }
29     .cui-icon-more { display: inline-block; width: 30px; height: 30px; line-height: 26px; vertical-align: middle; text-align: center; }
30     .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; }
31   </style>
32 </head>
33 <body>
34   <header class="cui-header">
35     <span class="cui-back tc">返回</span>
36     <h1 class="cui-title tc">
37       標題</h1>
38     <span class="cui-home tc">home</span>
39     <span class="cui-more tc"><i class="cui-icon-more"></i></span>
40     
41   </header>
42 </body>
43 </html>