【CSS】Css盒子模型

標籤：技術   http   ima   一個   固定   解釋   .com   css盒子   合并   

盒子模型解釋 
元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，協助我們設定元素對應的樣式。盒子模型如下：

把元素叫做盒子，設定對應的樣式分別為：盒子的寬度(width)、盒子的高度(height)、盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。

設定寬高

width:200px;  /* 設定盒子的寬度，此寬度是指盒子內容的寬度，不是盒子整體寬度(痛點) */ height:200px; /* 設定盒子的高度，此高度是指盒子內容的高度，不是盒子整體高度(痛點) */

設定邊框 

設定一邊的邊框，比如頂部邊框，可以按如下設定：

border-top:10px solid red;

其中10px表示線框的粗細；solid表示線性，常用的有：solid(實線) 、dashed(虛線)dotted(點線)；red表示線的顏色是紅色。

設定其它三個邊的方法和上面一樣，把上面的‘top‘換成‘left‘就是設定左邊，換成‘right‘就是設定右邊，換成‘bottom‘就是設定底邊。

四個邊如果設定一樣，可以將四個邊的設定合并成一句：

border:10px solid red;

設定內間距padding

設定盒子四邊的內間距，可設定如下：

padding-top：20px;     /* 設定頂部內間距20px */ padding-left:30px;     /* 設定左邊內間距30px */ padding-right:40px;    /* 設定右邊內間距40px */ padding-bottom:50px;   /* 設定底部內間距50px */

上面的設定可以簡寫如下：

padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分別設定的是 上 右 下 左  四個方向的內邊距值。 */

padding後面還可以跟3個值，2個值和1個值，它們分別設定的項目如下：

padding：20px 40px 50px; /* 設定頂部內邊距為20px，左右內邊距為40px，底部內邊距為50px */ padding：20px 40px; /* 設定上下內邊距為20px，左右內邊距為40px*/ padding：20px; /* 設定四邊內邊距為20px */

設定外間距margin

外邊距的設定方法和padding的設定方法相同，將上面設定項中的‘padding‘換成‘margin‘就是外邊距設定方法。

盒子的真實尺寸(痛點) 
盒子的width和height值固定時，如果盒子增加border和padding，盒子整體的尺寸會變大，所以盒子的真實尺寸為：

• 盒子寬度 = width + padding左右 + border左右
• 盒子高度 = height + padding上下 + border上下

【CSS】Css盒子模型