CSS 盒模型

标签：盒子 border 模型 100px width 内联 margin CSS

在 css 中, 所有元素都被一个个的 "box" 包围着, 理解这些盒子的基本原理, 是实现用 css 实现精准布局, 处理元素排列的关键.

标准盒模型

盒子模型的组成元素:

content: 内容区
padding: 内天成
border: 边框
margin: 外边距

在标准盒模型中, 盒的 width / height 指的是内容区域 content-box

标准盒模型尺寸 = content-box + padding + border

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css-box</title>
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      padding: 20px;
      border: 10px solid gray;
      margin: 20px;
      background-color: pink;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      margin-top: -40px;
    }
  </style>
</head>
<body>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</body>
</html>

这里的, padding, margin, boder 都可以单独写方向, 如 top, right, bottom, left .

1个值, padding: 10px; 表示上下左右都是 10px 的内间距
2个值, margin: 5px 10px; 表示上下外边距 5px, 左右外边距 10px
3个值, 根本记不住, 不如直接写4个得了
4个值, margin: 1px 2px 3px 4px; 按适中顺序来的, 表示上, 右, 下, 左的外边距分别为 1px, 2px, 3px, 4px

盒模型的注意点:

padding 不能为负值, 而 margin 可以为负值, 就往上移动了.
背景色会平铺到非 margin 的区域
margin-top 会出现 "传递" 的现象
margin 上下叠加会出现 "塌陷"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css-box</title>
  <style>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      /* 嵌套时, margin-top 会传递父容器 */
      margin-top: 30px;
      /* border-top: 30px solid #ccc; */
    }
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2"></div>
  </div>
</body>
</html>

这里的 box2 因为有了 margin-top 会将其传染到父元素 box1, 导致整块进行了上移, 就很难受. 解决办法呢, 可以改用 padding , 或者加一个透明边框或者让其形成 BFC 等, 但最终解决方案还是用 flex / grid 布局搞定一切.

/* border-top: 30px solid #ccc; */
margin-top: 30px;

关于 margin 塌陷 也是经常出现的现象, 比如有上下两个盒子 box1, box2.

给 box1 的外下边距设置 30px, 给 box2 的外上边距设置 40px

发现这两个上下盒子的距离不是 30 + 40 = 70px, 而是二者取其大为 40px, 这就是所谓的 "margin 塌陷"

当然这种现象只会出现在上下布局中, 左右不影响, 解决方法通常可以是 margin 只设置在一头就行, 或者用 BFC 也行, 当然最终推荐还需是 flex / grid.

块级盒子与内联盒子

在 css 中我们广泛使用两种盒子, 即块级盒子和内联盒子, 他们在页面中表现的行为方式是不同的.

块级盒子: div, p, h1 ...
内联盒子: span, a, strong ..

	块级盒子	内联盒子
占行	独占一行	不产生换行
样式	支持所有样式	有些样式不支持, 如 width, height, margin 仅支持左右等
宽度	不写宽度的时候, 跟父容器同宽	不写宽度的时候, 宽度由内容决定
区域	所占区域是一个矩形	所占区域不一定是矩形, 如内容多了会自动换行
间隙	盒子间无间隙	内联标签之间会有间隙

对比指向发现内联盒子的问题特别多, 就咱在做布局的时候尽量不要选它哦, 内联盒子更多作为修饰而已啦.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>块级/内联盒子</title>
  <style>
    .box1 {
      /* 块级盒子不写宽时, 会与其父元素(此时为 body) 同宽 */
      /* width: 100px; */
      height: 100px;
      background-color: pink;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }

    .inline1 {
      background-color: pink;
      /* 内联盒子不支持宽高, margin 只支持左右 */
      width: 100px;
      height: 100px;
    }
    .inline2 {
      background-color: skyblue;
    }

  </style>
