CSS3学习系列之布局样式（二）

时间：2023-03-09 06:41:57
CSS3学习系列之布局样式（二）
  • 使用盒布局

在CSS3中，通过box属性来使用盒布局，例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用float属性进行布局的示例</title>

    <style>

        #container{

            display: -moz-box;

            display: -webkit-box;

        }

        #left-sidebar {

            width: 200px;

            padding: 20px;

            background-color: orange;

        }

        #contents{

            width: 300px;

            padding: 20px;

            background-color: yellow;

        }

        #right-sidebar{

            width: 200px;

            padding: 20px;

            background-color: limegreen;

        }

        #left-sidebar,#contents,#right-sidebar{

            -moz-box-sizing: border-box;

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

<div id="container">

    <div id="left-sidebar">

        <h2>左侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

    <div id="contents">

        <h2>内容</h2>

        <p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</p>

    </div>

    <div id="right-sidebar">

        <h2>右侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

</div>

</body>

</html>
  • 盒布局与多栏布局的区别

盒布局与多栏布局的区别在于：使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的，另外使用多栏布局时，也不可能具体指定书目栏中显示书目内容。因此比较合适使用在显示文章内容的时候，不适合用于安排整个网页由各元素组成的网页结构时。

  • 使用自适应窗口的弹性盒布局

使用box-flex属性，可以将盒布局变为弹性盒布局就可以了。例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用float属性进行布局的示例</title>

    <style>

        #container{

            display: -moz-box;

            display: -webkit-box;

        }

        #left-sidebar {

            width: 200px;

            padding: 20px;

            background-color: orange;

        }

        #contents{

            -moz-box-flex:1;

            -webkit-box-flex: 1;

            padding: 20px;

            background-color: yellow;

        }

        #right-sidebar{

            width: 200px;

            padding: 20px;

            background-color: limegreen;

        }

        #left-sidebar,#contents,#right-sidebar{

            -moz-box-sizing: border-box;

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

<div id="container">

    <div id="left-sidebar">

        <h2>左侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

    <div id="contents">

        <h2>内容</h2>

        <p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</p>

    </div>

    <div id="right-sidebar">

        <h2>右侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

</div>

</body>

</html>
  • 改变元素的显示顺序

使用弹性盒布局的时候，可以通过box­-ordinal-group属性来改变元素的显示顺序，可以在每个元素的样式中加入box-ordinal-group属性，该属性使用一个表示序号的整数属性值，浏览器在显示的时候根据该序号从小到大来显示这些元素。例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用float属性进行布局的示例</title>

    <style>

        #container{

            display: -moz-box;

            display: -webkit-box;

        }

        #left-sidebar {

            -moz-box-ordinal-group: 3;

            -webkit-box-ordinal-group: 3;

            width: 200px;

            padding: 20px;

            background-color: orange;

        }

        #contents{

            -moz-box-ordinal-group: 1;

            -webkit-box-ordinal-group: 1;

            -moz-box-flex:1;

            -webkit-box-flex: 1;

            padding: 20px;

            background-color: yellow;

        }

        #right-sidebar{

            -moz-box-ordinal-group: 2;

            -webkit-box-ordinal-group: 2;

            width: 200px;

            padding: 20px;

            background-color: limegreen;

        }

        #left-sidebar,#contents,#right-sidebar{

            -moz-box-sizing: border-box;

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

<div id="container">

    <div id="left-sidebar">

        <h2>左侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

    <div id="contents">

        <h2>内容</h2>

        <p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</p>

    </div>

    <div id="right-sidebar">

        <h2>右侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

</div>

</body>

</html>
  • 改变元素的排列方向

使用弹性盒布局的时候，我们可以很简单地将多个元素的排列方向从水平方向修改为垂直方向，或者从垂直方向修改为水平方向。

