盒模型------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 }

 

posted @ 2015-11-03 15:17  kelion  阅读(282)  评论(0)  编辑  收藏  举报