CSS基础(part12)--盒子模型之外边距

学习笔记，仅供参考，有错必纠

参考自：某不知名网课

文章目录

盒子模型
- 外边距
- - 属性设置
  - 块级盒子水平居中
  - 文字居中以及盒子居中
  - 插入图片和背景图片的区别
  - 清除元素的默认内外边距
  - 外边距合并(只存在垂直方向合并)

盒子模型

外边距

margin属性用于设置外边距， margin就是控制盒子和盒子之间的距离：

属性设置

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin值的简写形式代表意思和padding完全相同。

块级盒子水平居中

如果想要让一个盒子水平居中，必须指定盒子宽度(width)，然后就给左右的外边距都设置为auto，比如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS盒子</title><style>div {width: 600px;height: 400px;background-color: pink;margin: 0 auto;}</style>
</head>
<body><div></div>
</body>
</html>

让盒子居中的3种写法

/* 第1种 */
margin-left: auto;
margin-right: auto;/* 第2种 */
margin: auto;/* 第3种 */
margin: 0 auto;

文字居中以及盒子居中

让盒子内的文字水平居中可以使用 text-align: center，该css代码还可以让行内元素和行内块元素居中对齐，比如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS盒子</title><style>div {width: 400px;height: 150px;background-color: pink;margin: 0 auto;text-align: center;}span {color: blue;}input {border: none;border-bottom: 1px dashed red;     }</style>
</head>
<body><div>我是文字<span>我是span标签</span><input type="text"></div>
</body>
</html>

页面：

插入图片和背景图片的区别

如果我们是以插入的形式展示图片，那么移动位置只能靠调整盒模型的padding和margin属性;

如果我们是将图片作为背景的形式展示，那么只能通过设置background-position属性移动图片位置。

举个例子(插入图片)

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS盒子</title><style>.demo {width: 500px;height: 300px;border: 2px solid red;}.demo img {width: 100px;height: 100px;margin: 50px;}</style>
</head>
<body><div class="demo"><img src="data:image/TX.jpg" alt=""></div>
</body>
</html>

页面：

举个例子(背景)

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS盒子</title><style>.demo,.back {width: 500px;height: 300px;border: 2px solid red;}.demo img {width: 100px;height: 100px;margin: 50px;}.back {background: url(image/TX.jpg) no-repeat;background-position: 50px 50px;}</style>
</head>
<body><div class="demo"><img src="data:image/TX.jpg" alt=""></div><div class="back"></div>
</body>
</html>

页面：

清除元素的默认内外边距

制作网页时，我们需要将元素的默认内外边距清除，css代码：

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

对于行内元素，为了照顾兼容性，则尽量只设置左右内外边距，不要设置上下内外边距，例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS盒子</title><style>* {padding:0;         /* 清除内边距 */margin:0;          /* 清除外边距 */         }span {margin-left: 30px;/* margin-right: 50px;  */background-color: pink;}</style>
</head>
<body><p>这里是安徽财经大学</p><span>统计与应用数学学院</span><span>应用统计</span>
</body>
</html>

页面：

外边距合并(只存在垂直方向合并)

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

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

嵌套块元素垂直外边距的合并(塌陷)

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

如果我们不想出现塌陷的情况，可以采用以下3种解决方案：

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

举个例子

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS盒子</title><style>.father {width: 500px;height: 500px;background-color: pink;overflow: hidden;}.son {width: 200px;height: 200px;background-color: purple;margin-top: 100px;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

页面：