盒模型簡介紹

時間 2019-12-12

標籤模型介紹简体版

原文原文鏈接

標籤（空格分隔）：盒模型css

盒模型的概念：

在CSS中，"box model"這一術語是用來設計和佈局時使用，而後在網頁中基本上都會顯示一些方方正正的盒子。咱們稱爲這種盒子叫盒模型。html

盒模型有兩種：標準模型和IE模型。咱們在這裏重點講標準模型。python

盒模型的屬性：

width：內容的寬度佈局

height: 內容的高度設計

padding：內邊距，邊框到內容的距離code

border: 邊框，就是指的盒子的寬度htm

margin：外邊距，盒子邊框到附近最近盒子的距離blog

若是讓你作一個寬高402*402的盒子，您如何來設計呢？圖片

答案有上萬種，甚至上一種。it

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>權重</title>
    <style type="text/css">
        div{
            width:200px;
            height: 200px;
            padding: 20px;
            border:1px solid red;
        }


    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

如上述的代碼產生的以下圖的頁面，右下角就是對應的盒模型；

盒模型的重要屬性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>權重</title>
    <style type="text/css">
        div{
            width:200px;
            height: 200px;
            /*padding: 20px;*/
            /*border:1px solid red;*/
        }


    </style>
</head>
<body>
    <div>
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>權重</title>
    <style type="text/css">
        div{
            width:200px;
            height: 200px;
            padding: 20px;
            border:1px solid red;
        }


    </style>
</head>
<body>
    <div>
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

    </div>
</body>
</html>

經過上述的效果你們能夠進行對比一下；

總結：在網頁中基本都會顯示一些方方正正的盒子，這種盒子被咱們稱爲盒模型，重要的屬性就是：width,height,padding,border,margin
width:指的是內容寬度，而不是整個盒子的寬度；
heigth:指的是內容的高度，而不是整個盒子真實的高度；

盒模型的計算

作一個402*402的盒子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>和模型的計算</title>
    <style type="text/css">
        div{
            width:400px;
            height: 400px;
            border:1px solid red;
        }


    </style>
</head>
<body>
    <div>
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

    </div>
</body>
</html>

以下圖查看對應的圖片展現，200+border(上下)=402,200+border(上下)=402

第二種實現方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>和模型的計算</title>
    <style type="text/css">
        /*div{*/
            /*width:400px;*/
            /*height: 400px;*/
            /*border:1px solid red;*/
        /*}*/
        div{
            width:200px;
            height: 200px;
            border:1px solid red;
            padding: 100px;
            
        }
        


    </style>
</head>
<body>
    <div>
        內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

    </div>
</body>
</html>

總結：若是一個盒子設置了padding，border，width，height，margin(我們先不要設置margin，margin有坑，後面課程會講解)
盒子的真實寬度=width+2padding+2border
盒子的真實寬度=height+2padding+2border 那麼在這裏要注意看了。標準盒模型，width不等於盒子真實的寬度。另外若是要保持盒子真實的寬度，那麼加padding就必定要減width，減padding就必定要加width。真實高度同樣設置。

1. 盒模型介紹
2. 盒模型簡介
3. 盒模型的簡單介紹
4. css盒子模型的簡單介紹
5. CSS盒子模型簡介
6. 盒子模型簡介
7. 簡介盒子模型
8. CSS 盒模型簡介
9. CSS盒模型簡介
10. 框模型/盒子模型簡介
更多相關文章...
• MySQL數據類型簡介 - MySQL教程
• ASP.NET MVC - 模型 - ASP.NET 教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• 委託模式

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。