您的位置：首页 > Web前端 > CSS

css3盒布局

2016-04-19 21:19 519 查看
自适应布局这些在css3还么有出现的时候需要用比较复杂的代码来实现，然而现在用两行代码就可以轻松搞定，是不是棒棒！


css3里的盒布局可以帮我们轻松布局，来看哈吧~

开启盒布局模式兼容版：

display:box;
//目前还没有浏览器支持box

display:-moz-box;
//兼容gecko内核

display:-webkit-box;
//兼容webkit内核

简单介绍一下关于布局的属性：

1.元素的布局方向：

box-orient:horizontal(水平) | vertical(垂直) | inline-axis(横向) | block-axis(纵向) | inherit;

2.元素的布局顺序：

box-direction:normal(正常顺序) | reverse(反向) | inherit;

3.调整元素的位置：

box-ordinal-group:<integer>;

4.弹性空间分配：

box-flex:<value>;

5.盒子水平对齐方式：

box-pack:start | end | center | justify(子元素散开显示，额外的空间平均分配给子元素);

6.盒子垂直对齐方式：

box-align:start | end | center | baseline | stretch;

7.盒子阴影：box-shadow
参数为：阴影类型，水平偏移，垂直偏移，模糊半径，阴影大小，阴影颜色；

ps:当只设置模糊半径，阴影大小，阴影颜色时，水平偏移和垂直偏移为0时，具有描边效果。

8.盒子尺寸的计算方法：box-sizing
参数为：box-padding | content-content | box-border | inherit;

9.盒子溢出内容处理：

overflow-x: visible | auto | scroll | no-display | no-content | hidden;

overflow-y: visible | auto | scroll | no-display | no-content | hidden;


示例代码如下：

<style>
#area{
background:#efefef;
height:400px;
min-width:500px;
max-width:650px;
display:-moz-box;
display:-webkit-box;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-flex:1;
-moz-box-flex:1;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
}
header,footer{padding:15px;background:lightseagreen;}
section{line-height:20px;background:greenyellow;}
</style>
</head>
<body>
<div id="area">
<header>开启盒布局</header>
<section>
<article>
<h2>盒布局</h2>
<p>内容：盒布局是css3发展的新型布局方式，它比传统的浮动布局更加完善，更加灵活，而使用方法却极为简单。</p>
</article>
</section>
<footer>页脚：2011@</footer>
</div>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航