前端面試之CSS盒模型詳解

什麼是盒模型？
在HTML中，標籤可形象的理解爲一個方塊，這個方塊裏面再包裹着幾個方塊，如同盒子同樣層層包裹着，咱們看到的網頁就是由一個個盒子堆疊起來的。
主要經過六大屬性設置盒子模型：

1.width: 盒子內容寬度

2.height:盒子內容高度

3.padding 盒子內邊距，即盒子內容與盒子邊框之間的距離，上下左右均可設置padding

4.margin  盒子的外邊距，即盒子邊框以外的距離，也分上右下左

5.border  盒子的邊框，可設置邊框的寬度、顏色、樣式，也分上右下左邊框

6.background  盒子背景，背景默認狀況下會填充內容和padding

接下來，咱們詳解這些屬性美化盒子及相關注意問題，

1.width、height---內容的寬度與高度

```
    div{
        width:200px;
        height:200px
    }
    .box{
        width:80%;
        height:80%;
    }
    ```
複製代碼

注意：

1.塊級元素與行內塊級元素可設置寬高，行內元素不能設置

2.行內元素的寬度有內容決定，高度有內容font-size大小決定

3.width與width可設置百分比，是相對於父元素的百分比。

2.margin---盒子與盒子之間的距離，分上、右、下、左方向的margin

margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

複製代碼

注意：

1.有些標籤有默認的margin值，可經過; **{margin:0}*去除

2.margin對於塊級元素在四個方向上都有做用，但在行內元素中，只能在水平方向上有用

3.margin 塌陷問題

2個前提: 塊級元素、垂直方向
        重疊分類
                兄弟元素之間的重疊：上面盒子的margin-bottom與下面盒子的margin-top重疊，中間的margin大小時取大優先。
                   重疊解決：
                        方法1：將塊級元素轉換成行內塊級元素
                        方法2：設置浮動
                父子元素之間的重疊：父元素設置margin-top和父元素的第一個子元素設置的margin-top會重疊;
                   重疊解決：
                        方法1：給父元素設置border-top，如不想要邊框可將其設置爲透明transparent；
                        方法2：給父元素設置padding-top；
                        方法3：將塊級元素設置成行內塊級元素;
複製代碼

4.margin可設置負值;

3.border---設置盒子邊框；

border:1px solid red;
border-top:2px solid green;
border-top-width:100px;
複製代碼

注意：

1.border可設置粗細、線型、顏色。如，border-width,border-style,border-color;

2.border在頁面上佔據空間;

3.border可實現三角形; 將元素寬度爲0，設置border寬度便可;

4.padding---盒子內容與邊框的距離;

padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
複製代碼

注意：

1.有些標籤默認有padding值，使用 *{padding:0},取消padding;

2.padding用於調整內容與邊框間的間隙

3.padding在頁面上佔據空間

5.background---設置盒子的背景，可爲顏色填充--background-color也可圖片填充--background-img;

background-color:yellow;
background-color:#ffffff;
background-color:rgba(255,255,255,0.5)  //最後一項是透明度

backgrond-img: url(../images/logo.png);
backgrond-repeat:no-repeat;---圖片平鋪方式
backgrond-position:10px 10px;---圖片顯示的位置
複製代碼

易混點

1.當將一個盒子寬度給定，如widht:100px，此時是指盒子的內容寬度爲100px，而不是隻這個盒子佔據的空間寬度。盒子空間寬度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right;

2.當不設置元素寬度，則這個盒子將會繼承父元素寬度的100%，這個寬度是指這個盒子佔據的空間寬度，裏面包括margin、border、padding，若是設置margin，padding，border，將會減小內容寬度，由於空間寬度必定。