在設(shè)計(jì)HTML頁面時(shí)，能否控制好每個元素在頁面中的位置是非常關(guān)鍵的。CSS有一種基礎(chǔ)設(shè)計(jì)模式叫作盒模型，通過盒模型可以將網(wǎng)頁中的元素看作成每個盒子來解析，因此熟悉掌握CSS的盒模型知識至關(guān)重要。

一、到底什么是ＣＳＳ盒模型

在ＣＳＳ中所有的頁面元素都在一個矩形框內(nèi)，這個矩形框就成為盒子模型。盒模型描述了元素及其屬性在頁面布局中所占的空間大小，因此盒模型可以影響其他元素的位置及大小。一般來說這些被占據(jù)的控件往往都比單純的內(nèi)容要大，換句話說就是可以通過整個盒子的邊框和距離等參數(shù)來調(diào)節(jié)盒子的位置。盒模型是由margin（外邊距）、padding（內(nèi)邊距）、border（邊框）和content（）內(nèi)容幾個部分組成的，此外在盒模型中還具備寬度和高度這兩個屬性哦

首先來看一下這張示意圖

• margin屬性：稱為邊界或外邊距，用來設(shè)置內(nèi)容與內(nèi)容之間的距離。它影響的是其他元素在頁面中的位置。注意外邊距可以設(shè)置為負(fù)值，但是在各個瀏覽器中它的顯示效果可能會不同哦

• padding屬性：稱為填充或內(nèi)邊距，用來設(shè)置內(nèi)容與邊框之間的距離。它影響的是內(nèi)容在容器中的位置。注意我們的內(nèi)邊距的屬性值不可以是負(fù)值，在容器中你如果設(shè)置負(fù)值的話你想想它會往那邊去呢？想都不用想，這是不可取的哦

• border屬性：稱為內(nèi)容的邊框線或邊框，用來設(shè)置邊框的粗細(xì)、顏色和樣式。注意我們在計(jì)算盒子寬度時(shí)必須切記一定一定一定要把border(邊框)的值計(jì)算在內(nèi)哦

  注意：一個盒子的實(shí)際寬度和高度是由內(nèi)容+內(nèi)邊距+邊框+外邊距組成的。在CSS中我們可以通過設(shè)置width或height屬性來控制內(nèi)容部分的大小，并且隊(duì)醫(yī)任何一個盒子都可以分別設(shè)置他們的4邊的邊框border-top | border-right |  border-bottom | border-left 、內(nèi)邊距padding-top| padding-right | padding-bottom | padding-left 、外邊距margin-top | margin-right | margin-bottom | margin-left。注意它們是上右下左的順時(shí)針順序且可以簡寫成：如margin(外邊距)設(shè)置為：margin :  40px; 這一個值時(shí)代表上margin-top | 右margin-right | 下margin-bottom | 左margin-left的外邊距都分別擁有40像素的外邊距；設(shè)置為：margin : 40px 50px; 這兩個值時(shí)代表上margin-top | 下margin-bottom分別擁有40像素的外邊距，而左margin-left 右margin-right各擁有50像素的外邊距；設(shè)置為：margin : 50px  60px 70px; 這三個值時(shí)第一個值代表上margin-top擁有50像素外邊距，第二個值代表左margin-left | 右margin-right分別擁有60像素的外邊距,第三個值代表margin-bottom擁有70個像素的外邊距；那么如果設(shè)置為：margin : 80px 90px 100px 110px;這四個值又如何呢？相信聰明的你應(yīng)該猜到了，沒錯，他們分別代表著上margin-top擁有80個像素的外邊距，右margin-right擁有90個像素的外邊距，下margin-bottom擁有100個像素的外邊距，左margin-left擁有110個像素的外邊距。怎么樣？是不是很好理解呢？我們只需要記住的是他的順序是上右下左的順時(shí)針順序，如果記不住的話，只需要記住如果是一個值代表上下左右都是相同的值，如果是兩個值代表那么第一個值代表上下第二個值代表左右，如果是三個值那么第一個值代表上第二個值代表左右第三個值代表下，如果是四個值那么第一個值代表上第二個值代表右第三個值代表下第四個值代表左。由此可以看出右永遠(yuǎn)是排在第二位的，有右怎么會缺少左呢，所以我們只需要記住這一點(diǎn)就可以了。

   

  *特別注意：padding(內(nèi)邊距)的用法和margin(外邊距)的用法一樣。但是需要注意border(邊框)的用法是：直接寫屬性：border-top | border-right | border-bottom | border-left | border-style | border-width | border-colol。簡寫的話如：border : 1px solid #ff742d;注意區(qū)別哦

