盒子的内心世界
1.模型
通过CSS的眼睛
- 在CSS看来，HTML的所有元素都被看成了盒子：段落，标题，块引用，列表，列表项等。甚至内联元素。
盒子的组成
- 内容区（content）：包含内容（文本或图像）
- 内边距（padding）：可选的
- 边框（border）：可选的
- 外边距（margin）：可选的
示图
2.简单介绍
内容区
- 内容区会存放文本或图像。
- 在浏览器的周围，看不到上图其周围的边界。
内边距
- 内边距是透明的，没有颜色，也没有自己的装饰
- 通过CSS，可以控制整个内容区周围内边距的宽度
- 甚至可以控制任意一边的（上，下，左，右）的内边距宽度
边框
外边距
3.定制盒子
内容区
内边距
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 }