Sunly

自适应设计

自动识别屏幕宽度，并对其作出相应的调整的网页设计。
自适应布局等于使用固定分割点来进行布局。
当固定宽度与流动宽度结合起来时，自适应布局就是一种响应式设计，而不仅仅是它的一种替代方法。
响应式布局
响应式网页设计是自适应网页设计的子集。响应式网页设计指的是页面的布局（流动网格、灵活的图像- 及媒介查询）。总体目标就是去解决设备多样化问题。
响应式布局等于流动网格布局。
使用方案：
- 媒体查询（根据不同的设备宽度和高度来加载不同的样式，根据固定分割点来布局）
- viewport标签（控制视窗口的大小，将视口宽度设置为设备宽度；并且把最初的缩放比例设置为1；还可以设置用户是否可以进行页面大小缩放）；
  - width：可设定数值，或者指定为 device-width
  - height：可设定数值，或者指定為 device-height
  - initial-scale：第一次进入页面的初始比例
  - minimum-scale：允许缩小最小比例
  - maximum-scale：允许放大最大比例
  - user-scalable：允许使用者缩放，1 or 0 (yes or no)
- 不要使用绝对宽度，要使用百分比；
- 字体不要使用绝对大小，要使用相对大小rem或em；
- 流动布局（使用float进行布局）
  - float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
- Flexbox弹性盒子布局
- 图片的自动缩放，等比缩放
  Flexbox弹性盒子布局
  The flexbox layout is a new CSS3 module for page layout. It can lay out items in a direction (left-to-right or top-to-bottom) with the items stretching to take up the available space. Quite complicated layouts can be built up by nesting flex containers.
A flexbox layout is made up of a flex container and flex items inside the container.
A flex container is a HTML element with its display property set to flex. Any item inside a flex container is automatically a flex item.

使用flexbox弹性布局，可以实现以下方案：

定宽和自适应相结合，并可以设置自适应的盒子分享剩余宽度的百分比；
轻松实现多栏布局

基本属性和用法：
flex container 的属性设置

display(flex container)
```
flex inline-flex
```

flex-direction(flex-container)

flex-direction: row|row-reverse|column|column-reverse

flex-wrap(flex-container)
```
flex-wrap: nowrap|wrap|wrap-reverse
```
flex-flow(flex container)
这是flex-direction和flex-wrap属性的缩写版本，默认值是row nowrap
justify-content(flex-container)
```
justify-content: flex-start|flex-end|center|space-between|space-around
```
相当于水平方向调节对齐方式
与内部元素设置了margin: auto 相对影响

align-items（flex container）

align-items: flex-start | flex-end | center | baseline | stretch

align-content(flex container)
```
align-content: flex-start|flex-end|center|space-around|stretch
```
相当于竖直方向上调整对齐方式;多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-item的属性设置

order(order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。)
flex-grow(flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大)
flex-shrink(flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小)
flex-basis(flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间)
flex。flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self(align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。)

两栏布局和三栏布局

使用两边浮动，中间设置margin自适应的方法；
使用两边绝对定位，中间设置margin自适应的方法；
两侧自适应，中间定宽
等高设置，主要使用清除浮动来设置

问题来了：

中间的框不设置宽度自动适应剩余的宽度，是继承了父元素吗？可以自动拥有宽度？

两栏布局和三栏布局的基本要点：

首先，这种布局方式要结合浮动或者绝对定位来实现；
其次，浮动元素和绝对定位元素脱离了文档流，主元素要设置margin来空留地方
主元素的宽度不用设置，是自适应的，自适应的元素是不能够设置成浮动或者是绝对定位的。多个自适应的框要根据分配给不同的框不同的百分比；
margin的设定可以使float或者绝对定位元素存在于任何地方（正负值都有用）；

等高布局的要点：

首先，因为整个外框清楚了浮动，整个大外框的高度会随着盒内最高的元素增加；在外面看，就像是另一个盒子（同级的）随着一个盒子的增高而增高，但是两个盒子的顺序是不能变的。

垂直居中的实现方法

使用display:absolute来实现；设置margin-left,margin-top,top,left;

参考资料：

自适应设计

响应式布局

Flexbox弹性盒子布局

两栏布局和三栏布局

垂直居中的实现方法