博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

css3---布局相关的样式

Posted on 2013-05-20 08:34  Amy-lover  阅读(242)  评论(0)  编辑  收藏  举报

一、使用多栏布局方式column-count

　　1.1 可以将一个元素中的内容分为多栏显示，并且确保各栏中内容的底部对齐，各栏的宽度都是相等的，栏与栏之间的宽度也是相等的，但是不能指定每栏分别显示什么，比较适合显示文章内容，但不适合安排网页中的各元素

div#d01{
    -moz-column-count:2;
    width:200px;/*这个宽度是该div内部多个栏的总宽度*/
    background:#FCF;    
}
<div id="d01">
    <p>ds dsa da dad a dds</p>   
</div>

　　1.2 栏之间的间隔column-gap

div#d01{
    -moz-column-count:2;
    -moz-column-gap:2em;/*栏与栏之间的间隙*/
    -moz-column-width:20em;
    /*单独设置每一栏的宽度*/
    background:#FCF;    
}

 

 　　1.3 栏与栏之间的间隔线column-rule

div#d01{
    -moz-column-count:2;
    -moz-column-gap:2em;
    -moz-column-width:20em;
    background:#FCF;
    -moz-column-rule: 1px solid #006;
}

 

 二、盒布局display:-moz-box;box-flex:1;

　　2.1 自适应窗口的弹性盒布局：假设三个div元素的总宽度等于浏览器窗口的宽度，而且随着窗口的缩放这三个div的宽度随着改变

.wrap{
    width:100%;
    display:-moz-box;/*外部元素设置为盒布局*/
    display:-webkit-box;
    display:box;
}
.One{
    background:orange;
    -moz-box-flex:3;/*box-flex主要让子容器针对父容器的宽度按一定规则进行划分,占了父元素的3/(3+2+1)*/
    -webkit-box-flex:3;
    box-flex:3;
}
.Two{
    background:purple;
    -moz-box-flex:2;/*box-flex主要让子容器针对父容器的宽度按一定规则进行划分,占了父元素的2/(3+2+1)*/
    -webkit-box-flex:2;
    box-flex:2;
}
.Three{
    -moz-box-flex:1;
    -webkit-box-flex:1;/*box-flex主要让子容器针对父容器的宽度按一定规则进行划分,占了父元素的1/(3+2+1)*/
    box-flex:1;
    background:green;
}
<body>
    <div class="wrap">
        <div class="One">01</div>
        <div class="Two">02</div>
        <div class="Three">03</div>
    </div>
</body>

 　　2.2 改变弹性盒模型中元素显示的顺序-moz-box-ordinal-group:1;

　　为每一个子元素都指定box-ordinal-group属性，属性对应的值是元素显示时的顺序序号

.wrap{
    width:100%;
    display:-moz-box;/*外部元素设置为盒布局*/
    display:-webkit-box;
    display:box;
}
.One{
    -moz-box-ordinal-group:2;
    background:orange;
    -moz-box-flex:3;/*box-flex主要让子容器针对父容器的宽度按一定规则进行划分,占了父元素的3/(3+2+1)*/
    -webkit-box-flex:3;
    box-flex:3;
}
.Two{
    -moz-box-ordinal-group:1;
    background:purple;
    -moz-box-flex:2;/*box-flex主要让子容器针对父容器的宽度按一定规则进行划分,占了父元素的2/(3+2+1)*/
    -webkit-box-flex:2;
    box-flex:2;
}
.Three{
    -moz-box-ordinal-group:3;
    -moz-box-flex:1;
    -webkit-box-flex:1;/*box-flex主要让子容器针对父容器的宽度按一定规则进行划分,占了父元素的1/(3+2+1)*/
    box-flex:1;
    background:green;
}

 

　　2.3 改变元素排列的方向(水平<--->垂直)box-orient

　　　　为父元素指定box-orient属性，其值为vertical或者horizontal

.wrap{
    -moz-box-orient:vertical;
    width:100%;
    display:-moz-box;/*外部元素设置为盒布局*/
    display:-webkit-box;
    display:box;
}

 

　　2.4 使用盒布局时，利用box-pack和box-align属性来指定元素中文字、图像及子元素水平方向和垂直方向上的对齐方式

　　firefox：-moz-box-pack；-moz-box-align，safari和chrome：-webkit-pack；-webkit-align

属性值 排列方式 box-pack的含义 box-align的含义
start 水平 左对齐 顶部对齐
center 水平 居中 居中
end 水平 右对齐 底部对齐
start 垂直 顶部对齐 左对齐
center 垂直 居中 居中
end 垂直 底部对齐 右对齐 
.box{
    -moz-box-align:center;/*垂直居中*/
    -moz-box-pack:center;/*水平居中*/
    width:100px;
    display:-moz-box;/*元素设置为盒布局*/
    display:-webkit-box;
    display:box;
    height:400px;
    background:#C9F;
}