莞城微网站建设/电商网站网址

盒子的内心世界

---

1.模型

 

---

 

通过CSS的眼睛

• 在CSS看来，HTML的所有元素都被看成了盒子：段落，标题，块引用，列表，列表项等。甚至内联元素。

盒子的组成

• 内容区（content）：包含内容（文本或图像）
• 内边距（padding）：可选的
• 边框（border）：可选的
• 外边距（margin）：可选的

示图

---

 

2.简单介绍

---

 内容区

• 内容区会存放文本或图像。
• 在浏览器的周围，看不到上图其周围的边界。

 内边距

• 内边距是透明的，没有颜色，也没有自己的装饰
• 通过CSS，可以控制整个内容区周围内边距的宽度
• 甚至可以控制任意一边的（上，下，左，右）的内边距宽度

 边框

• 边框可以有各种不同的宽度，颜色，样式

 外边距

• 外边距也是透明的，没有颜色或装饰

---

 3.定制盒子

---

 内容区

• height
• width

内边距

h1{
    /*在内容四周增加20像素的内边距*/
    padding: 20px;
}

h2{
    /*分别指定内容四周增加的像素量*/
    padding-bottom:20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px 
}

边框

• 样式

h2{border-style: groove;
}

• 宽度

h2{
    border-width: thin;
    border-width: 5px;
}

• 颜色

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

• 指定边框圆角

h3{
    border-radius: 15px;
}

• 为某一边指定

外边距

h1{
    margin: 30px;
}

h2{
    margin-bottom: 30px;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
}

---

---