[TOC]
## **介紹**
> 所有HTML元素可以看作盒子,在CSS中,"box model"這一術語是用來設計和布局時使用。
> CSS盒模型本質上是一個盒子,封裝周圍的HTML元素,它包括:邊距,邊框,填充,和實際內容。
> 盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
## **寬度和高度:**
~~~
width:10px或者10cm;
height:10px或者10cm;
~~~
## **內邊距:padding**
內邊距屬性:
~~~
padding:26px或者26cm
padding-top:
padding-bottom:
padding-right:
padding-left:
~~~
## **外邊距:margin**
同理外邊距也有:
~~~
margin-left:
margin-right:
margin_top:
margin-bottom:
~~~
## **邊框:border**
~~~
border-color:red或者rgb()或者#fffabc
border-width:thin,medium,thick,1px,2px···6px
border-redius:1.1em或1.2px(邊框圓角)
~~~
**border-style:**
> 可能的值:
> none ------------------定義無邊框。
> hidden --------------與 "none" 相同。不過應用于表時除外,對于表,hidden 用于解決邊框沖突。
> dotted --------------定義點狀邊框。在大多數瀏覽器中呈現為實線。
> dashed --------------定義虛線。在大多數瀏覽器中呈現為實線。
> solid --------------------定義實線。
> double ---------------定義雙線。雙線的寬度等于 border-width 的值。
> groove ---------------定義 3D 凹槽邊框。其效果取決于 border-color 的值。
> ridge -------------------定義 3D 壟狀邊框。其效果取決于 border-color 的值。
> inset -------------------定義 3D inset 邊框。其效果取決于 border-color 的值。
> outset ---------------定義 3D outset 邊框。其效果取決于 border-color 的值。
> inherit ----------------規定應該從父元素繼承邊框樣式。
###### **例子 1**
`border-style:dotted solid double dashed; `
*上邊框是點狀
右邊框是實線
下邊框是雙線
左邊框是虛線*
###### **例子 2**
`border-style:dotted solid double;`
*上邊框是點狀
右邊框和左邊框是實線
下邊框是雙線*
#### **但是一般直接這樣寫:**
`border:1px solid pink;`
## **背景:**
~~~
background-color:red;
background-img:url("image_path或者直接外鏈圖片地址")
background-repeat:
repeat 背景圖像將向垂直和水平方向重復。這是默認
repeat-x 只有水平位置會重復背景圖像
repeat-y 只有垂直位置會重復背景圖像
no-repeat background-image不會重復
inherit 指定background-repea屬性設置應該從父元素繼承
background-position:
left top 圖像在左上
left center 圖像在左中
left bottom 圖像在左下
right top 圖像在右上
right center 圖像在右中
right bottom 圖像在右下
center top
center center
center bottom
x% y% 第一個值是水平位置,第二個值是垂直。左上角是0%0%。右下角是100%100%。如果僅指定了一個值,其他值將是50%。 。默認值為:0%0%
inherit 指定background-position屬性設置應該從父元素繼承
~~~
## **指定邊框**
以上只是針對全部的邊框,而你可以指定邊框,指定的邊框同樣有以上屬性,指定邊框方法:
~~~
border-top-left:
border-top-right:
border-bottom-right:
border-bottom-left:
~~~