好程序员web前端技术分享css3旧版弹性盒

为什么80%的码农都做不了架构师?>>>   hot3.png

 好程序员web前端技术分享css3旧版弹性盒

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-。

转载于:https://my.oschina.net/530504/blog/3046606

你可能感兴趣的:(好程序员web前端技术分享css3旧版弹性盒)