两种盒模型

盒模型 - 图4盒模型 - 图5

内容盒：content-box

内容就是盒子的边界

  • box-sizing: content-box;

  • content-box width=内容宽度content

    边框盒：border-box

    边框才是盒子的边界

  • box-sizing: border-box;

  • border-box width=内容宽度content+padding+border

margin合并

哪些情况会合并？

  • 父子margin合并
  • 兄弟margin合并

合并方向：上下方向合并，左右方向不合并

阻止父子合并

  • 加border挡住
    1. 如border-top: 10px solid green;
  • 加padding挡住
    1. 如padding-top: 1px;
  • 用overflow: hidden;挡住
    1. 原因可能是把看不见的东西隐藏
  • 用display: flex

    阻止兄弟合并

  1. 兄弟合并是符合预期的
  • 用inline-block消除

1-请简述CSS盒模型是什么？

  1. CSS 盒模型有两种：
    1. 一种是content-box
    2. 一种是border-box
  2. 区别：
    1. content-box的宽度width表示：内容区的宽度（不包含padding和 border）
    2. border-box的宽度width表示：内容区+padding+border的总和。

  3. 一般优先使用后者。

    2-哪种盒模型好用？

  4. border-box好用

  5. 同时指定padding、width、border就知道为什么了
  6. 没指定padding、width、border看不出区别

    3-如何把正方形变成圆形

  1. 答案：border外部沿围成的区域
  2. 验证：border半透明试试
    1. rgba(255,0,0,1)改变最后数字1到0.几变化就可看出