盒子模型(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值

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

解决方案:

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

盒子模型布局稳定性

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

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

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


在这里插入图片描述

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

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