CSS 基础（003_盒子模型）

来源：互联网发布：ubuntu安装run文件编辑：程序博客网时间：2024/06/07 05:50

原始网址：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>

计算公式如下所示：

770px (width) + 20px (left + right padding) + 10px (left + right border) + 0px (left + right margin) = 800px

原图：
CSS Box Model

例图：
这里写图片描述

0 0