HTML5-布局

position：坐标位置的描述

absolute  绝对坐标  

relative 相对坐标

总结：标签视图布局使用方法：外部相对，内部绝对

top: 距上边距离 、bottom: 距底部距离

left：距左边距离、right：距右边距离

例：style="font-size: 16px;position:absolute;right:5px; top: 30px; left: 20px;"

不做其他设置的时候

左右放置 <span id=""></span> 组合文档中的行内元素

上下放置 <div id=""></div> 

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。

padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

padding: 0; 内边距

margin: 0; 外边距

padding-top:20px; 上内边距

padding-right:30px; 右内边距

padding-bottom:30px; 下内边距

padding-left:20px; 左内边距

padding:1px 四边统一内边距

padding:1px1px 上下,左右内边距

padding:1px1px1px 上,左右,下内边距

padding:1px1px1px1px 上,右,下,左内边距

Flexbox 由伸缩容器 和 伸缩项目组成。通过设置元素的 display属性为flex或inline-flex可以得到一个伸缩容器。

设置为flex的容器被渲染为一个块级元素，

而设置为inline-flex的容器则渲染为一个行内元素。

创建了一个伸缩容器。

.flex-container {

display: -webkit-flex;

display: flex;

}

伸缩容器的属性

flex-direction 伸缩流的方向 方向设置

允许你更改伸缩容器的主轴方向。该值表示伸缩项目根据书写模式的方向布局。默认是从左至右，从上到下。其他的值如下：

row（默认）:默认是从左至右，从上到下

• row-reverse: 主轴起点和主轴终点交换。如果书写模式是从左至右，伸缩项目则是从右往左显示。
• column: 主轴和侧轴交换。如果书写系统是垂直的，那么伸缩项目也是垂直显示的。
• column-reverse: 和 column 一样，但是方向相反。

justify-content 主轴对齐 竖列    

用于调整主轴上伸缩项目的位置。可能的值为：

• flex-start (默认)
• flex-end

center、space-between、space-around

• justify-content:center;
• -webkit-justify-content:center;   
• 加-webkit是为了适配不同的浏览器

align-items 侧轴对齐 横列

用于调整侧轴上伸缩项目的位置。可能的值有：

• flex-start (默认)
• flex-end

center、baseline、stretch

align-items:center;

-webkit-align-items:center;

align-items是一个和justify-content相呼应的属性。

flex-wrap 伸缩行换行

目前为止，每个伸缩容器都有且只有一个伸缩行。

可以为伸缩容器创建多个伸缩行，控件大小固定时，一行显示不了，就会自动换行显示。这个属性可能的值：

• nowrap (默认)
• wrap 在一个伸缩行容不下所有伸缩项目时，伸缩项目会换行到一条新增的伸缩行上。新增的伸缩行根据侧轴的方向添加。
• wrap-reverse 在一个伸缩行容不下所有伸缩项目时，伸缩项目会换行到一条新增的伸缩行上。新增的伸缩行根据侧轴的反方向添加。

align-content 堆栈伸缩行

align-content会更改flex-wrap的行为。它和align-items

相似，但是不是对齐伸缩项目，它对齐的是伸缩行。可能你已经想到了，它接受的值也很相似：

• stretch (默认)
• flex-start
• flex-end
• center
• space-between
• space-around

这些值与justify-content和align-items中的值一样。

flex-flow 伸缩方向与换行

flex-flow是flex-direction和flex-wrap的缩写。

flex-flow: [flex-direction] [flex-wrap]

伸缩项目的属性

一个伸缩项目是一个伸缩容器的子元素。伸缩容器中的文本也被视为一个伸缩项目。

伸缩项目中内容与普通流一样。举例来说，当一个伸缩项目被设置为浮动，你依然可以在这个伸缩项目中放置一个浮动元素。

伸缩项目都有一个 主轴长度(Main Size)和一个 侧轴长度(Cross Size)。主轴长度是伸缩项目在主轴上的尺寸。侧轴长度是伸缩项目在侧轴上的尺寸。或者说，一个伸缩项目的宽或高取决于伸缩容器的轴，可能就是它的主轴长度或侧轴长度。

下面的属性可以调整伸缩项目的行为：

order 显示顺序

order 是最简单明了的属性。设置伸缩项目的 order 可以调整它们渲染时的顺序。在这个例子中，我们设置其中一个伸缩项目的

order 为 -1，于是它被提前到了其他伸缩项目的最前面。

  如果需要文档顺序和显示顺序不同时，这就是个很有用的功能了。

margin 外边距

你应该对margin: auto;

的这种用法很熟悉。在伸缩盒中，它也能做同样的事情，但是更加强大。一个 "auto" 的 margin 会合并剩余的空间。它可以用来把伸缩项目挤到其他位置。

这里我们在第一个伸缩项目上声明了margin-right: auto;导致了所有的剩余空间被合并到那个元素的右边去了：

.flex-item:first-child {    

margin-right: auto; 

}

重现经典CSS布局中的圣杯：真·垂直居中：

margin: auto;

align-self 侧轴对齐

伸缩项目的align-self属性会覆盖该项目的伸缩容器的align-items属性。它的值和align-items一样：

• stretch (默认)
• flex-start
• flex-end
• center、base、line
• 我在例子中包含了2个基线对齐的伸缩项目，因为它们的对齐需要互相作用。

flex 伸缩性

现在我们终于要开始设置伸缩盒的伸缩性了。flex

指定了一个伸缩项目该如何分配主轴上的剩余空间。

让我们一次把所有的常见值都看一遍吧。

flex: [number]

这个语法指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例。

在这个例子中，第一个伸缩项目占用了 2/4 的剩余空间，而另外两个各占用了 1/4 的剩余空间。

flex: initial

一个flex属性值被设为initial的伸缩项目，在有剩余空间的情况下不会有任何变化，但是在必要的情况下会被收缩。

flex: auto

一个flex属性值被设为auto的伸缩项目，会根据主轴自动伸缩以占用所有剩余空间。

flex: none

一个flex属性值被设为none的伸缩项目，在任何情况都不会发生伸缩。

auto目前仅在 Opera 12.11尚有效，在 Chrome 23.0.1271.95上无效。你可以通过使用

flex: 1;来达到一样的效果。

flex 缩写flex也可以把

flex-grow,

flex-shrink, 

flex-basis

这3个缩写为1个声明：

flex: [flex-grow] [flex-shrink] [flex-basis]

大多数情况下没必要使用这种语法。另外，它需要一个更容易理解的伸缩算法。如果你觉得自己挺厉害的，到规范里看一下吧。

当然你也可以将

flex-grow,

flex-shrink, 

flex-basis

作为单个属性分开来设置。但我强烈反对这种方式：当使用flex缩写时，即使没有某些值没有设置也能获得更合理的默认值。

visibility 叠加项目

当该值生效时，应用

visibility: collapse;和

visibility: hidden;与

display: none;的效果是不一样的。

如果是collapse，该元素会影响伸缩容器的侧轴长度，但不会被现实或占用主轴的空间。如果你想动态添加或移除伸缩项目又不会影响伸缩容器的侧轴长度，这将会非常有用。

目前为止，

visibility: collapse;还没有被让任何浏览器正确的实现。现在还和

visibility: hidden;实现着一样的效果。我希望能尽快得到改观。