10 盒模型

時間 2019-11-12

標籤模型简体版

原文原文鏈接

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

盒模型示意圖 :html

盒模型的屬性 :佈局

　　width：內容的寬度。盒子不設置寬度就是內容的寬度，若是設置寬度，內容太多，就會溢出。最好不設置ui

　　height: 內容的高度spa

　　padding： 內邊距，邊框到內容的距離設計

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

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

盒模型的計算blog

若是一個盒子設置width，height，padding，border，margin(我們先不要設置margin，margin有坑，後面課程會講解)文檔

不加margin

盒子的真實寬度 = width+2*padding+2*border

盒子的真實寬度 = height+2*padding+2*border

標準盒模型，width不等於盒子真實的寬度。width是content的寬度。

1. padding(內邊距)

padding：就是內邊距的意思，它是邊框到內容之間的距離。另外padding的區域是有背景顏色的。而且背景顏色和內容的顏色同樣。也就是說background-color這個屬性將填充全部的border之內的區域

padding的設置：

padding有四個方向，分別描述4個方向的padding。描述的方法有兩種

（1）寫小屬性,分別設置不一樣方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

（2）寫綜合屬性，用空格隔開

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;
 
/*上 左右  下*/
padding: 20px 30px 40px;
 
/* 上下 左右*/
padding: 20px 30px;
             
/*上下左右*/
padding: 20px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 160px;
            height: 160px;
            border: 1px solid red;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            padding-top: 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

網頁效果：

上面的4行padding代碼能夠縮減爲一行代碼：padding: 20px;

一些標籤默認有padding：

好比ul標籤，有默認的padding-left值。那麼咱們通常在作站的時候，是要清除頁面標籤中默認的padding和margin。以便於咱們更好的去調整元素的位置。

2. border(邊框)

border:邊框的意思，描述盒子的邊框

邊框有三個要素： 粗細線性樣式顏色

　　　　　　　　border: 1px solid red;

屬性：

border-width:4個邊框寬度
border-style:
---none 默認 無輪廓
---dotted 點輪廓
---dashed 虛線輪廓
---solid 實線輪廓，使用較多
---double 雙線輪廓
border-color
border-right
border-left
border-bottom
border---top
border-radius
border-shadow

若是顏色不寫，默認是黑色。若是粗細不寫，不顯示邊框。

若是隻寫線性樣式，默認的有上下左右 3px的寬度,而且黑色的邊框實體樣式。

按照3要素來寫border ：

border-width: 3px;

border-style: solid;

border-color: red;

/*
border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/

按照方向劃分：

border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
 
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;

另外還能夠這樣：

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;

設置圓角 border-radius: 5px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*設置圓角*/
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

網頁效果：

若是爲50%，表示一個圓 border-radius: 50%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*圓*/
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

網頁效果：

border:none；或者border：0；表示border沒有設置樣式。

3. margin

　　外邊距的意思。表示邊框到最近盒子的距離。

/*表示四個方向的外邊距離爲20px*/
margin: 20px;

/*表示盒子向下移動了30px*/
margin-top: 30px;

/*表示盒子向右移動了50px*/
margin-left: 50px;

先來2個div　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
        }
        .box1 {
            background: red;
        }
        .box2 {
            background: green;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

網頁效果：

右移動50px：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
        }
        .box1 {
            background: red;
            margin-left: 50px;
        }
        .box2 {
            background: green;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

網頁效果：

上移動-50px：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
        }
        .box1 {
            background: red;
            margin-left: 50px;
        }
        .box2 {
            background: green;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

網頁效果：

並排展現：用到浮動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
        }
        .box1 {
            background: red;
            float: left;
        }
        .box2 {
            background: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

網頁效果：緊密挨在一塊兒

margin 水平方向（塌陷問題）

margin描述兄弟之間的距離。標準文檔流下，垂直方向會出現塌陷問題。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;

        }
        div.box{
            background-color: red;
            margin-bottom: 20px;
        }
        div.wrap{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box"></div><div class="wrap"></div>
</body>
</html>

網頁效果：紅色盒子往下推了綠色盒子20px

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;

        }

        p{
            margin-top: 100px;
        }

    </style>
</head>
<body>
    <div class="box">
        <p>日天</p>
    </div>
</body>
</html>

網頁效果，總體往下塌陷100，而父盒子和子內容相對位置不變。p和div是父子盒。因此，對子盒子應用margin，是總體移動，而不是p單獨移動。

解決方案1：父盒子設置border

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px solid transparent;
        }

        p{
            margin-top: 100px;
        }

    </style>
</head>
<body>
    <div class="box">
        <p>日天</p>
    </div>
</body>
</html>

上面解決方案給盒子增長邊框了，雖然解決了短暫問題，但不是最優方案

解決方案2：父盒子使用超出額隱藏功能，解決塌陷問題

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            overflow: hidden
        }

        p{
            margin-top: 100px;
        }

    </style>
</head>
<body>
    <div class="box">
        <p>日天</p>
    </div>
</body>
</html>

解決方案3：浮動。由於浮動型的盒子不是標準文檔盒子，不受約束

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }

        p{
            margin-top: 100px;
        }

    </style>
</head>
<body>
    <div class="box">
        <p>日天</p>
    </div>
</body>
</html>

總結一句話：任何標籤只要設置浮動了，均可以設置寬和高。另一個div元素，若是設置浮動以後，不設置寬高，會發現，它收縮了，變成了內容的寬度（有點像行內元素）

相關標籤/搜索

每日一句

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