盒子模型是什麼？

時間 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>