html5+css3之CSS中的布局與Header的實(shí)現(xiàn)
我要評(píng)論我們?cè)谑謾C(jī)上布局一般是這個(gè)樣子的：
其中頭部對(duì)整個(gè)mobile的設(shè)計(jì)至關(guān)重要，而且坑也很多：
① 一般來(lái)說(shuō)整個(gè)header是以fixed布局，fixed這個(gè)產(chǎn)物在移動(dòng)端來(lái)說(shuō)本身坑就非常多
② 在Hybrid應(yīng)用中，Header很多時(shí)候扮演了不一樣的角色，首先要完成以webview(window)為容器的功能，又要調(diào)用native提供的接口
Hybrid中Header的實(shí)現(xiàn)往往是一個(gè)難點(diǎn)，主要原因是同一套接口，要保證H5站點(diǎn)與native處于不一樣的環(huán)境調(diào)用相同的接口，完成不同的功能
③ 若是Hybrid中采用native提供的頭會(huì)導(dǎo)致mask不能全屏遮蓋，并且Header定制會(huì)變難；但是在Hybrid中采用H5提供的Header的話，萬(wàn)一js報(bào)錯(cuò)，便會(huì)導(dǎo)致毀滅性的假死，用戶除了關(guān)閉進(jìn)程，就出不來(lái)了
PS：這里以一個(gè)簡(jiǎn)單的a標(biāo)簽便可以解決js錯(cuò)誤導(dǎo)致的假死問(wèn)題，這里與我們今天的內(nèi)容無(wú)關(guān)，不予擴(kuò)展
顯然，以上的內(nèi)容與今天的文章沒(méi)有一毛錢關(guān)系，我們今天的主要內(nèi)容是：
用float于Flexbox兩種方式實(shí)現(xiàn)我們的Header
小釵初學(xué)CSS有很多不足，理解也有錯(cuò)誤，請(qǐng)您指正，并且感謝左盟主的指導(dǎo)
CSS3的布局
CSS的布局的演化
最初的布局主要依賴于表格，表格主要的問(wèn)題是：
① 不靈活
② 效率低，要整個(gè)渲染結(jié)束才會(huì)顯示
發(fā)展到CSS2.X系列，div+css的說(shuō)法大行其道，很大程度上說(shuō)，布局對(duì)重構(gòu)來(lái)說(shuō)，變得比較簡(jiǎn)單，但是由于塊級(jí)元素的特性，多列布局仍舊讓人很頭疼
div不能多列，span什么的又不適合作為布局元素，于是多列布局一般采用float實(shí)現(xiàn)，使用float就要清楚浮動(dòng)
偶爾多列布局會(huì)使用定位屬性（事實(shí)上大范圍的布局推薦定位元素），但是小范圍的絕對(duì)定位會(huì)不太靈活
CSS3中引入了一些新的布局機(jī)制，顯然在PC瀏覽器中不適合，但幸運(yùn)的是我是移動(dòng)前端，所以不存在?。?！
CSS3盒模型-box-sizing盒模型的概念我這里不再贅述，在瀏覽器中，元素都會(huì)被當(dāng)做一個(gè)盒模型，CSS3中新增了一些概念對(duì)盒模型進(jìn)行了補(bǔ)充
我們?cè)趯?shí)際工作中經(jīng)常會(huì)出現(xiàn)這樣的代碼，從而引起元素溢出，并導(dǎo)致橫向滾動(dòng)條：
<div class="wrapper" style="width: 100px; border: 1px solid black;">
<div style="width: 100px; height: 100px; padding: 10px; margin: 10px; border: 1px; background: gray;">
</div>
</div>
因?yàn)閷?duì)容器元素來(lái)說(shuō)，他的高度只有100px（事實(shí)上他這里還有2px的border，實(shí)際占據(jù)102px）
所以說(shuō)，即設(shè)置width，又設(shè)置margin等屬性，直接導(dǎo)致其真實(shí)width溢出了，但是塊級(jí)元素本身就是100%鋪開(kāi)的，這里不用設(shè)置
但是很多時(shí)候，我們又會(huì)設(shè)置，往往導(dǎo)致什么橫向滾動(dòng)條什么的BUG，為了解決這個(gè)問(wèn)題，CSS3提出了一個(gè)box-sizing特性
① content-box，為默認(rèn)值，與CSS2.X保持一致
② border-box，此屬性的設(shè)置后，會(huì)表現(xiàn)與IE7表現(xiàn)一次，如果設(shè)置了width、margin等值，width會(huì)被重置，margin仍然會(huì)產(chǎn)生影響
PS：事實(shí)上，無(wú)論是事件冒泡還是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>
我們這里以一個(gè)例子做說(shuō)明，然后再逐步分析，我們現(xiàn)在來(lái)看一個(gè)簡(jiǎn)單的頭部布局
<html>
<head>
<meta charset="utf-8" />
<title>Blade Demo</title>
<style type="text/css">
.fl { float: left; }
.fr { float: right; }
.tc { text-align: center; }
span { display: inline-block; color: #099fde; }
</style>
</head>
<body>
<div class="header">
<span class="fl">后退</span> <span class="fr">更多</span> <span class="fr">首頁(yè)</span>
<div class="tc">
我是標(biāo)題</div>
</div>
</body>
</html>
以上代碼一個(gè)不同的地方是.tc的類，一個(gè)overflow一個(gè)沒(méi)有設(shè)置整個(gè)產(chǎn)生的結(jié)果是這樣的
http://sandbox.runjs.cn/show/pok0fp78
以上是一種header的常用布局，但是為其中塊級(jí)元素設(shè)置overflow與否卻直接影響了tc的真實(shí)寬度，這其中的原因是什么呢
前面我們說(shuō)過(guò)了，在網(wǎng)頁(yè)中每個(gè)元素會(huì)表現(xiàn)得像一個(gè)盒子，不同的類型（display）會(huì)產(chǎn)生不同的結(jié)果
我們?cè)趈s中一個(gè)對(duì)象會(huì)被其所在執(zhí)行環(huán)境影響，或者說(shuō)一個(gè)js對(duì)象不可能脫離其執(zhí)行環(huán)境存在，整個(gè)元素對(duì)于瀏覽器而言事實(shí)上也是一個(gè)程序?qū)ο?，他也有其依賴?duì)象，這里所謂的對(duì)象便是我們的格式化上下文
BFC為塊級(jí)格式化上下文，塊級(jí)元素的布局會(huì)受其影響，他是一個(gè)獨(dú)立的渲染區(qū)，這又像一個(gè)沙箱，內(nèi)部不會(huì)對(duì)外部進(jìn)行污染
并不是所有的塊級(jí)元素都會(huì)形成對(duì)應(yīng)的格式化上下文，這里與js一致，我們一般處于window環(huán)境下，有需要才會(huì)處于某個(gè)函數(shù)執(zhí)行環(huán)境；當(dāng)然，我們便有方法令某一個(gè)元素創(chuàng)建其獨(dú)立的環(huán)境
元素觸發(fā)（生成）BFC：
① 根元素本身便會(huì)創(chuàng)建BFC
② float不為none時(shí)
③ 定位元素，脫離文檔流的元素
④ display為inline-block或者flex的元素（IE7模擬行內(nèi)塊級(jí)元素的花招是zoom:1+inline）
⑤ overflow不為visible的元素
回到我們上面的例子，我們每一個(gè)span為inline-block漂浮元素，所以各自維護(hù)著獨(dú)立的BFC，那么BFC布局又有什么規(guī)則呢，我這里挑幾個(gè)關(guān)鍵的來(lái)說(shuō)：
① BFC內(nèi)部的元素會(huì)每行一個(gè)的排布，這里參考?jí)K級(jí)元素的布局
② 元素間上下距離由margin決定，并且同一BFC中的元素會(huì)外邊距疊加
③ 每個(gè)元素的左邊（包含margin-left），與包含塊（padding內(nèi)區(qū)域）的左邊框接觸，適用于float元素
④ BFC區(qū)域不會(huì)與浮動(dòng)元素重疊，BFC內(nèi)部的浮動(dòng)元素會(huì)參與高度計(jì)算（很關(guān)鍵）
一般情況下我們的div為塊級(jí)元素，處于根元素的BFC下，所以其應(yīng)該橫向鋪開(kāi)，100%寬，正如上圖
但是設(shè)置overflow后，情況有所變化，div元素生成了獨(dú)立的BFC空間，整個(gè)布局方式會(huì)發(fā)生變化
根據(jù)上述標(biāo)準(zhǔn)，BFC區(qū)域不與浮動(dòng)元素BFC區(qū)域重疊，整個(gè)div所占空間便被浮動(dòng)元素?cái)D壓，這是其寬度變化的原因
這里是div觸發(fā)bfc與不觸發(fā)造成的區(qū)別，文字圍繞浮動(dòng)元素便是最好的說(shuō)明：
簡(jiǎn)單來(lái)說(shuō)，支持情況各位不必關(guān)注，移動(dòng)端支持的蠻好的，不必為那5%的份額做讓步，并且就現(xiàn)在國(guó)內(nèi)手機(jī)的更新?lián)Q代速度，用就好了。
Flexbox（伸縮布局）的提出，為的是讓根元素中的子項(xiàng)目的寬度變化可以總是填充整個(gè)元素，換句話說(shuō)子項(xiàng)目的布局總能表現(xiàn)的很好：
① 不會(huì)溢出容器元素
② 不會(huì)換行
③ 項(xiàng)目多了，比較擠的時(shí)候會(huì)自動(dòng)變小
比如這種場(chǎng)景：
木有申請(qǐng)的Flexbox，這個(gè)功能的實(shí)現(xiàn)是非常討厭的，而且就算resize神馬的，他都不會(huì)換行，正是居家必備良藥??！
從這里各位可能有所發(fā)現(xiàn)，F(xiàn)lexbox的表現(xiàn)，和表格有些相似，都不會(huì)溢出容器
容器與項(xiàng)目現(xiàn)在display由多出了一個(gè)常用屬性：flex | inline-flex ；如前面所言，設(shè)置后會(huì)為容器創(chuàng)建獨(dú)立的格式化上下文，內(nèi)中的布局便特殊化了
容器的屬性包括：
① 伸縮流方向flex-direction，
① 伸縮流方向flex-direction，默認(rèn)值為row
② 伸縮行換行flex-wrap，伸縮項(xiàng)目有時(shí)也會(huì)溢出容器，該屬性可設(shè)置項(xiàng)目是單行還是多行，默認(rèn)不換
PS：容器還有一個(gè)flex-flow可同時(shí)設(shè)置上述屬性
③ ......
容器項(xiàng)目可設(shè)置屬性包括：
① 顯示順序
② 側(cè)軸對(duì)齊，一種是align-items，可以設(shè)置匿名項(xiàng)目與所有項(xiàng)目對(duì)齊保持一致，另一種是align-self用以為單獨(dú)項(xiàng)目上復(fù)寫默認(rèn)對(duì)齊，對(duì)于匿名項(xiàng)目align-self值與關(guān)聯(lián)的伸縮容器的align-items相同
③ 伸縮性，用以改變項(xiàng)目改變其高度或?qū)挾忍硌a(bǔ)可用的空間....
④ 伸縮行.....
PS：上面的介紹，我在用該知識(shí)點(diǎn)時(shí)候木有碰到，我也壓根就沒(méi)懂......
我這里作為小白在實(shí)際使用中，用到比較關(guān)鍵的屬性是用于item項(xiàng)目的flex屬性，他決定項(xiàng)目的寬度，擴(kuò)展比率，收縮比率
<style type="text/css">
.flex { display: flex; }
</style>
<div class="flex">
<div>項(xiàng)目一</div>
<div>項(xiàng)目二</div>
<div>項(xiàng)目三</div>
<div>項(xiàng)目四</div>
</div>
容器元素設(shè)置為flex后，內(nèi)部上下問(wèn)格式化對(duì)象被改變，所以內(nèi)部布局遵循flex規(guī)律，就算是塊級(jí)元素div也橫向排列了，這里若是為其子元素設(shè)置flex屬性
那么每個(gè)元素所占區(qū)域便是一樣，真實(shí)善莫大焉?。。?！如果手動(dòng)給項(xiàng)目二設(shè)置flex: 2，并且手動(dòng)給項(xiàng)目三設(shè)置寬度，便會(huì)這樣
<div class="flex">
<div>項(xiàng)目一</div>
<div style="flex: 2;">項(xiàng)目二</div>
<div style="min-width: 200px; max-width: 300px;">項(xiàng)目三</div>
<div>項(xiàng)目四</div>
</div>
這里項(xiàng)目三的寬度被min-width定死了，直接影響了其它項(xiàng)目的寬度，但是無(wú)論如何，項(xiàng)目二的width都是其它基本項(xiàng)目的兩倍
PS：前段時(shí)間在三星一瀏覽器上flex:2被解析成了flex:0.5，我看著棒子的手機(jī)也是醉了
<html>
<head>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<title>CodePen - A Pen by ericlva</title>
<style>
* { margin: 0; padding: 0; }
ul { list-style: none; }
html, body { height: 100%; }
.font { width: 650px; margin: 10px auto; line-height: 20px; }
.mod { display: -webkit-flex; display: flex; width: 600px; margin: auto; text-align: center; }
.mod li:nth-of-type(1) { -webkit-flex: 1 1 200px; flex: 1 1 200px; background: red; }
.mod li:nth-of-type(2) { -webkit-flex: 1 2 300px; flex: 1 2 300px; background: green; }
.mod li:nth-of-type(3) { -webkit-flex: 1 3 500px; flex: 1 3 500px; background: yellow; }
</style>
</head>
<body>
<ul class="mod">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
</html>
主軸總寬度600px,子元素設(shè)置了flex-basis，相加后200+300+500=1000px,子元素溢出400px
子元素設(shè)置了收縮因子，所以總寬度為：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
實(shí)際寬度減去溢出量,最后ABC寬度分別為：200-35=165, 300-104=196,500-261=239
補(bǔ)充：flex:flex-grow(擴(kuò)展比率) flex-shrink(收縮比率) flex-basis(基準(zhǔn)值)
PS：這里感謝左盟主指導(dǎo)，CSS真難??！
前面的概念略復(fù)雜，不適合我這種初學(xué)者，這里再做一個(gè)變形，將div項(xiàng)目的flex: 1去掉，似乎回到了第一個(gè)場(chǎng)景，但是我們做一點(diǎn)改變
<html>
<head>
<meta charset="utf-8" />
<title>Blade Demo</title>
<style type="text/css">
* { box-sizing: border-box; font-size: 12px; }
.flex { display: flex; }
.flex > div { width: 50px; height: 40px; }
</style>
</head>
<body>
<div class="flex">
<div>
項(xiàng)目一</div>
<div >
項(xiàng)目二</div>
<div style="width: 100%;">
項(xiàng)目三</div>
<div>
項(xiàng)目四</div>
</div>
</body>
</html>
以上是我對(duì)flex的粗淺認(rèn)識(shí)，這些東西后面再補(bǔ)足吧。
Header布局的實(shí)現(xiàn)float實(shí)現(xiàn)布局Header一般是左中右布局，右邊的項(xiàng)目不定，我這里先以float實(shí)現(xiàn)
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Blade Demo</title>
<style type="text/css">
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, 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; }
body { background: #f5f5f5; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; }
h1 { font: 600 1.286em/2 Tahoma; }
h2 { font: 600 1.143em/2 Tahoma; }
h3 { font: 600 1em/1.5 Tahoma; }
address, cite, dfn, em, var, i { font-style: normal; font-weight: 400; }
body { padding: 10px; }
h1 { font-size: 18px; }
h1, h2, h3 { 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; }
</style>
</head>
<body>
<header class="cui-header">
<span class="cui-back fl tc">返回</span>
<span class="cui-more fr tc"><i class="cui-icon-more"></i></span>
<span class="cui-home fr tc">home</span>
<h1 class="cui-title tc">
標(biāo)題</h1>
</header>
</body>
</html>
http://sandbox.runjs.cn/show/vpbscpn4
然后再以flex做實(shí)現(xiàn)
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Blade Demo</title>
<style type="text/css">
*: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, 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; }
body { background: #f5f5f5; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; }
h1 { font: 600 1.286em/2 Tahoma; }
h2 { font: 600 1.143em/2 Tahoma; }
h3 { font: 600 1em/1.5 Tahoma; }
address, cite, dfn, em, var, i { font-style: normal; font-weight: 400; }
body { padding: 10px; }
h1 { font-size: 18px; }
h1, h2, h3 { 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; }
</style>
</head>
<body>
<header class="cui-header">
<span class="cui-back tc">返回</span>
<h1 class="cui-title tc">
標(biāo)題</h1>
<span class="cui-home tc">home</span>
<span class="cui-more tc"><i class="cui-icon-more"></i></span>
</header>
</body>
</html>
http://sandbox.runjs.cn/show/ummvcxx5
這里我們以float以及flex實(shí)現(xiàn)了Header的基本布局，但是在flex的情況下，我們感覺(jué)span元素有點(diǎn)擠，因?yàn)樗麤](méi)有45px，事實(shí)上他只有32px
這個(gè)便是由于我們前面的各種偏移導(dǎo)致，具體導(dǎo)致的原因，我這里也在摸索，這里暫時(shí)不予討論了，后面再專門放一個(gè)flex的學(xué)習(xí)博客
事實(shí)上Header的應(yīng)用與結(jié)構(gòu)不止如此簡(jiǎn)單，關(guān)于其js實(shí)現(xiàn)，我們后面點(diǎn)說(shuō)吧，待續(xù)......
結(jié)語(yǔ)我們今天對(duì)Header的布局做了一些學(xué)習(xí)，因?yàn)樾♀O初學(xué)css，文中有不足請(qǐng)您提出，希望對(duì)各位有幫助
相關(guān)文章
- 本文主要記錄了使用CSS3的float布局制作header的過(guò)程，從最初的結(jié)構(gòu)到最后的定稿的全部記錄以及修改過(guò)程，十分的詳細(xì)，給需要的小伙伴參考下2020-12-21
這篇文章主要介紹了css為什么要放在head標(biāo)簽中,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-12
