雅君

2022-04-05 15:58 已编辑山东大学前端工程师

关注

【24】CSS核心样式（4）——盒模型的5种应用②（5/5）

★文章内容学习来源：拉勾教育大前端就业集训营

上篇我们了解了盒模型的前3种应用：
【23】CSS核心样式（4）——盒模型的5种应用①（3/5）

这篇我们继续讲解2种盒模型的应用：

四、父子盒模型

1.问题

一般情况下，一个父元素内部可以放一个或多个子元素；
而且如果多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），需要遵循置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度 width，即父元素的width ≥ 所有子元素width + padding + border + margin；
如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素。

如下：

问题示例1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>问题示例1</title>
  <style> *{
     margin: 0; padding: 0; } .box1 {
     width: 1000px; height: 100px; border: 1px solid #f00; } .box1 p {
     float: left; width: 250px; height: 100px; margin-right: 50px; margin-bottom: 10px; background-color: pink; } </style>
</head>
<body>
  <div class="box1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </div>
</body>
</html>

问题示例2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>问题示例2</title>
  <style> *{
     margin: 0; padding: 0; } .box2 {
     width: 200px; height: 200px; border: 10px solid #f00; } .box2 p {
     width: 160px; height: 200px; padding: 20px; border: 20px dashed #00f; margin-right: 20px; background-color: pink; } </style>
</head>
<body>
  <div class="box2">
    <p>1</p>
  </div>
</body>
</html>

2.解决方法

（1）普通情况解决方法：精确计算

计算或量取尺寸时一定要计算准确，一像素都不能偏差。

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>解决方法1示范（精确计算）</title>
  <style> *{
     margin: 0; padding: 0; } .box1 {
     width: 1000px; height: 100px; border: 1px solid #f00; } .box1 p {
     float: left; width: 200px; height: 100px; margin-right: 50px; background-color: pink; } </style>
</head>
<body>
  <div class="box1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </div>
</body>
</html>

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>解决方法1示范（精确计算）</title>
  <style> *{
     margin: 0; padding: 0; } .box2 {
     width: 200px; height: 200px; border: 10px solid #f00; } .box2 p {
     width: 120px; height: 120px; padding: 20px; border: 20px dashed #00f; margin-right: 20px; background-color: pink; } </style>
</head>
<body>
  <div class="box2">
    <p>1</p>
  </div>
</body>
</html>

（2）特殊情况解决方法：盒模型自动内减

①适用特殊情况★：（父子盒模型中，只有一个子元素），且子元素是类似 <div>标签必须占一行的。
（比如问题示例2）

②方法详情：
不设置子元素的 width属性，子元素的width属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的padding 和 border、margin，不需要手动去进行内减，子元素的 width会自动收缩尺寸。
子元素所有的水平方向的位置所有属性的加和等于父元素的width 。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>特殊情况解决方法：盒模型自动内减示例</title>
  <style> *{
     margin: 0; padding: 0; } .box2 {
     width: 200px; height: 200px; border: 10px solid #f00; } .box2 p {
     padding: 20px; border: 20px dashed #00f; margin-right: 20px; background-color: pink; } </style>
</head>
<body>
  <div class="box2">
    <p>1</p>
  </div>
</body>
</html>

五、margin塌陷现象

1.问题情况：

（1）问题描述

在垂直方向如果有两个元素的外边距（margin）有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。
★注意：水平方向的 margin 没有塌陷现象。

（2）问题分类

①同级元素塌陷

上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>同级margin塌陷示例</title>
  <style> *{
     margin: 0; padding: 0; } .box1 {
     width: 100px; height: 100px; margin-bottom: 40px; background-color: skyblue; } .box2 {
     width: 100px; height: 100px; margin-top: 50px; background-color: skyblue; } </style>
</head>
<body>
  <div class="box1">
    1
  </div>
  <div class="box2">
    2
  </div>
</body>
</html>

、

————————————————————————————————

②父子元素塌陷

②-①

父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的 margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生margin 塌陷。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父子元素margin塌陷示例</title>
  <style> *{
     margin: 0; padding: 0; } .box3 {
     width: 100px; height: 100px; margin-top: 40px;/*父元素的margin-top值比子元素的小，塌陷进了子元素的值中*/ background-color: pink; } .box3 p {
     width: 50px; height: 50px; margin-top: 80px;/*子元素的margin-top值比父元素更大*/ background-color: yellow; } </style>
</head>
<body>
  <div class="box3">
    <p></p>
  </div>
</body>
</html>

②-②

父子元素塌陷本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父子元素margin塌陷示例</title>
  <style> *{
     margin: 0; padding: 0; } .box3 {
     width: 100px; height: 100px; background-color: pink; } .box3 p {
     width: 50px; height: 50px; margin-top: 20px;/*子元素设置margin-top父元素也有了这个值*/ background-color: yellow; } </style>
</head>
<body>
  <div class="box3">
    <p></p>
  </div>
</body>
</html>

——————————————————————————

2.解决 margin 塌陷问题的方法

（1）同级元素

如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>同级margin塌陷解决方法示例</title>
  <style> *{
     margin: 0; padding: 0; } .box1 {
     width: 100px; height: 100px; margin-bottom: 90px;/*只设置给一个元素*/ background-color: skyblue; } .box2 {
     width: 100px; height: 100px; background-color: skyblue; } </style>
</head>
<body>
  <div class="box1">
    1
  </div>
  <div class="box2">
    2
  </div>
</body>
</html>

（2）父子元素

①解决父子元素margin塌陷方法1：

让两个边距不要相遇，中间可以使用父元素 border或 padding 将边距分隔开；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父子元素margin塌陷解决方法1</title>
  <style> *{
     margin: 0; padding: 0; } .box3 {
     width: 100px; height: 100px; background-color: pink; border: 1px solid red; /*父级元素设置一个边框*/ } .box3 p {
     width: 50px; height: 50px; margin-top: 10px;/*子级设置需要的margin值*/ background-color: yellow; } </style>
</head>
<body>
  <div class="box3">
    <p></p>
  </div>
</body>
</html>

②解决父子元素margin塌陷方法2：

更加常用的方法：父子盒模型之间的距离就不要用儿子的 margin 去“踹”出来，而是父级的 padding“ 挤”出来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父子元素margin塌陷解决方法2</title>
  <style> *{
     margin: 0; padding: 0; } .box3 {
     width: 100px; height: 100px; background-color: pink; padding-top: 10px;/*父级设置padding，子级不用再设置距离*/ } .box3 p {
     width: 50px; height: 50px; background-color: yellow; } </style>
</head>
<body>
  <div class="box3">
    <p></p>
  </div>
</body>
</html>