css3盒布局

最新推荐文章于 2023-04-19 18:20:13 发布

fatansitic

最新推荐文章于 2023-04-19 18:20:13 发布

阅读量481

点赞数

分类专栏： css html

本文链接：https://blog.csdn.net/fatansitic/article/details/51193382

版权

html 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

5 篇文章 1 订阅

订阅专栏

自适应布局这些在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.盒子溢出内容处理：

示例代码如下：

<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>

fatansitic

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3盒布局

自适应布局这些在css3还么有出现的时候需要用比较复杂的代码来实现，然而现在用两行代码就可以轻松搞定，是不是棒棒！css3里的盒布局可以帮我们轻松布局，来看哈吧~开启盒布局模式兼容版：display:box;//目前还没有浏览器支持boxdisplay:-moz-box;//兼容gecko内核display:-webkit-box;//兼容webkit内核简单介
复制链接

扫一扫