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


 


分享给朋友:
您可能感兴趣的文章:
随机阅读: