盒子模型(Box Model)

把HTML页面中的布局元素当做一个矩形盒子，也就是一个盛放内容的容器

组成部分

内容
边框（border）
内边距（padding）内容与边框的距离
外边距（margin）盒子边框与相邻盒子边框的距离

标准模型

盒子边框（border）

语法：

border: border-width || border-style || border-color

属性：

border-width :定义边框粗细，默认单位px
border-style:边框的样式
- none:没有边框
- solid 边框为单实线
- dashed边框为虚线
- dotted 边框为点线
border-color:边框颜色

示例

div {
	width:500px;
	height:500px;
	/*边框宽度*/
	border-width: 5px;
	/*边框实线*/
	border-style:solid;
	/*边框颜色*/
	border-color: red;
	/*简写*/
	/*边框粗细 边框样式 边框颜色*/
	border: 5px solid red;
}

盒子边框单独指定样式

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border- bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top-color:颜色;	border- bottom-color:颜色;	border-left-color:颜色;	border-right-color:颜色;
border-top:宽度样式颜色;	border-bottom:宽度样式颜色;	border-left:宽度样式颜色;	border-right:宽度样式颜色;

表格的细线边框

属性：
border-collapse:collapse
示例：

th,
td,
table {
	/*会发现表格边框是2px*/
	border: 1px solid red;
	/*合并相邻边框*/
	border-collapse:collapse;
}

内边距(padding)

边框与内容的距离

属性：

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

简写

padding: 10px 上下左右都为10px
padding: 10px 20px 上下 10px 左右20px
padding:10px 20px 30px 上 10px 左右20px 下30px
padding:10px 20px 30px 40px 上 10px 右20px 下30px 左40px (顺时针)
记忆方法：先分上下，再分左右

注意：

添加内边距之后，盒子边距会变大

内盒尺寸计算

盒子高度=内边距上下宽度+内容高度+边框宽度
盒子宽度=内边距左右宽度+内容高度+边框宽度

pandding不影响盒子大小的情况

div {
	width:100px;
	height:100px;
	background-color:red;
}
p {
	height:30px;
	background-color:orange;
	padding-left:30px;
}

<html>
	<body>	
		<div>
			<p> AAA</p>
		</div>
	</body>
</html>

效果

盒子模型

结论
如果盒子没有指定宽度，则不会被撑开

外边距(margin)

盒子与相邻盒子的距离
属性
与内边距相似，将padding替换为margin
简写
与内边距相同，上右下左

实现盒子居中对齐

	div {
		/*必须要有宽度*/
		width:300px;	
		/*让块级盒子居中对齐水平,左右外边距设置为auto*/
		margin: 0 auto;
		/*其他写法*/
		margin :auto;
		/*其他写法*/
		margin-left:auto;
		margin-right:auto;
	}

文字居中与盒子居中

 p{
 /*文本内容、行内元素、行内块元素*/
	text-algin:center;
	}
div {
/*块元素居中*/
	margin:0 auto;
}

插入图片与背景图片区别

插入图片：常用，一般做产品展示类
- 移动位置只能靠盒子模型 padding margin
背景图片：一般用作小图标或者超大图片
- 移动位置通过 background-position

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pic,
        .bg{
            width: 2000px;
            height: 1000px;
            background-color: aquamarine;
        }
        .pic img {
            margin: 200px;
        }

        .bg {
            /*padding: 200px;*/
            background-image: url(img/background.jpeg);
            background-repeat: no-repeat;
            background-position: 100px 100px;
        }
    </style>
</head>
<body>
    <div class="pic">
        <img src="img/background.jpeg" alt="">
    </div>
    <div class="bg"></div>

</body>
</html>

清楚默认内外边距

为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除

代码

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

外边距合并

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：尽量给只给一个盒子添加margin值。

嵌套块元素垂直外边距的合并（塌陷）

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者

解决方案：

可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow:hidden。

盒子模型布局稳定性

width 、 padding 、margin
稳定性： width > padding > margin
原因：

margin会有合并的问题
padding会撑大盒子，需要计算盒子数据

相关推荐：
《学习html看这个就够了》
《学习CSS看这个就够了(一)》
《学习CSS看这个就够了(二)》

本文参考尚硅谷前端学习课程

CSS盒子模型(重点)