CSS 3 盒子属性

#box1{
width: 100px;height: 40px;
border: 1px solid black;
(1)内容沾满盒子的处理方式 

所有的都要添加前缀,以便更好的浏览器兼容 
 1,overflow-x:
　　overflow-y: ;

visible: 超出内容的部分不剪裁正常显示;
hidden:剪裁掉 如果只有一个方向上设置hidden另外一个方向上添加滚轮,支持滑动显示
scroll: 剪裁内容提供滚轮机制
auto:如果内容超出范围 自动添加滚轮

panner

no-display: 如果内容不适合内容框,则删除整个框;
no-content:如果内容不适合内容框则隐藏整个框 目前支持的浏览器比较少

overflow-x:auto ;
overflow-y: auto;

 

 

盒子对齐方式

box-align:设置盒子中子元素的对齐方式
start:子元素的顶部与父容器的顶部边框对齐
end:子元素的顶部与父容器的底部边框对齐
center:居中对齐
baseline:基线对齐
stretch:拉伸对齐

display: -webkit-box;
-webkit-box-align: start;

 

box-direction: 设置盒子中子元素的排列方向
normal: 默认方向显示子元素
reverse:反方向显示子元素
inherit: 从子元素继承box-direction;

 

-webkit-box-direction: reverse;
-moz-box-direction: reverse;  添加前缀以便更好的兼容

 

box-flex:可伸缩属性
盒子的柔性:值越大

-webkit-box-flex: 1;

 

box-orient
horizontal: x轴排列;
vertical: y轴排列;
inline-axis: 行内轴(horizontal)
block-axis: 块轴(vertical)

-webkit-box-orient: vertical;

 

box-pack  水平行中从左向右排列子元素值
start:默认的 全靠左
end: 全部靠末尾;
center:居中全部
justify:各自平均分配空间

-webkit-box-pack: start;

 

 

.one{
 box-ordinal-group 设置子元素显示的次序
值越大 越靠前

-webkit-box-ordinal-group: 2;
}

.two{
-webkit-box-ordinal-group: 1;
}

 

 

多列布局 
p{
width: 960px;
background-color: lightgray;
margin: auto;
(1)列数
-webkit-column-count: 3;
-moz-column-count: 3;

(2)设置列宽
如果总列数*列宽>整体宽度 列数-1

-webkit-column-width: 400;
-moz-column-width: 400;

(3)列间隔
-webkit-column-gap: 100px;
-moz-column-gap: 100px;
}

 

 

}

 

转载于:https://www.cnblogs.com/wuyaxing/p/6097850.html