HTML5中的弹性盒子 html设置弹性盒子

一、怪异盒模型

标准盒模型

怪异盒模型

css3 盒模型
box-sizing:
content-box		标准盒模型 (默认)
border-box		怪异盒模型

二、弹性盒子

display:  弹性盒子类型
box:将对象作为弹性伸缩盒显示。 (伸缩盒最老版本)
inline-box:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒最老版本)
flexbox:将对象作为弹性伸缩盒显示。 (伸缩盒过渡版本)
inline-flexbox:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒过渡版本)

flex:将对象作为弹性伸缩盒显示。 (伸缩盒最新版本)
inline-flex:将对象作为内联块级弹性伸缩盒显示。 (伸缩盒最新版本)

注：设置在父元素上 使用弹性盒 float vertical-align 多列都无效


弹性盒流向(设置父元素上)
flex-direction: 

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。


弹性盒子子元素顺序(设置在子元素上)
order:
负数靠前:(越小越前)
0为原始位置
正整数靠后(越大越后)

弹性盒子分配剩余空间(设置在子元素上)
flex-grow :
0为默认
分配提成   数字


检索弹性盒的收缩比率(子元素设置)
flex-shrink:
默认:1
数字

注：溢出时计算比例

检索弹性盒伸缩基准值(子元素设置)
flex-basis:
默认:auto
数值

注：计算数值比例


伸缩性（设置子元素上）
flex:
按提成分配 数字
0 0 百分比分配 


伸缩换行   (适用于父类容器上)
flex-wrap:

nowrap：当子元素溢出父容器时不换行。
wrap：当子元素溢出父容器时自动换行。
wrap-reverse：反转 wrap 排列。

伸缩流方向与换行(适用于父类容器上)
flex-flow: flex-direction属性值 flex-wrap属性值

将2个属性结合一起使用

主轴横向对齐 (设置在父类容器上)
justify-content:
flex-start：		起始对齐
flex-end：		结束对齐
center：		居中对齐
space-between: 	分开对齐
space-around:	分开左右边距对齐

主轴纵向对齐 (设置在父类容器上)
align-content:
flex-start：		起始对齐
flex-end：		结束对齐
center：		居中对齐
space-between: 	分开对齐
space-around:	分开左右边距对齐
strecth		上下拉升对齐

侧轴对齐
align-items (设置在父) 、align-self (设置在子) 
flex-start：		起始对齐
flex-end：		结束对齐
center：		居中对齐
baseline：		基线对齐
stretch：		上下拉升对齐

注:align-items基本与align-content差不多 就2个参数没有

三、多列布局

通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！

多列属性：
column-count
column-gap
column-rule

Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本不支持多列属性

创建多列
column-count: 数字
属性规定元素应该被分隔的列数
规定列之间的间隔
column-gap:数值
属性规定列之间的间隔
列规则
column-rule:
属性设置列之间的宽度、样式和颜色规则

四、响应式设计布局概念

媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会覆盖前面的样式

首先需要在

<

width=device-width:
initial-scale=1
maximum-scale=1
user-scalable=no

@media screen and (max-width:720px) and (min-width:320px){
body{
	background-
}
}
@media screen and (max-width:320px){
body{
	background-
}
}

Responsive Web Design

将已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，命名为响应式网页设计。
是一种针对任意设备对网页内容进行“完美”布局的一种显示机制。

优势
多终端视觉和操作体验非常风格统一
兼容当前及未来新设备
响应式
节约了开发成本，维护成本也降低很多

不足
兼容性：低版本浏览器兼容性有问题
移动带宽流量：相比较手机定制网站，流量稍大，
但比较加载一个完整
代码累赘，会出现隐藏无用的元素，加载时间加长
兼容各种设备工作量大

适用什么？
对于重内容的网站，例如形象展示，则比较适合使用响应式

不适用什么？
对于重功能的网站，如电子商务类，则更推荐使用独立移动网站

Meta标签定义 
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，
在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，
但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，
也可能比浏览器的可视区域要小。
(1)使用 viewport meta 标签在手机浏览器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
(2)隐藏苹果浏览器的工具栏和菜单栏。 全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" />
(3)设置Web App的状态栏（屏幕顶部栏）的样式
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />

@media 媒体查询  (media query)

基本语法
外联CSS语法
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" />
<link rel="stylesheet" href="mobile.css" media="screen and (max-width:320px)" />
<link rel=“stylesheet” href=“medium.css” media=“screen and
 (max-width:1024px) and (min-width:320px)" />