弹性盒模型&响应式布局

1.移动端布局与PC端的区别

1. PC端最常用的布局是固定宽度（980px,960px,1000px,1200px）;移动端网页是可以横屏看也可以竖屏看，屏幕的分辨率不同，固定宽度的布局必然是不可行的。
2. PC端布局考虑更多的是浏览器的兼容性；移动端，考虑更多的是手机屏幕分辨率不同的兼容性。
3. PC端浏览器内核有很多，Trident(IE内核)，Gecko(Firefox内核)，Webkit(Safari内核,Chrome内核原型)。移动端的浏览器内核比较单一，基本都是webkit以及webkit相关的blink。
4. 动画效果处理上，PC端要考虑IE的兼容性，通常用JS做动画的通用性会好一些，但相比CSS3却牺牲了较大的性能，而在手机端，如果要做一些动画、特效等，第一选择肯定是CSS3，既简单，效率又高。

浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同。

浏览器的内核是分为两个部分的，一是渲染引擎，另一个是JS引擎。现在JS引擎比较独立，内核更加倾向于说渲染引擎。

1、Trident内核：IE，又称为IE内核或MSHTML，此内核只能用于Windows平台，且不是开源的。同时IE版本比较多，存在很多的兼容性问题。IE11开始，初步支持WebGL技术。IE8的JavaScript引擎是Jscript，IE9开始用Chakra。

2、Gecko内核：Firefox，故常被称为firefox内核它是开源的，最大优势是跨平台，在Microsoft Windows、Linux、MacOs X等主要操作系统中使用。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。

3、Webkit内核：Safari、曾经的Chrome，是开源的项目。

4、Presto内核：Opera，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了Presto。Opera现已改用Google Chrome的Blink内核。

5、Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了。

2. 流式布局

流式布局也叫百分比布局 ；把元素的宽,高,margin,padding不再用固定数值,改用百分比, 这样元素的宽,高,margin,padding会根据页面的尺寸随时调整已达到适应当前页面的目的.

属性	换算规则
宽度	本身的宽度/父级的宽度
高度	本身的高度/父级的高度
纵向定位	(top bottom)/父级的高度
横向定位	(left right)/父级的宽度
盒模型纵向	纵向值/父级的宽度
盒模型横向	横向值/父级的宽度

3. rem布局

除了IE8及更早版本外，所有浏览器均已支持rem ;    W3C官网描述是“font size of the root element”，即rem是相对于根元素。

如何使用:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1rem=16px。那么12px=0.75rem,10px=0.625rem。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将原来的px数值除以10，然后换上em作为单位就行了.

4. 响应式布局

为什么要使用响应式布局？

     响应式布局可以为不同终端的⽤户提供更加舒适的界⾯和更好的⽤户体验，⽽且随着⽬前⼤屏幕移动设备的普及，⽤⼤势所趋来形容也不为过。随着越来越多的设计师采⽤这个技术，我们不仅看到很多的创新，还看到了⼀些成形的模式。

什么是响应式布局？

    响应式布局是Ethan Marcotte在2010年5⽉份提出的⼀个概念，简⽽⾔之，就是⼀个⽹站能够兼容多个终端——⽽不是为每个终端做⼀个特定的版本。这个概念是为解决移动互联⽹浏览⽽诞⽣的。

优点： 面对不同分辨率设备灵活性强； 能够快捷解决多设备显示适应问题

缺点： 兼容各种设备工作量大，效率低下； 代码累赘，会出现隐藏无用的元素，加载时间加长 ；这是⼀种折衷性质的设计解决⽅案，多⽅⾯因素影响⽽达不到最佳效果。

响应式布局 设计— 媒体查询

什么是媒体查询？ 媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

浏览器支持情况： 到目前为止，CSS3 Media Queries得到了众多浏览器支持，除了IE6-8浏览器不支持之外，在所有现代浏览器中都可以完美支持。

如何兼容IE8 使用条件注释使用条件注释使代码仅针对Internet Explorer。

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

媒体查询语法

内部引入:@media mediatype and|not|only (media feature) {     CSS-Code; }

外部引入:<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

关键字 ：and：用于合并多个媒体属性或合并媒体属性与媒体类型，需前后表达式都为真时，整条查询结果才为真（也就是“且”的意思)；only：用来定某种特定的媒体类型；not：使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作。

mediatype： all 所有设备；print  用于打印机和打印预览；speech 应用于屏幕阅读器等发声设备；screen 用于电脑屏幕，平板电脑，智能手机等。

前缀 ：前缀min-  表示“至少”，即“大于等于” ；前缀max-  表示“至多”，即“小于等于” ；

media feature(参数) ：device-width/heigth  设备宽高(可加前缀) ； width/height  浏览器可视宽度(可加前缀) ； orientation: portrait   竖屏  ； orientation: landscape  横屏 ； 

例：@media only screen and (min-width: 641px) and (max-width: 800px)  { .div1{        background-color: red; } }

屏幕为横屏： @media only screen and (orientation:landscape) {     样式代码 }

5. 弹性盒模型 

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end； 交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size 。

flex-direction　　容器内项目的排列方向(默认横向排列)　　

语法:     flex-direction: row | row-reverse | column | column-reverse;

row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse主轴为垂直方向，起点在下沿

flex-wrap　　容器内项目换行方式

语法:      flex-wrap: nowrap | wrap | wrap-reverse;

nowrap(默认)不换行，将里面的元素宽高均分父级宽高显示、wrap换行（第一行在上方）和wrap-reverse换行, 且前面的行在底部

flex-flow　　以上两个属性的简写方式

语法:      flex-flow: <flex-direction>  <flex-wrap>;

justify-content　　项目在主轴上的对齐方式

语法:     justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start：默认值）：左对齐；flex-end：右对齐；center：居中；space-between：两端对齐，项目之间的间隔都相等；space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items　　项目在交叉轴上如何对齐

语法:      align-items: flex-start | flex-end | center | baseline | stretch;

flex-start 交叉轴的起点对齐；flex-end 交叉轴的终点对齐； center 交叉轴的中点对齐； baseline 项目的第一行文字的基线对齐； stretch 如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content　　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

语法:     align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目的属性：

order　　项目的排列顺序。数值越小，排列越靠前，默认为0。  语法: order: <integer>;  值：<integer>:数字

flex-grow　　项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

语法:      flex-grow: <number>; /* default 0 */  

如果所有子项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

flex-shrink　　项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

语法:     flex-shrink: <number>; /* default 1 */

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis　　在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

语法:     flex-basis: number | auto | initial | inherit;

flex　　是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

语法:     flex: flex-grow  flex-shrink  flex-basis|auto|none

align-self　　允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的

语法:      align-self: auto | flex-start | flex-end | center | baseline | stretch;

align-items属性，如果没有父元素，则等同于stretch。

总结：

Flex布局，可以简便、完整、响应式地实现各种页面布局 ； 部分属性并不是W3C标准属性，在使⽤之时，还是需要添加浏览器的私有属性，即浏览器的前缀。 如果元素不是弹性盒对象，则容器属性和子项目属性不起作用 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效