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

 好程序员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-。

上一篇:需要xmanager软件来处理x11转发请求报错解决


下一篇:急速上线 Serverless 钉钉机器人“防疫精灵”