CSS盒子模型

点击打开在线编译器，边学边练

在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与盒子模型中的盒子又有点不同，这里的盒子是二维的。

盒子模型

盒子的组成

盒子模型是网页设计中经常用到的一种思维模型，由四个部分构成，从内到外分别为内容区（content）、内边距（padding）、边框（border）和外边距（margin），CSS 为这四个部分提供了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。

盒子的大小

盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为width和height属性，然而默认情况下width和height属性只是设置content（内容）部分的宽和高。盒子真正的宽和高按下面公式计算：

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

用带属性的公式表示：

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

盒子的组成

1. 内容区（content）

内容区是整个盒子模型的中心，其中存放了盒子的主要内容，这些内容可以是文本、图像等资源。内容区有 width、height、overflow 三个属性，其中 width 和 height 属性用来指定盒子内容区域的宽度和高度，当内容信息过多，超出内容区所设置的范围时，则可以使用 overflow 属性设置溢出内容的处理方式，overflow 属性有四个可选值：

（1）hidden：表示隐藏溢出的部分；

（2）visible：表示显示溢出的部分（溢出的部分将显示在盒子外部）；

（3）scroll：表示为内容区添加一个滚动条，您可以通过滑动这个滚动条来查看内容区的全部内容；

（4）auto：表示由浏览器决定如何处理溢出部分。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            background: #CFF;
        }
        div.box-one {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <div class="box-one">盒子模型</div>
    </div>
</body>
</html>

运行结果：（通过浏览器的调试工具查看的，可以快捷键F12来打开，或者在页面中点击鼠标右键，在弹出的菜单中选择“检查”选项即可。）

内容区（content）

2. 内边距（padding）

内边距是内容区和边框之间的空间，您可以通过 padding-top、padding-right、padding-bottom、padding-left 以及它们的简写属性 padding 来设置内容区各个方向上与边框之间的距离。在为盒子模型设置背景属性时，背景属性可以覆盖到内边距区域。

属性	内容
padding	在一个声明中设置所有填充属性
padding-top	设置元素的顶部填充
padding-bottom	设置元素的底填充
padding-left	设置元素的左填充
padding-right	设置元素的右填充

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
        <title></title>
        <style>
            .a{
                border: 1px solid #3C3C3C;
                width: 300px;
                height: 160px;
                margin: auto;
	    }
			h2{
                background-color:#0000FF;
                width: 300px;
                height: 50px;
                color: #FFFFFF;
                line-height: 50px;
                font-size: 20px;
                margin-top: 0px;
                margin-bottom: 0px;
			}
			form{
                width: 300px;
                height: 110px;
                background-color: #00FFFF;
			}
    </style>
    </head>
    <body>
                <div class="a">
                <h2>会员登录</h2>
        <form action="#">
    <div>
                <strong class="name">姓名：</strong>
                <input type="text"/>
        </div>
    <div>
                <strong class="name">邮箱：</strong>
                <input type="text"/>
        </div>
    <div>
                <strong class="name">电话：</strong>
                <input type="text"/>
        </div>
    </form>
    </div>
</body>
</html>

运行结果：

内边距（padding）

3. 边框（border）

边框是环绕内容区和内边距的边界，您可以使用 border-style、border-width 和 border-color 以及它们的简写属性 border 来设置边框的样式。其中 border-style 属性为边框中最主要的属性，如果没有设置该属性的话，其它的边框属性也会被忽略。

举例：

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title></title>
        <style>
			.a{
            border: 1px solid #3C3C3C;
            width: 300px;
            height: 180px;
            }
            h2{
            background-color:#0000FF;
            width: 300px;
            height: 50px;
            color: #FFFFFF;
            line-height: 50px;
            font-size: 20px;
            }
            form{
                background-color: #00FFFF;
		width: 300px;
		height: 80px;
		}
		div:nth-of-type(1) input{
		border: 2px solid red;
		}
		div:nth-of-type(2) input{
		border: 3px dotted blue;
        }
		div:nth-of-type(3) input{
		border: 2px dashed green;
        }
		</style>
</head>
<body>
		<div class="a">
		<h2>会员登录</h2>
		<form action="#">
		<div>
		<strong class="name">姓名：</strong>
		<input type="text"/>
				</div>
				<div>
					<strong class="name">邮箱：</strong>
					<input type="text"/>
				</div>
				<div>
					<strong class="name">电话：</strong>
					<input type="text"/>
				</div>
			</form>
		</div>
</body>
</html>

运行结果：

边框（border）

4. 外边距（margin）


margin	在一个声明中设置所有外边距属性
margin-top	设置元素的上外边距
margin-bottom	设置元素的下外边距
margin-left	设置元素的左外边距
margin-right	设置元素的右外边距

举例：

<!DOCTYPE html>
<html>
<head>
    meta charset="utf-8">
    <title></title>
    <style>
        .a{
        border: 1px solid #3C3C3C;
	width: 300px;
	height: 180px;
	margin: auto;
	}
			h2{
				background-color:#0000FF;
				width: 300px;
				height: 50px;
				color: #FFFFFF;
				line-height: 50px;
				font-size: 20px;
				margin-top: 0px;
				margin-bottom: 0px;
			}
			form{
				border: 1px solid red;
				width: 300px;
				height: 110px;
				background-color: #00FFFF;
				
			}
			</style>
		</head>
		<body>
			<div class="a">
				<h2>会员登录</h2>
				<form action="#">
					<div>
					 	<strong class="name">姓名：</strong>
						<input type="text"/>
        </div>
    <div>
            <strong class="name">邮箱：</strong>
            <input type="text"/>
        </div>
    <div>
    <strong class="name">电话：</strong>
    <input type="text"/>
    </div>
    </form>
    </div>
</body>
</html>

运行结果：

外边距（margin）

举例：

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试看看效果</title>
</head>
<style>
    #box1 {
        width: 400px;
        height: 400px;
        background-color: white;
        /* 设置上下 左右的内边距 */
        padding: 50px 50px;
        border: 5px dashed rgb(18, 18, 19);
        margin: 0 auto;
        margin-top: 5px;
        /* margin-left: 200px;
        margin-right: 200px;
        margin-bottom: 5px; */
        text-align: center;
    }
    
    #box2 {
        width: 350px;
        height: 350px;
        background-color: white;
        /* 设置上下 左右的内边距 */
        padding: 20px 20px;
        border: 5px solid gray;
        margin: 0 auto;
        margin-top: 10px;
        /* margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 20px; */
        text-align: center;
    }
    
    #box3 {
        width: 300px;
        height: 300px;
        background-color: rgb(146, 6, 6);
        /* 设置上下 左右的内边距 */
        border: 5px solid rgb(146, 6, 6);
        margin: 0 auto;
        /* padding: 5px 5px; */
        margin-top: 20px;
        /* margin-left: 45px;
        margin-right: 45px;
        margin-bottom: 45px; */
        text-align: center;
    }
    
    #box4 {
        width: 240px;
        height: 240px;
        background-color: rgb(146, 6, 6);
        /* 设置上下 左右的内边距 */
        /* padding: 5px 5px; */
        border: 2px dashed white;
        margin: 0 auto;
        margin-top: 33px;
        /* margin-left: 33px;
        margin-right: 33px;
        margin-bottom: 33px; */
        /* 和padding效果一样 */
        text-align: center;
    }
    
    #box5 {
        width: 215px;
        height: 215px;
        background-color: rgb(146, 6, 6);
        /* 设置上下 左右的内边距 */
        border: 2px dashed white;
        margin: 0 auto;
        /* padding: 2px 2px; */
        margin-top: 12.5px;
        /* margin-left: 12.5px;
        margin-right: 12.5px;
        margin-bottom: 12.5px; */
        /* 和padding效果一样 */
        text-align: center;
    }
    
    #box6 {
        width: 100px;
        height: 100px;
        background-color: white;
        /* 设置上下 左右的内边距 */
        border: 5px solid black;
        margin: 0 auto;
        /* padding: 20px 20px; */
        margin-top: 54.5px;
        /* margin-left: 54.5px;
        margin-right: 54.5px;
        margin-bottom: 54.5px; */
        /* 和padding效果一样 */
        text-align: center;
    }
</style>
<body>
        <div id="box1">
        <div id="box2">
        <div id="box3">
        <div id="box4">
    <div id="box5">
       <div id="box6"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

运行结果：

测试结果