移动端页面布局
一、流式布局(百分比布局)
概念：流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，所以也称百分比自适应布局。流式布局实现方法是，将CSS固定像素宽度换算为百分比宽度。
换算格式：目标元素宽度 / 父盒子宽度 = 百分数宽度
没有流式布局
<html lang="en"> <head> <style> body > * { width: 980px;height: auto;margin: 0 auto;margin-top: 10px; border: 1px solid #000;padding: 5px; } header {height: 50px;} section {height: 300px;} footer {height: 30px;} section > * {height: 100%;border: 1px solid #000;float: left;} aside {width: 250px;} article {width: 700px;margin-left: 10px;} </style> </head> <body> <header>header</header> <nav>nav</nav> <section> <aside>aside</aside> <article>article</article> </section> <footer>footer</footer> </body> </html>
流式布局
<!DOCTYPE html> <html lang="en"> <head> <style> body > * { /* 自由设置 ，最先是980px*/ width: 95%; height: auto; margin: 0 auto; margin-top: 10px; border: 1px solid #000; padding: 5px; } header { height: 50px; } section { height: 300px; } footer { height: 30px; } section > * { height: 100%; border: 1px solid #000; float: left; } /*目标元素宽度 / 父盒子宽度 = 百分数宽度*/ /* 250/980=25% */ aside { width: 25%; } /*目标元素宽度 / 父盒子宽度 = 百分数宽度*/ /* 700/980=70% */ article { width: 70%; margin-left: 1%; } </style> </head> <body> <header>header</header> <nav>nav</nav> <section> <aside>aside</aside> <article>article</article> </section> <footer>footer</footer> </body> </html>
二、弹性盒布局
使用弹性盒布局(Flexible Box)可以轻松地创建响应式网页布局，为盒状(块)模型增加了灵活性。弹性盒改进了块模型，既不使用浮动，也不会合并弹性盒容器与其内容之间的外边距。它是一种非常灵活的布局方法，就像几个小盒子放在一个大盒子里一样，相对独立，容易设置。
1.弹性盒布局常用属性(display) 属性
- 默认值为inline，这意味着此元素会被显示为一个内联元素，在元素前后没有换行符；
- 如果设置display的值为flex，则表示用于指定弹性盒的容器；
- 如果设置display的值为none，则表示此元素不会被显示。
例如
<html lang="en"> <head> <style> .box { display: flex; border: 1px solid #999; height: 60px; padding: 4px; background: #ddd; } .box>div { margin: 2px; padding: 2px; border: 1px solid #999; background: #fff; } </style> </head> <body> <div class="box"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> </div> </body> </html>
2.弹性盒布局常用属性(flex-flow)
当使用flex-flow时，其值是flex-direction的值和flex-wrap的值的组合。例如，将flex-direction设为row，将flex-wrap设为nowrap等价于flex-flow：row nowrap
3.弹性盒布局常用属性(flex-direction)
flex-direction用于调整主轴的方向，可以调整为横向或者纵向。默认情况下是横向，此时横轴为主轴，纵轴为侧轴；如果改为纵向，则纵轴为主轴，横轴为侧轴，取值如表所示。
4.弹性盒布局常用属性(flex-wrap)
flex-wrap用于让弹性盒元素在必要的时候拆行(超出的自动换行)
5.弹性盒布局常用属性(justify-content)
justify-content属性能够设置子元素在主轴方向的排列方式
6.弹性盒布局常用属性(align-items)
align-items属性用于定义子元素在侧轴上的对齐方式，其取值如表所示。
7.弹性盒布局常用属性(order)
order属性用于设置子元素出现的排列顺序。数值越小，排列将会越靠前，默认为0。
.a { order: 2; } .b { order: 3; } .c { order: 1; }
8.弹性盒布局常用属性(flex)
flex属性是flex-grow(扩展比率)、flex-shrink(收缩比率)和flex-basis(宽度，像素值)的简写形式，能够设置子元素的伸缩性。
.a { flex-grow: 1; /* 也可以写成 flex: 1; */ }
9.弹性盒布局常用属性(align-self)
align-self属性取值有auto、flex-start、flex-end、center、baseline、stretch，每个值的意义与align-items属性的取值类似。需要注意的是，在使用弹性盒布局时，以下属性不起作用。
- 多列布局中的column-*属性对弹性子元素无效。
- float和clear对弹性子元素无效。使用float会导致display属性计算为block。
- vertical-align属性对弹性子元素的对齐无效。
