在HTML和CSS中，框模型（Box Model）是一个重要的概念，它决定了元素如何在页面上呈现和布局

Bol5261

已于 2024-03-05 16:41:41 修改

阅读量515

点赞数

分类专栏： HTML5(HyperText Markup) CSS(Cascading Style Sheets) Javascript(Promise/asyncAwait) 文章标签： css html css3 html5

于 2020-07-03 09:35:52 首次发布

本文链接：https://blog.csdn.net/blog_programb/article/details/107098936

版权

HTML5(HyperText Markup) 同时被 3 个专栏收录

302 篇文章 14 订阅

订阅专栏

CSS(Cascading Style Sheets)

141 篇文章 0 订阅

订阅专栏

Javascript(Promise/asyncAwait)

120 篇文章 0 订阅

订阅专栏

在HTML和CSS中，框模型（Box Model）是一个重要的概念，它决定了元素如何在页面上呈现和布局。框模型包括元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。
下面是一个简单的HTML和CSS代码示例，展示了如何设置框模型的大小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>框模型大小示例</title>
    <style>
        .box {
            width: 200px;  /* 宽度 */
            height: 100px; /* 高度 */
            padding: 10px; /* 内边距 */
            border: 2px solid black; /* 边框 */
            margin: 15px; /* 外边距 */
            background-color: lightblue; /* 背景色 */
        }
    </style>
</head>
<body>
    <div class="box">
        这是一个示例框模型
    </div>
</body>
</html>

在这个示例中，我们创建了一个类名为 box 的 div 元素。通过CSS，我们设置了该元素的宽度（width）、高度（height）、内边距（padding）、边框（border）和外边距（margin）。我们还设置了背景色（background-color）以便更好地观察框模型的大小。
这个示例将显示一个宽度为200px、高度为100px的矩形框。内边距为10px，意味着内容和边框之间有10px的间距。边框为2px宽，并且是黑色的。外边距为15px，意味着这个框与其他元素之间有15px的间距。
请注意，CSS中的 box-sizing 属性可以影响框模型的大小计算方式。默认情况下，box-sizing 的值为 content-box，这意味着元素的宽度和高度只包括内容区域，不包括内边距和边框。如果将 box-sizing 设置为 border-box，则元素的宽度和高度将包括内容、内边距和边框。当然，我可以帮您继续编写关于CSS框模型的内容。下面是一个更详细的示例，其中包含了box-sizing属性的使用，以及如何通过调整这个属性来改变框模型的大小计算方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>框模型大小与box-sizing示例</title>
    <style>
        .container {
            width: 300px;
            margin: 20px auto;
            padding: 10px;
            background-color: #f0f0f0;
            text-align: center;
        }
        .box {
            width: 100%;
            padding: 15px;
            margin-bottom: 10px;
            border: 2px solid #333;
            background-color: #e0e0e0;
            box-sizing: border-box; /* 设置box-sizing属性 */
        }
        .content-box {
            box-sizing: content-box; /* 使用默认的content-box */
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>box-sizing: border-box 示例</h2>
        <div class="box">
            这是一个border-box框模型示例
        </div>
    </div>
    <div class="container">
        <h2>box-sizing: content-box 示例</h2>
        <div class="box class-box">
            这是一个content-box框模型示例
        </div>
    </div>
</body>
</html>

在这个示例中，我们创建了两个容器，每个容器内都有一个.box元素。第一个.box元素使用了box-sizing: border-box;，这意味着元素的宽度和高度将包括内容、内边距和边框。因此，尽管我们为内边距设置了15px，但.box元素的总宽度仍然是父容器宽度的100%，因为边框和内边距是在元素的总宽度内计算的。
第二个.box元素使用了默认的box-sizing: content-box;。在这种情况下，元素的宽度和高度只包括内容区域，不包括内边距和边框。因此，由于内边距和边框的存在，这个元素的总体宽度会大于其父容器宽度的100%，这可能导致布局溢出。
通过这个示例，您可以清晰地看到box-sizing属性如何影响框模型的大小计算方式，以及如何在布局中使用不同的box-sizing值来达到所需的布局效果。

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。

	<html>
	  <head>
	    <title>框模型的大小</title>
	  <style>
	#a {background-color:teal;
	    width:20em;                   
	    height:10em;
	    padding:1em ;                    //空距的距离是1em 
	    border:1em solid navy;            //边框的宽度是1em 
	    margin:1em;                     //边距的宽度是1em 
	     }
	#b {background-color:teal;
	   width:20em;
	   height:13em;
	   padding:3em;                     //空距的距离是3em 
	   border:1em solid navy;             //边框的宽度是1em 
	   margin:3em;                      //边距的宽度是3em 
	     }
	   </style>
	  </head>
	  <body>
	    <div id="a">
	《烬余录》像是一个历尽沧桑的百岁老人所写，但是当时的张爱玲只有24岁。她对自己的自私和冷酷，有一种抽离。
	   </div>
	    <p>
	   <div id="b">
	《烬余录》像是一个历尽沧桑的百岁老人所写，但是当时的张爱玲只有24岁。她对自己的自私和冷酷，有一种抽离。
	   </div>
	  </body>
	</html>