在css3中，使用box-orient来指定多个元素的排列方向。例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用float属性进行布局的示例</title>

    <style>

        #container{

            display: -moz-box;

            display: -webkit-box;

            -moz-box-orient: vertical;

            -webkit-box-orient: vertical;

        }

        #left-sidebar {

            -moz-box-ordinal-group: 3;

            -webkit-box-ordinal-group: 3;

            width: 200px;

            padding: 20px;

            background-color: orange;

        }

        #contents{

            -moz-box-ordinal-group: 1;

            -webkit-box-ordinal-group: 1;

            -moz-box-flex:1;

            -webkit-box-flex: 1;

            padding: 20px;

            background-color: yellow;

        }

        #right-sidebar{

            -moz-box-ordinal-group: 2;

            -webkit-box-ordinal-group: 2;

            width: 200px;

            padding: 20px;

            background-color: limegreen;

        }

        #left-sidebar,#contents,#right-sidebar{

            -moz-box-sizing: border-box;

            -webkit-box-sizing: border-box;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

<div id="container">

    <div id="left-sidebar">

        <h2>左侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

    <div id="contents">

        <h2>内容</h2>

        <p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</p>

    </div>

    <div id="right-sidebar">

        <h2>右侧边栏</h2>

        <ul>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

            <li><a href="">超链接</a></li>

        </ul>

    </div>

</div>

</body>

</html>
  • 元素宽度与高度的自适应

使用盒布局的时候，元素的宽度与高度具有自适应性，即元素的宽度与高度可以根据排列方向的改变而改变。例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>元素宽度与高度的自适应示例</title>

    <style>

        #container {

            display: -moz-box;

            display: -webkit-box;

            border: solid 5px blue;

            -moz-box-orient: vertical;

            -webkit-box-orient: vertical;

            width: 500px;

            height: 300px;

        }

        #text-a {

            background-color: orange;

        }

        #text-b {

            background-color: yellow;

        }

        #text-c {

            background-color: limegreen;

        }

        #text-a, #text-b, #text-c {

            -moz-box-sizing: border-box;

            -webkit-box-sizing: border-box;

            font-size: 1.5em;

            font-weight: bold;

        }

    </style>

</head>

<body>

<div id="container">

    <div id="text-a">示例文字A</div>

    <div id="text-b">示例文字B</div>

    <div id="text-c">示例文字C</div>

</div>

</body>

</html>
  • 对对个元素使用box-flex属性
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>元素宽度与高度的自适应示例</title>

    <style>

        #container {

            display: -moz-box;

            display: -webkit-box;

            border: solid 5px blue;

            -moz-box-orient: vertical;

            -webkit-box-orient: vertical;

            width: 500px;

            height: 300px;

        }

        #text-a {

            -moz-box-flex: 1;

            -webkit-box-flex: 1;

            background-color: orange;

        }

        #text-b {

            -moz-box-flex: 1;

            -webkit-box-flex: 1;

            background-color: yellow;

        }

        #text-c {

            background-color: limegreen;

        }

        #text-a, #text-b, #text-c {

            -moz-box-sizing: border-box;

            -webkit-box-sizing: border-box;

            font-size: 1.5em;

            font-weight: bold;

        }

    </style>

</head>

<body>

<div id="container">

    <div id="text-a">示例文字A</div>

    <div id="text-b">示例文字B</div>

    <div id="text-c">示例文字C</div>

</div>

</body>

</html>
  • 指定水平方向与垂直方向的对齐方式

使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素文字、图像及子元素的水平方向或垂直方向的对齐方式。例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>让文字位于div元素正*的简单示例</title>

    <style>

      div{

          display: -moz-box;

          display: -webkit-box;

          -moz-box-align: center;

          -webkit-box-align: center;

          -moz-box-pack:center;

          -webkit-box-pack:center;

          width: 300px;

          height: 200px;

          background-color: pink;

      }

    </style>

</head>

<body>

<div>示例文字</div>

</body>

</html>

相关文章