#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;
}
}
