1. 盒模型

1）内容区 content

  • 特点：

    • 内容区的大小由width和height决定
    • 内容区是文字，图片等的显示区域

2）内填充 padding/padding-方向

  • 值的设置：

    padding: 10px; 一个值， 设置周围

    padding: 10px 20px; 两个值， 高低 左右

    padding: 10px 20px 30px; 三个值， 上 左右 下

    padding: 10px 20px 30px 40px; 四个值， 顺时针 上右下左

  • 特点：（四点）

    • padding会撑大盒子。如果不想撑大，要在原来的宽高根底上减去对应方向的padding值
    • 背景图和背景色能够在padding区域显示
    • padding 不能够设置正数

    • padding能够用来调整内容和盒子边缘之间的间隔

      示例

      <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        .box {            width: 100px;            height: 100px;            margin: auto;            background-color: pink;            padding: 20px;        }    </style></head><body>    <div class='box'>盒子</div></body></html>

      后果：

3) 外边距 border/border-方向

4) 外边距 margin/margin-方向

  • margin 值的设置和padding值设置一样 margin/margin-方向
  • 单方向margin-方向（left/right/top/bottom）: 数值+px

  • 特点：（四点）

    • margin不会撑大盒子，然而会影响他人
    • margin区域不会显示背景图/背景色
    • margin能够设置正数， 正数会让两个盒子重叠在一起
    • margin能够用来调整盒子和盒子之间的间隔

  • margin 的两个bug

    • （1）margin的重叠

      • 给下面的元素增加下边距，给上面的元素增加上边距之后，会产生margin的重叠，且值取最大值。

        左右不会重叠，会相加。

    • （2）margin的传递（当给元素的 第一个子元素 增加 margin-top 的时候，会谬误的加在父元素身上）

      • 解决办法：

        • 用padding设置
        • 给父元素加边框
        • 给父元素增加overflow: hidden(溢出暗藏)
        • 给父元素或者该元素增加浮动