詳細(xì)說明如下

二、盒子大小如何計(jì)算box-sizing有何作用

在實(shí)際布局中，我們免不了要對盒子的大小進(jìn)行計(jì)算，那么我們應(yīng)該如何計(jì)算盒子的大小呢，如果你是在多人協(xié)作的公司，UI設(shè)計(jì)會把設(shè)計(jì)好的效果圖標(biāo)注好每個盒子的大小發(fā)給你，難道這樣我們在布局過程中就不需要計(jì)算了嗎？當(dāng)然不是，即便是有了標(biāo)注好的設(shè)計(jì)圖我們還是免不了需要計(jì)算，設(shè)計(jì)師在設(shè)計(jì)時(shí)不會按照我們的標(biāo)準(zhǔn)去設(shè)計(jì)，他設(shè)計(jì)的尺寸大小不完全適合我們當(dāng)前的頁面布局。

如何計(jì)算盒子尺寸

計(jì)算盒子大小最簡單的方法就是content+padding+border+margin，這樣就得到了盒子的實(shí)際大小。那么如果我們布局一個盒子的大小為高400px寬400px，盒子里的如果內(nèi)容超出原來的大小就會撐開盒子，例如盒子的border設(shè)置了左右各10像素的粗細(xì)那么盒子就會多出了20像素大小，我們還是希望整個盒子保持原來的寬400像素，這種情況我們應(yīng)該怎么辦，聰明的你應(yīng)該想到了，我們可以把盒子原來的400像素減去border左右10像素的粗細(xì)就是400-20=380+20。這樣就可以計(jì)算出盒子的實(shí)際大小了，把總寬度減去多出來的寬度就是實(shí)際寬度。

那么如果每次都要這么計(jì)算會不會很麻煩呢？我們到底是要搞笑寫代碼還是花時(shí)間去慢慢計(jì)算盒子大小呢？所以我們接下來要認(rèn)識一個CSS屬性box-sizing，這個屬性可以讓我們免去自己計(jì)算盒子大小的工作。當(dāng)我們使用該屬性后，擁有box-sizing屬性盒子會在我們?yōu)楹凶釉黾觔order邊框后自動幫我們計(jì)算，因此會保持原來我們所設(shè)置的寬高，這樣再也不怕盒子不聽話了。

效果如下：

三、盒子外邊距覆蓋的問題

在日常頁面布局中，我們會遇到兩個元素盒子都設(shè)置外邊距會出現(xiàn)什么情況？如果兩個盒子的外邊距設(shè)置不一樣例如類名為.demo1的盒子設(shè)置了margin-bottom : 40px; 類名為.demo2的盒子設(shè)置了margin-top : 80px;那么他們會不會相加得到外邊距距離為120px像素呢？肯定是不行的，如果出現(xiàn)這樣的情況，他們會取最大值80px作為兩個盒子之間的上下距離，而不會兩個外邊距相加，這是一種外邊距覆蓋，也就是最大值把最小值覆蓋掉了。

效果如下：

四、子元素外邊距傳遞給父元素

當(dāng)我們在頁面布局時(shí)，通常會遇到在為素寬高400像素的父元中嵌套的寬高為200像素的子元素設(shè)置外邊距margin-top: 100px;時(shí)會出現(xiàn)子元素明明設(shè)置了外邊距100像素，但是他不但沒有移動分毫反而父元素移動了，看起來父元素比他還要著急，這是什么情況呢？沒錯，這就是子元素外邊距傳遞到了父元素，但是很奇怪的是當(dāng)我們給父元素設(shè)置外邊距后這個問題反而解決了，子元素此時(shí)可以在父元素中可以自由翱翔了，這是什么原理呢？我個人認(rèn)為這可能是父元素沒有閉合，當(dāng)我們父元素添加了border時(shí)相當(dāng)于該元素此時(shí)處于閉合狀態(tài)，因此子元素的外邊距無法溢出，也就是向外傳遞，所以他才會被向下擠到100像素的位置。不過還是建議除了使用border解決外邊距傳遞的問題，給父元素設(shè)置內(nèi)邊距padding也可以讓子元素在父元素中自由的移動。

效果如下：

五、讓盒子水平居中顯示

有些時(shí)候我們在布局中想讓父元素下的子元素水平居中顯示，可以通過為子元素設(shè)置margin: auto;哦！

效果如下：

六、漸變的應(yīng)用

以前我們必須使用圖像來實(shí)現(xiàn)漸變效果，現(xiàn)在CSS中有了gradient這個屬性，通過該屬性我們我們可以在網(wǎng)頁中實(shí)現(xiàn)漸變顏色填充的效果，這樣也避免了過多的使用漸變圖片所帶來的諸多麻煩。

