CSS学习中|CSS盒子模型（重点学习！代码+样例）

1.盒子模型（Box Model）

理解盒子模型：

可以把html页面中的布局元素看作一个矩形的盒子，她就是一个盛装内容的容器

如图，把content（内容）想象成一个网购的新手机，有宽（width）和高（height）

手机距包装盒的距离为内边距（padding）

包装盒本身的宽度为边框（border）

如果有两个新手机（两个盒子），两个盒子之间的距离为外边距（margin）

（图片摘自网络，侵删）

2.盒子边框（border）

属性：

border-width 定义边框粗细、单位是px

border-style 定义边框的样式

border-color 定义边框的颜色

其中边框的样式包括：

none：默认没有边框

solid：实线边框

举例：20px的实线边框（width和height200px）

dashed：虚线边框

举例：20px的虚线边框（width和height200px）

dotted：点线边框

举例：20px的点线边框（width和height200px）

其中边框的颜色代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>border</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      border-width: 20px;
      border-style: dotted;
      border-color: red;
    }
  </style>
</head>
<body>
  <div>盒子</div>
</body>
</html>

样例：

边框综合写法（简写）

举例：（没有顺序，常见写法如下）

boder：1px solid red；

表格的细线边框

通过表格的cellspacing=“0”,将单元格和单元格之间的距离设置为0

举例:

通过下方代码和样例，单元格和单元格直接有距离，这个距离就是因为边框1px和1px之间造成的距离

现在我们想让这个距离变为0，也就是使cellspacing=“0”

使用属性border-collapse: collapse;

举例:（未使用border-collapse: collapse;）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>边框粗细</title>
  <style>
  table,th,td {
    border: 1px solid blueviolet;
  }
  </style>
</head>
<body>
  <table>
    <caption>个人情况介绍</caption>
    <tr>
      <th>a</th>
      <th>19岁</th>
      <th>男</th>
      <th>大一</th>
    </tr>
    <tr>
        <td>b</td>
        <td>16岁</td>
        <td>男</td>
        <td>高中生</td>
      </tr>
      <tr>
          <td>b</td>
          <td>24岁</td>
          <td>女</td>
          <td>白领</td>
        </tr>
  </table>
</body>
</html>

样例：

举例:（使用border-collapse: collapse;）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>边框粗细</title>
  <style>
  table,th,td {
    border: 1px solid blueviolet;
    border-collapse: collapse;
  }
  </style>
</head>
<body>
  <table>
    <caption>个人情况介绍</caption>
    <tr>
      <th>a</th>
      <th>19岁</th>
      <th>男</th>
      <th>大一</th>
    </tr>
    <tr>
        <td>b</td>
        <td>16岁</td>
        <td>男</td>
        <td>高中生</td>
      </tr>
      <tr>
          <td>b</td>
          <td>24岁</td>
          <td>女</td>
          <td>白领</td>
        </tr>
  </table>
</body>
</html>

样例：

3.内边距（padding）

概念：

指的是边框和内容之间的距离

设置：

padding-left 左内边距

padding-right 右内边距

padding-top 上内边距

padding-bottom 下内边距

注意：

内边距会撑大盒子

举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>071502</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      padding-left: 10px;
      padding-top: 30px;
    }
  </style>
</head>
<body>
  <div>我爱吃烤鸡头</div>
</body>
</html>

样例：（盒子被撑大了，这里用了FSCapture屏幕标尺工具）

内边距简写

1.给1个值

padding：30px

即上下左右全是30px内边距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>071502</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      /* padding-left: 10px;
      padding-top: 30px; */
      /* 简写 */
      padding: 30px;
    }
  </style>
</head>
<body>
  <div>我爱吃烤鸡头</div>
</body>
</html>

样例：F12模式下

2.给2个值

padding: 10px 30px;

即上下10px，左右是30px，内边距

3.给3个值

padding: 10px 30px 80px;

即上10px，左右30px，下80px，内边距

4.给4个值

padding：10px 20px 30px 80px；

即上右下左依次的内边距（顺时针考虑即可）

4.内盒尺寸的计算（元素实际大小）

盒子实际的大小=内部宽度和高度+内边距+边框

举例：

看到一个div，量出他的尺寸是200px × 200px

那么你可能会想到，给一个width 200px 再给一个height 200px

但这时候需要给内边距padding，比如给一个10px

盒子被撑开了显示为220px，显然不满足我们200px的需求了

所以这时候应该

用width（200px）-多出的内边距（20px）=180px

height同理

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>盒子大小</title>
  <style>
   div {
     width: 180px;
     height: 180px;
     padding: 10px;
     background-color: aquamarine;
   }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

样例：

特殊情况：如果盒子没有宽度，则padding不会撑开盒子（高度同理）

举例：

div中放入一个p标签，给p标签一个高度，不给宽度

所以这时 p 的宽度就是父标签的宽度

这时我们再给p一个padding值

padding并没有被撑开盒子，只是盒子内容（文字部分）向右移动了30px

那么再来看看给p标签一个width之后，盒子会不会被撑开呢

样例：

果然盒子被撑开了

4.外边距（Margin）

基本同理于padding

margin就是盒子于盒子之间的距离，或者是盒子距离四周的距离

简写方式完全同于padding

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Margin</title>
  <style>
   div {
    width: 200px;
    height: 200px;
    margin-left: 300px;
    background-color: blue;
  }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

样例：

左侧300px的外边距

块级盒子居中水平对齐（用Margin）

代码：

块级盒子居中必须要有宽度

除了上图中的写法一

还有两种写法

第二种：

margin ： auto；

第三种：

margin ： 0 auto；

清除元素的默认内外边距（重点）

当我们简单写一句话时，会发现距离浏览器上侧和左侧都有一定距离，但我们实际上并没有设置

我们发现原来默认给了一个margin：8px 因此留有空白

那么如果我们不需要这个空白，就要清除元素默认的内外边距值

代码：

以后写css时需要先写这句话

样例：

现在就没有空白了

另：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距（其实设置了也没用，所以干脆不设置）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>清除内外边距</title>
  <style>
  * {
    padding: 0;
    margin: 0;
  }
  span {
    background-color: aquamarine;
    margin: 20px;
  }
  </style>
</head>
<body>
  hello我爱吃烤鸡头<br />
  <span>hello我爱吃烤大肠</span>
</body>
</html>

样例：

虽然给span了一个上下左右的外边距值，但是只有左右显示了

外边距的合并

当上下相邻的两个块元素相遇时，取两个值中较大者，这种现象被成为相邻块元素垂直外边距的合并

（图片源于网络，侵删）

举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外边距合并</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .top,
    .bottom {
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
    .top {
      margin-bottom: 20px;
    }
    .bottom {
      background-color: blueviolet;
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <div class="top"></div>
  <div class="bottom"></div>
</body>
</html>

样例：看标尺得出最后保留100px 因为100>20，保留100

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

代码：

在div中嵌套一个div

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>塌陷</title>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: chartreuse;
    }
    .son {
      width: 30px;
      height: 30px;
      background-color: chocolate;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

样例：

这时我们想让里面的div向下移动50px

这时考虑，给里面的div一个margin-top值就可以啦，让我们试一试