盒模型------CSS

盒子的心裏世界

---

1.模型

 

---

 

經過CSS的眼睛

• 在CSS看來，HTML的全部元素都被當作了盒子：段落，標題，塊引用，列表，列表項等。甚至內聯元素。

盒子的組成

• 內容區（content）：包含內容（文本或圖像）
• 內邊距（padding）：可選的
• 邊框（border）：可選的
• 外邊距（margin）：可選的

示圖

---

 

2.簡單介紹

---

 內容區

• 內容區會存放文本或圖像。
• 在瀏覽器的周圍，看不到上圖其周圍的邊界。

 內邊距

• 內邊距是透明的，沒有顏色，也沒有本身的裝飾
• 經過CSS，能夠控制整個內容區周圍內邊距的寬度
• 甚至能夠控制任意一邊的（上，下，左，右）的內邊距寬度

 邊框

• 邊框能夠有各類不一樣的寬度，顏色，樣式

 外邊距

• 外邊距也是透明的，沒有顏色或裝飾

---

 3.定製盒子

---

 內容區

• height
• width

內邊距

 1 h1{
 2     /*在內容四周增長20像素的內邊距*/
 3     padding: 20px;
 4 }
 5 
 6 h2{
 7     /*分別指定內容四周增長的像素量*/
 8     padding-bottom:20px;
 9     padding-left: 20px;
10     padding-right: 20px;
11     padding-top: 20px 
12 }

邊框

• 樣式

h2{
    border-style: groove;
}

• 寬度

1 h2{
2     border-width: thin;
3     border-width: 5px;
4 }

• 顏色

h3{
    border-color: red;
    border-color: rgb(204,102,0);
    border-color: #aabbcc;
}

• 指定邊框圓角

1 h3{
2     border-radius: 15px;
3 }

• 爲某一邊指定

外邊距

 1 h1{
 2     margin: 30px;
 3 }
 4 
 5 h2{
 6     margin-bottom: 30px;
 7     margin-left: 30px;
 8     margin-right: 30px;
 9     margin-top: 30px;
10 }