【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>

View Code

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

这里咱们以float以及flex实现了Header的基本布局，可是在flex的状况下，咱们感受span元素有点挤，由于他没有45px，事实上他只有32px
这个即是因为咱们前面的各类偏移致使，具体致使的缘由，我这里也在摸索，这里暂时不予讨论了，后面再专门放一个flex的学习博客

Header js的实现

事实上Header的应用与结构不止如此简单，关于其js实现，咱们后面点说吧，待续......

结语

咱们今天对Header的布局作了一些学习，由于小钗初学css，文中有不足请您提出，但愿对各位有帮助