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;实现着一样的效果。我希望能尽快得到改观。