線性漸變：

基本語法：background: linear-gradient(blue,red);

線性漸變基本語法中包括了三個重要的參數(shù)，第一個參數(shù)用于指定漸變的方向如：linear-gradient (to right,blue,red)、linear-gradient (to right,blue,red)、linear-gradient (to left,blue,red)、linear-gradient (to right bottom,blue,red)、linear-gradient (to right top,blue,red)、linear-gradient (to bottom,blue,red)、linear-gradient (to top,blue,red)，同時(shí)也決定著漸變的停止位置。第二個第三個參數(shù)表示起始點(diǎn)和結(jié)束點(diǎn)的顏色，還可以插入更多的顏色值。

效果如下：

線性漸變

基本語法：background: radial-gradient(circle at center, white,coral);

效果如下：

七、CSS背景屬性

通過為網(wǎng)頁設(shè)置合理的背景能夠烘托網(wǎng)頁的展示效果哦。

CSS中用于設(shè)置網(wǎng)頁元素背景的基礎(chǔ)屬性有：background-color(背景顏色) |    background-image(背景圖像) | background-repeat(背景平鋪) | background-position(背景圖像定位) | background-attachment(背景是否固定)

CSS中用于設(shè)置網(wǎng)頁元素背景的尺寸屬性有：background-size(背景大小) : 長度單位 | 百分比 | 默認(rèn)值auto | cover等比縮放鋪滿容器 | contain保持寬高比等比例縮放

設(shè)置背景圖像如下效果：

八、總結(jié)

1.解決外邊距覆蓋的問題，如果兩個盒子的margin值不一樣則取最大值，最大值會覆蓋掉最小值

2.子元素外邊距傳遞到父元素問題的解決方案是為父元素添加border和padding屬性，會出現(xiàn)外邊距傳遞問題可能是父元素沒有閉合

3.讓子元素在父元素中水平居中顯示需要為子元素的margin屬性設(shè)置auto值

4.需要注意盒子的實(shí)際大小的計(jì)算方式是：content+padding+border+margin

代碼部分

<!--
 * @Author: your name
 * @Date: 2019-11-01 13:15:14
 * @LastEditTime: 2019-11-01 16:49:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \1031\static\demo.html
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS盒模型的秘密</title>
    <style>
   div {
       width: 400px;
       height: 400px;
       text-align: center;
       line-height: 400px;
       font-size: 3rem;
       color: #fff;
       font-weight: 900;
   }/*讓所有div元素寬高都為400像素大小,設(shè)置行高和對齊方式讓文本水平垂直居中對齊，設(shè)置字體大小，設(shè)置文本加粗顯示*/

   .demo1 {

       background: #ff742d;
       border-left: 10px solid #06BFFF; 
       border-right:10px solid #06bfff;
       box-sizing: border-box;
       margin-bottom: 40px;  
 
   }/*設(shè)置背景與另一個盒子區(qū)分開，設(shè)置左右邊框10像素，驗(yàn)證計(jì)算盒子大小的問題，加上box-sizing : border-box屬性值解決因?yàn)檫吙蚝凶訐未蟮膯栴}，加上下邊距驗(yàn)證盒子外邊距覆蓋的問題*/
    
    .demo2 {
        background: #06BFFF;
        margin-top: 80px;
        border:1px solid #ff742d;
    }/*加上上邊距驗(yàn)證盒子外邊距覆蓋的問題*/
    
    .box {
        width: 200px;
        height: 200px;
        font-size: 1.5rem;
        line-height: 200px;
        background: linear-gradient(blue,red);
        margin: 100px auto 20px;
        
    }/*給子元素添加寬高200像素是為了讓其能在父元素中移動，設(shè)置字體大小，改變上面400像素的行高為200以垂直對齊，添加背景便于觀察是否移動，設(shè)置上外邊距100為了驗(yàn)證字元素外邊距傳遞問題，*/

    .gradient {
        width: 400px;
        height:400px;
        margin-top: 40px;
        background: radial-gradient(circle at center, white,coral);
    }

    .image {
        width: 1920px;
        height: 1990px;
        background-image: url("./images/image.png");
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center center;
    }
    </style>
</head>
<body>
    <div class="demo1">我是第一個盒子</div>
    <div class="demo2">
        <div class="box">我是子元素盒子</div>
    </div>
    <div class="gradient">我是徑向漸變演示</div>
    <div class="image"></div>
</body>
</html>

最終效果截圖

手寫部分