Web前端开发笔记——第三章 CSS语言第五节盒子模型

Posted 2021-09-17 晚风(●•σ )

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端开发笔记——第三章 CSS语言第五节盒子模型相关的知识，希望对你有一定的参考价值。

一、CSS布局与定位

在CSS中对一个网页进行布局与定位，首先通过盒子模型，即页面元素的大小、边框、各元素之间的间距将布局进行设计元素，然后通过定位，即文档流、浮动定位、层定位来决定盒子模型的位置，且盒子是可以嵌套的。

二、盒子模型

简单的来说盒子模型它可以是一个区域、图片、列表、导航栏等等，都可以称作盒子，即html元素都可以称作为盒子。
可以通过下图来简单了解一下盒子模型，以下是一个网页页面当按下F12后的html源码，我们可以看到布局中的盒模型：

三、盒子模型的组成

盒子模型以四个部分组成，可以以几个不同大小的矩形内嵌为例，从外到内依次分别是外边距（Margin）、边框（Border）、内边距（Padding，也可以叫做填充）、内容（Content），其中内容的空间由height属性和width属性设定。

例如，下列代码，设置一个div区域，设置内容的空间宽度为250px、高度为200px，边框大小为20px，且为实体天蓝色，内边距大小为20px，外边距大小为20px：
css代码：

div {
	width: 250px;
	height: 200px;
	border: 20px solid skyblue;
	padding: 20px;
	margin: 20px;
}

html代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../CSS/new_file.css" />
	</head>

	<body>
		<div>
			内容
		</div>
	</body>

</html>

运行结果如下：

我们可以发现其实该盒子模型的实际宽度（高度）=内容宽度（高度）+两边内边距（padding）+两边边框（border）+两边外边距（margin）。
例如上图的：

div {
	width: 250px;
	height: 200px;
	border: 20px solid skyblue;
	padding: 20px;
	margin: 20px;
}

该盒子模型的实际宽度=内容宽度（width：250px）+两边内边距（左侧内边距padding-left：20px+右侧内边距padding-right：20px）+两边边框（左边框border-left：20px+右边框border-right：20px）+两边外边距（左侧外边距padding-left：20px+右侧外边距padding-right：20px）=370px；
该盒子模型的实际高度=内容高度（height：200px）+两边内边距（上侧内边距padding-top：20px+下侧内边距padding-bottom：20px）+两边边框（上边框border-top：20px+下边框border-bottom：20px）+两边外边距（上侧外边距padding-top：20px+下侧外边距padding-bottom：20px）=320px。

四、设置边框的属性

通过对border属性进行设置，可以改变边框的大小、颜色等等。
border-width:属性设置边框的宽度，后跟像素px或thick（粗）、medium（中，即默认值）、thin（细）。
border-style:属性设置边框的样式，它默认值是none，后跟solid时表示实线边框；后跟dashed时表示虚线边框；后跟dotted时表示点线边框；后跟double时表示定义两个边框，其中两个边框的宽度取值取决于border-width的值；后跟inset或outset属性，表示设置3D嵌入或3D突出边框，其取决于border-color边框的颜色；后跟ridge或groove，表示设置3D脊边框或3D槽边框，其也是取决于border-color边框的颜色。
border-color:属性设置边框的颜色，这里要注意如果只设置border-color:改变边框颜色是不起作用的，前提是要设置了border-style:边框样式。
也可以直接通过border:属性在一个属性中设置边框的属性，即同时设置border-width属性、border-style属性和border-color属性，例如：border: 2px dashed red;
例如，下列代码，设置盒子模型的边框属性为虚线红色且宽度为2px：
css代码：

#first {
	width: 150px;
	height: 200px;
	border: 2px dashed red;
	padding: 20px;
	margin: 20px;
}

html代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../CSS/new_file.css" />
	</head>

	<body>
		<div id="first">
			<p>计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器。</p>
		</div>
	</body>

