小小千想和您聊一聊

当前位置: 首页> 技术分享> 旧版弹性盒

旧版弹性盒

  1、display:box

  说明:

  (必须加前缀)设置弹性盒

  使用如下属性,必须在父代设置display:box;

  2、box-orient

  说明:

  在父级上设置该属性,则子代按水平排列或竖直排列。

  注:所有主流浏览器不支持该属性,必须加上前缀。

  1)horizontal 水平排列,子代总width=父级width。若父级固定宽度,则子代设置的width无效,子代会撑满父级宽度。

  2)vertical 垂直排列,子代总height=父级height。若父级固定高度,则子代设置的height无效,子代会撑满父级高度。

  3、 box-pack

  说明:

  在父级设置,子代的水平对齐方式。(父容器里面主轴对齐方式)

  1)start 水平左对齐

  2)end 水平右对齐

  3)center 水平居中对齐

  4、 box-align

  说明:

  在父级设置,子代的垂直对齐方式。(父容器里面子容器侧轴对齐方式)

  1)start 垂直顶部对齐

  2)end 垂直底部对齐

  3)center 垂直居中对齐

  4)stretch 拉伸子代的高度,与父级设置的高度一致。子代height无效。

  5、 box-direction

  说明:

  在父级上设置该属性,确认子代的排列顺序。

  1)normal 默认值,子代按html顺序排列

  2)reverse 反序

  6、 box-flex

  说明:

  1)占父级元素宽度的number份

  2)若子元素设置固定宽度,则该子元素应用固定宽度,其他未设置固定宽度的字元素将余下的父级宽度(父级-已设置固定宽度的子代元素的总宽度按 number占份数

  3)若子元素有margin值,则按余下(父级宽度-子代固定总宽度-总margin值)宽度占number份

  四、CSS3 多列

  CSS多列(属性要加前缀)

  1、column-count

  说明:

  属性规定元素应该被分隔的列数

  适用于:除table外的非替换块级元素, table-cells, inline-block元素

  2、column-gap

  说明:

  属性规定列之间的间隔大小

  3、column-rule

  说明:

  设置或检索对象的列与列之间的边框。复合属性。

  column-rule-color规定列之间规则的颜色。

  column-rule-style规定列之间规则的样式。

  column-rule-width规定列之间规则的宽度。

  4、column-fill

  说明:

  设置或检索对象所有列的高度是否统一

  auto:列高度自适应内容

  balance:所有列的高度以其中最高的一列统一(默认值)

  5、column-span

  说明:

  设置或检索对象元素是否横跨所有列。

  none:不跨列

  all:横跨所有列

  6、column-width

  说明:

  设置或检索对象每列的宽度

  7、columns

  说明:

  设置或检索对象的列数和每列的宽度。复合属性

  <' column-width '> || <' column-count '>

  例:columns:100px 3;

  注释:

  Internet Explorer 10 和 Opera 支持多列属性。

  Firefox 需要前缀 -moz-。

  Chrome 和 Safari 需要前缀 -webkit-。

上一篇:HTML5工具初识之网页编辑器

下一篇:CSS3 渐变

QQ技术交流群

千锋HTML5官方①群
791201477

加入群聊