</head>
<body>
  <!-- div 是块盒子, 会默认上下排列 -->
  <div class="box1">块级盒子1</div>
  <div class="box2">块级盒子2</div>
  <span class="inline1">内联盒子1</span>
  <span class="inline2">内联盒子2内联盒子2内联盒子2内联盒子2内联盒子2内联盒子2内联盒子2内联盒子2内联盒子2</span>

</body>

</html>

自适应盒模型

自适应盒模型是指, 当盒子不设宽度时, 盒模型相关组成部分的处理方式是怎样的.

即一个小技巧是, 子盒子不设宽度, 它会默认同父元素, 同时内容也会自动往里缩.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自适应盒模型</title>
  <style>
    .box1 {
      width: 300px;
      height: 200px;
      background-color: pink;
    }

    /* .box2 {
      width: 300px;
      height: 100px;
      background-color: skyblue;
      padding: 10px;
      border: 5px solid gray;
      margin: 10px;
    } */

    .box2 {
      /* 当子盒子不写宽度时, 会保持与父元素同宽, 内容缩小 */
      /* width: 300px; */
      height: 100px;
      background-color: skyblue;
      /* 盒子和溢出 */
      padding: 10px;
      border: 5px solid gray;
      margin: 10px;
    }
  </style>
</head>
<body>
  <!-- 嵌套块盒子会溢出 -->
  <div class="box1">
    <div class="box2">box2</div>
  </div>

</body>
</html>

而千万不要去各种计算 content 啥的啦. 当然子盒子的内容如果有很多很多也不会撑开盒子宽, 会进行换行, 浮在图层上溢出啥的.

标准盒模型与怪异盒模型

就二者的计算宽高方式不一样而已, 推荐后者.

标准盒模型 width: 100px: 只包 content-box , 不包含 padding + border
怪异盒模型 width: 100px: 总包 content-box + padding + border

怪异盒模型其实更偏向于我们的认知直觉, 尤其是页面布局划分区域块的时候, 核心就是这一句:

/* 怪异盒模型下, content 会被 width 进行内缩 */
box-sizing: border-box;

box-sizing 的默认值是 content-box, 然后一旦改成 border-box 就变成怪异盒模型啦.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标准/怪异模型</title>
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      /* 标准盒模型下, padding, border 会对 content 进行扩散 */
      /* 此时的尺寸是, 100 + 10 * 2 + 10*2 = 140px 宽高的的盒子区域*/
      padding: 10px;
      border: 10px solid gray;
    }

    .box2 {
      width: 100px;
      height: 100px;
      background-color: pink;
      /* 怪异盒模型下, content 会被 width 进行内缩 */
      box-sizing: border-box;
      /* 此时的尺寸是, 还是 100px宽高的的盒子, 内容区缩成 60x60 啦 */
      padding: 10px;
      border: 10px solid gray;
    }
  </style>
</head>
<body>
  <!-- 标准盒模型, width 只包 content  -->
  <div class="box1"></div>
  <!-- 怪异盒模型, width 全包 content + padding + margin  -->
  <div class="box2"></div>

</body>
</html>

怪异盒模型的一个重要应用, 是在量区尺寸的时候, 不用再去计算一些值, 直接测出某区域的尺寸, 让内容往里面缩即可, 即先整体, 再局部.

其次是在解决一些需要设置百分比的时候比较方便.

尤其是在移动端的时候, 改成怪异盒模型布局能有效防止元素的溢出, 避免出现滚动条之类的.

基础的盒模型认知到这里就差不多啦.

标签：盒子,border,模型,100px,width,内联,margin,CSS
From： https://www.cnblogs.com/chenjieyouge/p/18173697

标准盒模型

块级盒子与内联盒子

自适应盒模型

标准盒模型与怪异盒模型

相关文章

赞助商

阅读排行

CSS 盒模型

标准盒模型

块级盒子 与 内联盒子

自适应盒模型

标准盒模型 与 怪异盒模型

相关文章

赞助商

阅读排行

块级盒子与内联盒子

标准盒模型与怪异盒模型