</html>

运行结果如下：

且也可以在css中附加以下代码，对边框的上边框、下边框或左右边框进行设置，即单独设置各边属性。如下，设置边框的上边框、下边框为2px，且为实体蓝色：

	border-top: 2px solid blue;
	border-bottom: 2px solid blue;

运行结果如下：

五、设置外、内边距的属性

可以通过不同方向（top、bottom、right、left）来设置外、内边距不同面的边距，在设置margin属性值时，依次是按top、bottom、right、left的顺序来设置的，也可以设置三个值，中间的值是左右边距，左右即是上边距和下边距；可以设置两个值，即表示上下边距、左右边距。

#first {
	width: 150px;
	height: 200px;
	border: 2px dashed red;
	padding: 20px;
	margin: 20px 10px 20px 15px;
}

当有两个盒子模型合并时，margin属性垂直方向合并（即垂直方向像素大的即为合并结果），而水平方向不合并。且当设置div区域，若想让该区域水平居中，可设置margin属性margin:0 auto使该区域达到效果。
例如，下列代码：
css代码：

#first {
	text-align: left;
	font-size: 0;
}

#first img {
	width: 100px;
	height: 100px;
	border: 2px dashed skyblue;
	padding: 5px;
	margin-left: 2px;
}

html代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../CSS/new_file.css" />
	</head>

	<body>
		<div id="first">
			<img src="../image/mountain.jpg">
			<img src="../image/酒柜.png">
		</div>

	</body>

</html>

运行结果如下：

六、overflow 属性

当盒子模型的内容溢出盒子时，通过overflow 属性可以设置处理方式，它分为以下五种：
当 overflow: visible时，溢出内容会显示在盒子模型以外，这也是默认情况，即不设置overflow 属性时的默认值。
当 overflow: hidden时，溢出内容会被修剪，即内容被修剪掉。
当 overflow: auto时，如果内容被修剪，溢出内容会以滚动条的方式来查看溢出的内容。
当 overflow: scroll时，溢出内容会以滚动条的方式来查看溢出的内容，若内容没有溢出，滚动条仍然可见，但无法滚动，即它是始终显示滚动条的。
当 overflow: inherit时，继承父元素overflow属性的值。
例如，下列代码，设置盒子模型的属性overflow: visible，使溢出内容显示在模型以外：
css代码：

div {
	width: 150px;
	height: 200px;
	border: 20px;
	padding: 20px;
	margin: 20px;
	background-color: aquamarine;
}

html代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../CSS/new_file.css" />
	</head>

	<body>
		<div>
			<p>计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算，又可以进行逻辑计算，还具有存储记忆功能。是能够按照程序运行，自动、高速处理海量数据的现代化智能电子设备。</p>
		</div>
	</body>

</html>

运行结果如下，可以看到内容是溢出的：
要区分当overflow: auto属性和overflow: scroll属性的不同情况，overflow: scroll属性的滚动条是始终显示的，与内容无关。
例如下列代码，可以看出auto属性和scroll属性的区别：
css代码：

#first {
	width: 150px;
	height: 200px;
	border: 20px;
	padding: 20px;
	margin: 20px;
	background-color: aquamarine;
	overflow: scroll;
}

#second {
	width: 100px;
	height: 150px;
	border: 20px;
	padding: 20px;
	margin: 20px;
	background-color: aquamarine;
	overflow: auto;
}

html代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../CSS/new_file.css" />
	</head>

	<body>
		<div id="first">
			<p>计算机（computer）俗称电脑，是现代一种用于高速计算的电子计算机器。</p>
		</div>
		<br />
		<div id="second">
			<p>由硬件系统和软件系统所组成，没有安装任何软件的计算机称为裸机。可分为超级计算机、工业控制计算机、网络计算机、个人计算机、嵌入式计算机五类，较先进的计算机有生物计算机、光子计算机、量子计算机等。</p>
		</div>

	</body>

</html>