css3盒子模型
浏览数：40 /
时间：2015年06月09日
- -webkit-box-orient
box-orient属性用于设置盒模型内部元素的排列方式，详细如下：
- inline-axis：从左向右排列（默认值）
- horizontal：水平排列
- vertical：垂直排列
- block-axis：从上向下排列
- -webkit-box-sizing
box-sizing属性用于改变容器的盒模型组成方式
- content-box: 此值维持css2.1盒模型的组成模式，border|padding|content {element width=border+padding+content}
- border-box: 此值改变css2.1盒模型组成模式，content|border|padding {element width=content}
- -webkit-box-direction
box-direction 属性用于改变容器的显示顺序,使之反向排列。默认的情况下，block 级元素是按照加载顺序从上到下排列， inline 级元素是从左到右排列的。下面来看看box-direction：
- reverse：block 级元素显示在最顶部，最后加载的 inline 级元素显示在左边
- -webkit-box-pack
box-pack 属性可以用于设置子容器在水平轴上的空间分配方式，它共有四种可能值：start，end，justify 和 center。这些值的含义如下：
- start ：所有子容器都分布在父容器的左侧，右侧留空
- end ：所有子容器都分布在父容器的右侧，左侧留空
- justify ：所有子容器平均分布（默认值）
- center ：平均分配父容器剩余的空间（能压缩子容器的大小，并且有全局居中的效果）
- -webkit-box-align
box-align 属性用于管理子容器在竖轴上的空间分配方式，共有五个值：start，end，center，baseline 和 stretch。
- start ：子容器从父容器顶部开始排列
- end ：子容器从父容器底部开始排列
- center ：子容器横向居中（有点奇怪）
- baseline ：所有子容器沿同一基线排列（很难理解）
- stretch ：所有子容器和父容器保持同一高度（默认值）
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
