CSS 基础（003_盒子模型）

最新推荐文章于 2024-10-18 21:23:17 发布

柯南道尔2606

最新推荐文章于 2024-10-18 21:23:17 发布

阅读量463

点赞数

分类专栏： CSS 文章标签： css

CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

原始网址：http://www.w3schools.com/css/css_boxmodel.asp

翻译：

CSS Box Model

The CSS Box Model

所有的 HTML 元素都可以被认为是盒子。在 CSS 中，盒子模型的概念是被用来讨论设计和布局的。
CSS 盒子模型本质上是将每一个 HTML 元素包裹起来的盒子。它的组成部分为：margins，borders，padding 以及实际内容（元素）。下面的示例诠释了盒子模型：

CSS Box Model

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>CSS Box Model</title>
        <meta charset="utf-8">
        <style>
            .w3-theme {
                color: #fff !important;
                background-color: #73AD21 !important;
                background-color: #4CAF50 !important
            }
        </style>
        <style>
            .w3-boxmodel .margin {
                background: #f1f1f1;
                padding: 45px;
                position: relative;
                border: 2px dashed #bbb;
            }

            .w3-boxmodel .margin:before {
                content: "margin（外边距）";
                font-size: 1.4em;
                position: absolute;
                left: 0;
                top: 1.8%;
                width: 100%;
                text-align: center;
            }

            .w3-boxmodel .border {
                padding: 45px;
                position: relative;
            }

            .w3-boxmodel .border:before {
                content: "border（边框）";
                font-size: 1.4em;
                color: black;
                position: absolute;
                left: 0;
                top: 2.5%;
                width: 100%;
                text-align: center;
            }

            .w3-boxmodel .padding {
                color: black;
                padding: 45px;
                position: relative;
                background: #f1f1f1;
            }

            .w3-boxmodel .padding:before {
                content: "padding（内边距）";
                font-size: 1.4em;
                position: absolute;
                left: 0.5%;
                top: 3.7%;
                width: 100%;
                text-align: center;
            }

            .w3-boxmodel .element {
                padding: 20px;
                position: relative;
                background: white;
                border: 2px dashed #bbb;
            }

            .w3-boxmodel .element:before {
                content: "element（元素）";
                font-size: 1.4em;
                display: block;
                text-align: center;
                line-height: 3.5;
            }
        </style>
    </head>
    <body>
        <div class="w3-boxmodel">
            <div class="margin">
                <div class="border w3-theme">
                    <div class="padding">
                        <div class="element"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

不同部分的解释：

element - 盒子的内容（即包裹的元素），以显示文本或图片。
padding - 清除内容周围的区域（内边距），它是不可见的。
border - 围绕元素和内边距的边框。
margin - 清除边框外围区域（外边距），它是不可见的。

盒子模型使得我们可以围绕着元素添加边框以及定义元素之间的空间（距离）。

示例：
CSS Box Model

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                background-color: lightgrey;
                border: 25px solid green;
                padding: 25px;
                margin: 25px;
            }
        </style>
    </head>
    <body>
        <div>test1</div>
        <div>test2</div>
    </body>
</html>

元素的宽和高

为了在所有的浏览器中正确地设置元素的宽和高，我们需要知道盒子模型是如何工作的。

重要：当我们使用 CSS 对元素的宽和高进行设置的时候，我们只是对（盒子模型的）内容区域的宽和高进行了设置，要计算元素所占整个区域的大小，我们还需要将 padding，borders，margins 的尺寸包含在内。

示例：

假定我们对 <div> 元素设置总宽为 800px：

<!DOCTYPE html>
<html>
    <head>
        <style>
            div.main {
                border: 1px solid black;
                padding: 10px;
            }

            div.element {
                width: 770px;
                padding: 10px;
                border: 5px solid gray;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div class='main'>
            <img src="test.png" width="800" height="300">
            <div class='element'>The picture above is 800px wide. The total width of this element is also 800px.</div>
        </div>
    </body>
</html>