盒子模型是什么？

时间 2020-07-27

标签盒子模型什么栏目 CSS 繁體版

原文原文链接

盒子模型是什么

在页面布局时候，dom元素所采用的布局模型，就是通俗意义上的盒子模型。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 30px;
            margin: 10px;
            padding: 20px;
            border: 5px solid chocolate;
        }
    </style>
</head>
<body>
    <div class="box">
        content
    </div>
</body>
</html>

1. 盒子模型包括 `外间距-边框-内间距-内容` 4个部分。打开浏览器F12查看, 能够清晰的看到盒子的外边距-边框-内边距和最后的内容构造，这就是整个盒子模型

2. 常见的盒子模型又两种,能够经过box-sizing进行设置

border-box (IE盒子模型)
content-box (W3C标准盒子模型)html
- 如今咱们添加属性box-sizing:border-box,能够明显的看到咱们定义的宽度width(100px) = content(50px) + padding(40px) + border(10px)，

那么盒子的宽度就是`width(100px) + margin(20px) = 120px`

- 修改`box-sizing: content-box`,能够看到`width(100px) = content(100px)`，
那么盒子的宽度就是`width(100px) + padding(40px) + border(10px) + margin(20px) = 170px`

3. 外边距的问题

相邻的两个元素之间的间距，取最大

<style>
.box2{
    width: 50px;
    height: 10px;
    margin: 20px;
    padding: 30px;
    border: 10px solid seagreen;
}
</style>
<div class="box">
    content
</div>
<div class="box2">
    content2
</div>

这里咱们能够看到两个盒子相邻的外边距，是最大的box2的外边距

4. 因为ie的怪异盒子模型，致使的浏览器显示不一致的解决办法

相信你们不难发现，相比较border而言，咱们的关键问题在于padding(border较少),那么最佳的解决方案，就是能用margin，就不用padding。
可是有些状况，不是说不用padding就能解决的。那怎么办呢？这里咱们能发现，全部的一切都是由于width 和padding/border 同时使用形成的。
那么最终的解决方案就出来了。
能够在盒子内出定义一个无width的盒子，将padding 和boder 赋值到整个盒子上，外面的盒子。咱们只给width和margin就能够了。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            margin: 20px;
        }
        .content{
            padding: 20px;
            border: 5px solid chocolate;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            content
        </div>
    </div>
</body>
</html>

能够看到，咱们里面的盒子虽然没有设置宽度，可是通过外面的盒子包裹，已经有200px的宽度了。正式外层盒子的宽度，可是同时又有padding 和border ，这样就能够完美的解决怪异盒子的问题。

盒子模型是什么？

盒子模型是什么

1. 盒子模型包括 外间距-边框-内间距-内容 4个部分。打开浏览器F12查看, 能够清晰的看到盒子的外边距-边框-内边距和最后的内容构造，这就是整个盒子模型

2. 常见的盒子模型又两种,能够经过box-sizing进行设置

3. 外边距的问题

4. 因为ie的怪异盒子模型，致使的浏览器显示不一致的解决办法

1. 盒子模型包括 `外间距-边框-内间距-内容` 4个部分。打开浏览器F12查看, 能够清晰的看到盒子的外边距-边框-内边距和最后的内容构造，这就是整个盒子模型